Filter records by priority with a flyout menu

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

Before you begin

Role required: ui_builder_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

Procedure

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.

1. 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**.

1. In the content tree, locate the trigger slot under Flyout menu and select Add content.

2. Add a button from the toolbox.

   This button will open the flyout menu.

3. 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:

5.  In the **Events** tab in the configuration panel, select **Add handler** underneath the event we added in the previous step.

6.  Locate **List Controller**, select the **REFRESH** handler, then select **Continue**.

7.  Select **Add**.

8.  Select **Save**.

1. Preview and test the page.

Parent Topic:Learn components by example