Filter records by priority with a flyout menu

Configure a flyout menu that filters a task record list based on priority selections.

始める前に

Role required: admin

This procedure uses UI Builder components to create dynamic, interactive layouts. For more information on how to configure components, see:

• Add and configure components
• UI Builder Quick Bits: Navigating Component Configuration

表 : 1. Components used in this procedure

Component	Documentation links
Flyout menu	Usage Guidelines UIB Setup
Record list	Usage Guidelines

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Create a page from scratch.
   For more information about how to create a page, see Create a page in UI Builder.
4. Select Add content on the stage or in the content tree to open the toolbox, then add a Record list component to the page.
5. In the Data and scripts panel, select the List Controller data resource that was auto-created with the Record list component.
   1. Set Table to Task.
   2. Set Record count limit to 25.
   3. Under Returned fields, add the fields you want to display in the list (for this example, add Number, Short description, Priority, and State).
6. In the Data and scripts panel, select Client state parameters and then select Add.
7. Configure the client state parameter:
   1. Set Name to priorityFilter.
   2. Set Type to JSON.
   3. Set Initial value to ["1","2","3","4","5"] so all task records display on page load.
8. Select the List Controller data resource again, then select Edit fixed filter.
9. Configure the filter condition:
   1. Set the first field to Priority.
   2. Set the operator to is one of.
   3. Hover over the third field and select the bind data icon .
   4. In the data binding modal, select Client states, then double-click or drag the priorityFilter pill to move it to the area above.
   5. Select Apply to confirm the binding.
   6. Select Apply to save the condition.
10. Add and configure a Flyout menu component.
    1. In the content tree, hover over Record list and select the Configure icon .
    2. Select Add before.
    3. Search for Flyout menu, select it from the toolbox and then select Add.
    4. In the configuration panel, hover over List items, then select Edit.
    5. Set the Mode to JSON and replace the existing code with the following array:

       [
         {"id": "1", "label": "1 - Critical"},
         {"id": "2", "label": "2 - High"},
         {"id": "3", "label": "3 - Moderate"},
         {"id": "4", "label": "4 - Low"},
         {"id": "5", "label": "5 - Planning"}
       ]
       

    6. Select Apply.
11. In the content tree, locate the trigger slot under Flyout menu and select Add content.
12. Add a button from the toolbox.
    This button will open the flyout menu.
13. Configure the flyout menu to update the list and refresh the data resource when the user selects an item.
    1. In the configuration panel, select the Events tab.
    2. Under Flyout menu selected items set, select Add handler.
    3. Select the Set client state parameter handler, then select Continue.
    4. Set the following properties:

       Field	Action
       Client State Parameter Name	Select priorityFilter from the list.
       Value to use after triggering event	Hover over the field and select the bind data icon . Select Data types, then Event payload. Under Pill view, double-click or drag the value pill to move it to the area above. Select Apply to confirm the binding. Select Add.

    5. In the Events tab in the configuration panel, select Add handler underneath the event we added in the previous step.
    6. Locate Incident lookup (1), select the REFRESH handler, then select Continue.
       
    7. Select Add.
    8. Select Save.
14. Preview and test the page.