Filter Records in a List Control

Description

Create a highly customized 'Search Part' to filter the records shown in a List control.

Used with the UX component.

 List Control Filter/Order

List Control name
Specify the name of the List control that you want to filter
Define search fields
Specify the controls on the Dialog that will be used to compute the Filter to apply to records in the List control.
Search syntax
Specify the syntax for the Search Expression that is generated.
Combine multiple search conditions with
If the user defines a search on more than one field, combine the search criteria with either an AND or an OR keyword.
Keyword search
Specify if the search is a 'keyword' style search. For a 'keyword' search, there is a single control where the user types a value to search for, and the search is performed in multiple fields. For example, the user might enter a search value of 'smi', and the search would be performed in the Firstname, Lastname, Address, City, and State fields.
Search input field
Specify the name of the control into which the user will enter the search value. If you want to call a Javascript function to return the search value, specify: Javascript_<functionName> where 'functionName' is the name of the Javascript function you want to call. For example: javascript_myfunc
Search fields
Specify the fields in the List that should be searched.

 Debugging

Show debugging information
Specify if the computed filter expression should be shown on the component.
Placeholder for message
Specify the ID of a placeholder control on the component where the debugging information should be shown. TIP: To add a placeholder to the component select the [Placeholder] control in the 'Other Controls' section of the toolbox.

 Add a 'Filter Records in a List Control' Action to a UX

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu and click on the [Textbox] option to add a textbox control to the component. Give the textbox the name and label 'Country'

  2. In the 'Data Controls' menu and click on the [List] option to add a list control to the component.

  3. Highlight the list control. In the properties list on the right click on the 'List properties' property in the 'List Properties' section. The List Builder will open.

  4. In the List Builder's Data Source pane select SQL in the Data Source Type menu.

  5. Click the [...] button next to the Connection string property and set the connection string to the Northwind database.

  6. Click the [...] button next to the 'Table name' property and select the 'Customers' table.

  7. Click the [...] Field list property. Select the ContactName, City, and Country fields and click OK.

  8. Open the List Layout pane and move the three data fields from the Available Fields list to the Columns in List section.

  9. Open the 'List Properties' pane. In the 'List Properties' section check the 'Has Search Part' checkbox.

  10. Open the 'Search Part' pane. Click the [...] button next to the 'Search part field map' property.

  11. Highlight the Country field and click the 'Map Field' button.

  12. Select the 'country' textbox control and click OK, OK, and OK again to close the list builder.

  13. Open the 'Other Controls' menu and click on the [Button] option to add a button control to the component.

  14. Highlight the button control. In the properties list set the 'Button text' property to read 'Search'.

  15. In the properties list under the 'Javascript - (Touch, Mouse, Pointer Events)' section click the [...] button next to the 'click' property.

  16. In the 'Edit Click Event' dialog select the 'Action Javascript' option from the radio button selection and click the 'Add New Action' button.

  17. Type 'filter' into the filter list and highlight the 'Filter Records in a List Control' option. Click OK.

  18. Click the dropdown next to the 'List Control name' property and select 'list1'.

  19. Click the [...] button next to the 'Define search fields' property.

  20. In the Specify Search Fields and Search Options dialog click the 'Add' button.

  21. Select 'Country'. Click OK. OK, and Save.

  22. Highlight the country search field. In the properties list on the right click the [...] button next to the 'Field to search' button and select the 'Country' field. Click OK, OK, OK, and Save.

    Here the 'Search option' property is being left at the default 2 setting. However, it is worth clicking the [...] button next to the 'Search option' property and checking out some of the available search settings.
  23. Run the component in Live Preview. Try typing a Country name into the textbox and clicking the Search button. The list should refine to show only rows of data in the list for that country.

See Also