UI/UX Design: Search Filter

How to create search Filter

scenario:- For searching the desired result in table, either name, address and getting filtered result. here took employee table using repeater and using search filter to get the same.

Step - 1 - Create Repeater with Employee ID, Name, and Address then Place Header as per table,

Click on Repeater cell and place box and name it as ID, Name, Address and In Properties tab click on "OnItemLoad" it will open Case Editor.

Step - 2 - In Case Editor -> Click to add actions -> Widgets -> Set text

Configure actions -> Checked ID in bottom click on "fx" it will open Edit Text window

Step - 3 - In Edit Text window -> click on -> Insert variable or function -> From dropdown select Item.ID and click OK to close Edit Text window.

Follow the same step for Name and address.

Step - 4 - Now after setting all variable to value click OK and close case editor.

Step - 5 - Now Place label and Text Field for Search Filter, Name it and give hint for Text Field.

Step - 6 - Select the Text Field, In Properties Tab click on "OnTextChange" it will open Case Editor.

In Case Editor -> Click on top Add Condition, it will open condition Builder window

In Condition Builder -> Select 3rd dropdown and select "does not equal" and click OK

Step - 7 - Now in Case Editor -> Click to add actions -> Repeaters -> Add Filter

In Configure actions -> Checked Repeater in bottom checked "Remove other Filter" and click on "fx" it will open Edit Value Window.

Step - 8 - In Edit Value Window add Rule like here Name or Address Filtering, so took Item.Name || Item.Address, only need to add condition on it as below. toLowerCase check case-insensitive, indexOf for searching text.

[[Item.NAME.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 || Item.ADDRESS.toLowerCase().indexOf(This.text.toLowerCase()) >= 0 ]]