Column specific filter – AngularJS

Hi Guys,

Recently I started working on AngularJS.

We got a requirement that we have to filter a table specific to columns.

I thought I get something directly from internet, so I can copy, paste. But I didn’t get any :(

The options that are available in default AngularJS filters are, 

1. Search the entire table using the given search string.
2. Specify particular columns to search. (This looks like solving our problem. But it didn’t)

The problem in this available approach is, the filter always search the columns with AND condition.

ie., If I have 4 columns in my table say, “Id, Name, City, Country”. I can configure the filter like {name:my_search_string, city:my_search_string} to search in “name” and “city” column alone. (Leaving Id and Country)

Eg:

Sample data:

Id: 1     Name: Balaji               City: Chennai              Country: India

Id: 2     Name: Goutham       City: Kansas                 Country: America

Id: 3     Name: Dinesh            City: Dubai                   Country: UAE

Id: 4     Name: Satheesh        City: Helsinki               Country: Finland

If my_search_string = ‘b’, this configured filter search for b in Name AND in City. So it will not return any record.

But according to our requirement it should search the columns using OR condition and should return two records (which has ‘b’ in Name or in City)

Id: 1     Name: Balaji                           City: Chennai             Country: India

Id: 3     Name: Dinesh                        City: Dubai                  Country: UAE

(try it out in plunker)

This is also useful when we have hidden columns. Like, if we have 10 columns in my data and I want to display only 5 to the user.

In this case we will get weird results, as the normal filter consider all the 10 columns instead of only the visible 5 columns.

I didn’t get any filter options to solve this problem. So I tried to put lot of fixes and make it work. But my architect didn’t accept those fixes and told me to write a custom filter (my mind voice: therija elutha maatoma) which accepts the column keys as inputs and search only in that column. Finally I have written one column specific filter (after lot of googling).

Column Specific Filter:

Syntax: columnSpecificFilter: my_input_string (String): column_keys_to_search(String Array)

Eg: columnSpecificFilter: ’b’: [“name”, “city”]

You can find an example here.

Designing reusable component – iOS

Hi All,

I created UIFormattedTextField as a component. I would like to provide the gist of conversation between me and the Architect during development here.
The Architect of my project always encourages the team to develop reusable components and use that in the project.

Current project requirement is to get the amount as input from the user.
Demo1:
So I started working on it. I created a normal textfield which accepts both number and character. But while submitting the form it gives an error, “Please enter only number”. I demoed it.

Architect: Hey we are developing this for mobile device. The current implementation will annoy the user. So modify the text field, which accepts only number instead of giving the error at last.


Demo2:
The real development, googling, coding everything starts here. Changed the text field to accept only numbers and dot and it will format the number by putting commas.

Architect: Good work man. This is a currency field right. why can’t we put a currency symbol?
Me: We can place a label before the text field and put the symbol, simply we can hard code and finish it off.
Architect: Then its not dynamic. Put the symbol in the text Field itself. Also make it localized. So when I change the device location to India it should show Rupee symbol and format the number according to Indian format.
My mind voice: Super. Google will help me.

Demo3:
Done all the comments given in demo2. So now the text field will format and show the currency symbol according to current location.
For India:

For US:

Architect: Super. Its looking good. So why can’t we make it as a component so that I can set the type of the text field as Currency, Number, PhoneNumber, SSN etc and text field should behave according to the given type.
Me: Yes we can.

Demo4:
Everything done. Now we can set the type of the text field.
Architect: Ya good. Ok now we can start using this. Circulate this to all our team members.

Me: Ya sure. But while working on this, I thought, instead of giving the type separately, like PhoneNumber, SSN etc. I will remove all these types and give an option dynamic. So you can set the type “Dynamic” and define your own pattern in the format xxx-xxx-xxxx (for US Phone number), xxx-xx-xxxx (for SSN) so we can avoid lot of options.
Architect: That is also good option. Do that and distribute across team.

Everything done. Now the text field accept the types,
1. Currency
2. Number
3. FormattedNumber
4. Percentage
5. Dynamic

If you look at the code, you can see some other types too which is used before the introduction of Dynamic. Now you can achieve the same using Dynamic and FomatPattern.
After this entire development, I learnt how to think and design before actually start our coding. Thanks to my Architect who taught me how to think “Mobile” while developing each and every feature.

How to use the component in your iOS projects:
1. Drag and drop the “UIFormattedTextField.h” and “UIFormattedTextField.m” files to your project.

2. Import the header in your class, where do you want to use it.
#import “UIFormattedTextField.h”

3. If you are using xib or storyboard, change the class of the text field in the “Identity inspector” to UIFormattedTextField.

4. Create an instance variable to access the text field.
IBOutlet UIFormattedTextField *currency;

5. Set the type and delegate of the text field. Don’t forget to import the delegate <UITextFieldDelegate>
currency.type = @”Currency”;
currency.delegate = self;
currency.numberOfDecimalPlaces = 3;

6. You have to change the delegate function ,
-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
return YES;
}
to
-(BOOL)textField:(UIFormattedTextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
return [textField shouldChangeCharactersInRange:range replacementString:string];
}

7. You are done.
You can download the sample project here FormattedTextFieldDemo.

Screenshot: