---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Filter records by priority with a flyout menu

# Filter records by priority with a flyout menu {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura

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

## Antes de Iniciar

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](https://servicenow-prod.fluidtopics.net/cbYaV7wlkZDBulAnOqnPNA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.")
* [UI Builder Quick Bits: Navigating Component Configuration](https://www.servicenow.com/community/next-experience-blog/ui-builder-quick-bits-navigating-component-configuration/ba-p/3181624)
{#comp-ex-filter-flyout-menu__ul_et1_5sg_dhc}  
{#comp-ex-filter-flyout-menu__table_exc_zzf_dhc__entry__2}

| Component | Documentation links |
|-|-|
| Flyout menu | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-flyout-menu?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-flyout-menu/uib-setup%23properties) {#comp-ex-filter-flyout-menu__ul_ejk_myz_m3c} |
| Record list | [Usage Guidelines](https://horizon.servicenow.com/workspace/components/record-list?release=zurich) |
[Tabela 1. Components used in this procedure]

{#comp-ex-filter-flyout-menu__table_exc_zzf_dhc}

## Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") 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](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
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 <kbd class="ph userinput">25</kbd>.
   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 <kbd class="ph userinput">priorityFilter</kbd>.
   2. Set Type to JSON.
   3. Set Initial value to <kbd class="ph userinput">["1","2","3","4","5"]</kbd> 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:  
       {#comp-ex-filter-flyout-menu__table_krr_ftc_vgc__entry__2}

       | Field | Action |
       |-|-|
       | Client State Parameter Name | Select priorityFilter from the list. |
       | Value to use after triggering event | 1. Hover over the field and select the bind data icon ![](). 2. Select Data types, then Event payload. 3. Under Pill view, double-click or drag the value pill to move it to the area above. 4. Select Apply to confirm the binding. 5. Select Add. {#comp-ex-filter-flyout-menu__ol_mv2_htc_vgc} |
       [ ]

       {#comp-ex-filter-flyout-menu__table_krr_ftc_vgc}
    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.