Exercise 3: Add Searching and Sorting

Goal

In this exercise, you'll add the ability to search and sort your notes.

Add search capability

You'll start this exercise by adding a way to filter your notes by using a text search.

Add a search component

1. Start by adding a client state parameter to hold the search term. At the bottom left in the Data and scripts panel choose Client state parameters.

2. In the dialog box, choose the +Add button and add a String type parameter with the name searchTerm and no value.

   

3. Close the Edit client state parameters modeless dialog.

4. Add a Search input component after the Heading 1 component in the Search Container.

5. In the Configure panel set the following properties:

   1. Placeholder: Search notes

   2. Placement: Header

6. Click into the Events tab and add a new event mapping for the Search executed event.

7. Choose the Update client state parameter event, set the Client State Parameter Name to searchTerm, and choose data binding for the New Value.

   

   Unfortunately, not all events currently expose their event payload schema in UI Builder so you'll have to write the event payload in manually. This is a current limitation with some events and their payloads in UI Builder. The payload is the data that comes along with the event. For this event that is the term that is being searched.

8. In the bind data modal that comes up, double click into the top section that says Add data output to this area, paste in @payload.searchTerm, and choose Apply and then Add.

9. Save the page (this step is important). Save time saving with the keyboard shortcut CMD+S (mac) or CTRL+S (Windows).

Filter the data resources

Now you'll use the searchTerm client state parameter to filter both the data resources to display only the records containing the search term.

1. Click on the Look up notes data resource in the Data and scripts section.

2. Click on Edit conditions and add the following and conditions and hit Apply:

   • Title | contains | <data binding> Client states > searchTerm OR

   • Text | contains | <data binding> Client states > searchTerm

     

3. Now do the same thing with the Note count data resource so the conditions on the two data resources match.

4. Now you'll need to have the two data resources refresh when the search is executed. In the Events tab of the Search input component, add another event handler to the Search executed event.

5. Choose the REFRESH event handler under the Look up notes section and click Add.

   

6. Do the same thing and add an event handler for the Note count data resource as well.

7. Save the page and test it in a new tab by searching the term Training. You should end up with three results.

   

Add sorting

In the section, you'll add the capability to sort your notes by Created and Updated ascending or descending.

Add controls

You'll start by adding some client state parameters and binding them to your data resource.

1. Back in your UI Builder tab, start by adding 2 client state parameters from the Data and scripts panel.

   • sortField | string | sys_updated_on

   • sortOrder | string | desc

2. Now open the Look up notes data resource from the Data and scripts panel.

3. Scroll down to the Order by and Sort type properties and bind the following values:

   • Order by: <data binding> Client states > sortField

   • Sort type: <data binding> Client states > sortOrder

Add components

Now, you need to set those two CSPs to control the sorting. You could even set them from multiple areas.

1. Find the Repeater 1 component in the content tree and add a component before.

2. Click the Layouts tab and add a Two columns layout.

3. Click on Column 2 in the content tree and set its layout as follows:

   • Direction: Row

   • Align items: Center

   • Justify content: Flex-end

4. Now add a Stylized text component inside Column 2 and choose None for the presets.

5. Set the properties as follows:

   • Text: Sort:

   • HTML Tag: H3

6. Now add a Dropdown component after the Heading component in Column 2 and choose None for the preset.

7. Scroll down to the List items property in the config panel, mouse over it, and click Edit.

8. In the modal that appears with the JSON editor, you'll delete all but two of the six List Items by clicking on the trashcan icon for each of the first four.

9. For the two remaining, set the following values

   1. List item 1

      • Id: sys_created_on

      • Label: Created

   2. List item 1

      • Id: sys_updated_on

      • Label: Updated

10. Click Apply and the List items property should look like this: You can also edit the JSON directly by switching from form to JSON in the JSON editor modal.

11. Now scroll down to the Selected items property (two below the List items prop) and switch to dynamic data binding.

12. Add Client states > sortField.

13. Double click into sortField so it shows @state.sortField and add square brackets on each side (this property is expecting an array of values) and choose Apply.

14. Click into the Styles tab and add L left and right margins.

15. Now click into the Events tab and add an event mapping for Dropdown selected items set.

16. Choose Update client state parameter.

17. For this step, you'll use a script as it's a little easier than using a formula. You'll need the first element in the array returned by the event payload. Change the Mode from Form to Script at the top right on the dialog.

    

18. Most of the script is already provided so you'll just need to provide the propName and value as follows:

    /**
    * @param {params} params
    * @param {api} params.api
    * @param {any} params.event
    */
    function evaluateEvent({api, event}) {
        return {
            propName: "sortField",
            value: event.payload.value[0]
        };
    }

19. Click Add.

20. Now you'll add another dropdown to control the order. Right-click on the dropdown component and choose Duplicate.

21. Click into Dropdown 2 in the content tree.

22. Click Edit on the List items property, change the two items to the following and click Apply:

    1. List item 1

       • Id: desc

       • Label: Descending

    2. List item 1

       • Id: asc

       • Label: Ascending

23. Click into the Selected items field by clicking the data binding icon, double-click into the value, change sortField to sortOrder, and choose Apply.

24. Set the margins to 0 for this dropdown in its Styles tab as the previous dropdown handles the spacing.

25. Next click into the Events tab, click Update client state parameter, change propName to sortOrder in the code and choose Apply.

    

26. Lastly, to make the spacing work in the column layout, you need something in column 1. Add another stylized text component in Column 1 (the one before Column 2), choose None for the preset, and set the following values:

    • Text: Click a note to view edit it

    • HTML Tag: H3

27. Save the page and test it. For most of the notes the created and updated dates are the same so try changing the order from Descending to Ascending.