--- 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 --- # Create dynamic filtered card displays # Create dynamic filtered card displays {#ariaid-title1} * Versão de lançamento: Australia * * Atualizado 12 de mar. de 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 10 min. de leitura Create an interactive card layout to display records, add a dropdown to filter visible cards by name, and configure each card to open the full record in another UI Builder page when selected. ## Antes de Iniciar Role required: ui_builder_admin ## Por Que e Quando Desempenhar Esta Tarefa This example shows how to bind data to components so you can display record information in custom layouts. For example, you can present records as selectable cards rather than in a traditional list view. For this procedure, the data comes from the Incident table. Figura 1. Final layout preview 1. Dropdown: Filters visible cards by caller name. 2. Card Base Container: Holds individual card content and enables click interaction. 3. Heading: Displays the record number. 4. Label value: Displays the caller name with a static label ("Caller: "). 5. Stylized text: Displays the short description of the record. 6. Highlighted value: Displays the record priority level with color styling applied through a script. {#comp-ex-dynamic-filtered-card__ol_wjp_kml_fhc} 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-dynamic-filtered-card__ul_et1_5sg_dhc} {#comp-ex-dynamic-filtered-card__table_exc_zzf_dhc__entry__2} | Component | Documentation links | |-|-| | Card Base Container | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-card?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-card/uib-setup%23properties) {#comp-ex-dynamic-filtered-card__ul_oz4_gjg_dhc} | | Dropdown | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-dropdown?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-dropdown/uib-setup%23properties) {#comp-ex-dynamic-filtered-card__ul_gzd_fmg_dhc} | | Heading | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-heading?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-heading/uib-setup%23properties) {#comp-ex-dynamic-filtered-card__ul_bps_nmg_dhc} | | Highlighted value | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-highlighted-value?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-highlighted-value/uib-setup%23properties) {#comp-ex-dynamic-filtered-card__ul_th5_nmg_dhc} | | Label value | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-label-value-inline?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-label-value-inline/uib-setup%23properties) {#comp-ex-dynamic-filtered-card__ul_gzv_nmg_dhc} | | Stylized text | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-stylized-text?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-stylized-text/uib-setup%23properties) {#comp-ex-dynamic-filtered-card__ul_axx_nmg_dhc} | [Tabela 1. Components used in this procedure] {#comp-ex-dynamic-filtered-card__table_exc_zzf_dhc} ## Procedimento Part 1: Build the card layout Add a repeater linked to a data resource and create the card containers that display each record. 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. Create a data resource to pull records from the Incident table. Data resources expose data from tables and records to the page. In this example, we add a data resource to pull records from the incident table so we can display them using components. For more information, see [Add and configure data resources to a page](https://servicenow-prod.fluidtopics.net/kzBlQRyBSBzp5YGa~Vk7Gg "Add data resources to dynamically expose data from tables, records, or other elements on your page in UI Builder."). 1. In the Data and scripts drawer, under Data resources, select + Add data resource. 2. Select Look up multiple records and then select Add. 3. Select the look_up_multiple_records_1 ID to open the Data resource details form. 4. Replace the text in the Data resource label field with Incident lookup. The Data resource ID field auto-populates. 5. Select Apply. 6. In the Edit Incident lookup dialog, fill in the fields: {#comp-ex-dynamic-filtered-card__table_kvg_n1c_vgc__entry__2} | Field | Action | |-|-| | Table | Enter incident, then select it from the list. | | Return fields | 1. Select + Add. 2. Enter Caller, select it to add it to the Selected column, then clear the search box. 3. Repeat the above step for Priority and Short description. 4. Select Apply. {#comp-ex-dynamic-filtered-card__ol_sbq_jbc_vgc} | | Max results | Enter 25. | [ ] {#comp-ex-dynamic-filtered-card__table_kvg_n1c_vgc} 7. Select the X in the upper right to close the dialog. 8. Select Save. {#comp-ex-dynamic-filtered-card__substeps_z13_b1c_vgc} 5. Add a single column layout to hold the components. 1. In the content tree, under Body, select + Add content. 2. Select Single column and then select + Add. 3. With Column 1 selected in the content tree, navigate to Layout in the configuration panel and set the Direction to Row. {#comp-ex-dynamic-filtered-card__substeps_hn4_4bc_vgc} 6. Add and configure a repeater on your page with data binding. Data binding is the process of associating data exposed by a data resource with a component. In this example, we bind the results of our Incident lookup data resource to the Data array property of the repeater component. For more information, see [Connect data components](https://servicenow-prod.fluidtopics.net/fWyp~3mL5itTKkz3CLY8DQ "Use the data binding modal to associate data exposed by local data resources to components on your UI Builder page."). 1. In the content tree, under Column 1, select + Add content. 2. Enter Repeater, then select it in the toolbox and then select Add. 3. Select Cancel to close the preset window. 4. Keeping Repeater 1 selected, in the configuration panel, hover over the Data array field and select the bind data icon ![](). 5. In the Bind data to Data array dialog, under Data types, select Data resource. 6. Select the Incident lookup pill, then double-click or drag the results pill to move it to the area above. Figura 2. Bind data to Data array 7. Select Apply to confirm the binding. 8. In the configuration panel, select the Styles tab, select Enable styles, then fill in the fields: {#comp-ex-dynamic-filtered-card__table_rxl_kdc_vgc__entry__2} | Field | Value | |-|-| | Type | Grid | | Columns | 4 | | Gap | S | [ ] {#comp-ex-dynamic-filtered-card__table_rxl_kdc_vgc} 9. Select Save. {#comp-ex-dynamic-filtered-card__substeps_bwh_zbc_vgc} 7. Create the card display. 1. In the content tree, under Repeater 1, select + Add content. 2. Enter Card Base Container, select the component, then select + Add. 3. In the configuration panel, select the Configure tab and set the Interaction to Click. 4. In the configuration panel, select the Styles tab and set the Width to 300px. 5. Set the Height to 200px. {#comp-ex-dynamic-filtered-card__substeps_sm5_tdc_vgc} Part 2: Add components and bind data Add components to each card and configure them to display record details by binding the appropriate fields. 8. Add components to the card base container. 1. In the content tree, under Card Base Container 1, select + Add content. 2. Add the following components in the order listed below and edit each in the configuration panel: Dica: To keep all components nested in Card Base Container, add the first component, then use Add after from the configure icon ![]() for each one that follows. If a preset window appears, select Cancel to close it. 1. Heading: No initial configuration required 2. Label value: In the Configure tab, in the Label field, enter Caller: 3. Stylized text: In the Configure tab, set the HTML tag to Paragraph 4. Highlighted value: In the Styles tab, set the Width to 100px {#comp-ex-dynamic-filtered-card__ol_v1g_jhc_vgc} 3. Select Save. {#comp-ex-dynamic-filtered-card__substeps_n2w_qgc_vgc} 9. Bind data from the incident records to the components we added in the previous step. {#comp-ex-dynamic-filtered-card__table_rp2_jjc_vgc__entry__3} | Component | Field | Path | |-|-|-| | Heading | Label | `value > number > displayValue` | | Label value | Value | `value > caller_id > displayValue` | | Stylized text | Text | `value > short_description > displayValue` | | Highlighted value | Label | `value > priority > displayValue` | [ ] {#comp-ex-dynamic-filtered-card__table_rp2_jjc_vgc} 1. In the content tree, select the component listed in the table. 2. In the configuration panel, on the Configure tab, hover over the specified field and select the bind data icon ![](). 3. In the data binding modal: * On the left, select Repeater under Data types. * On the right, under Pill view, follow the path listed in the table by selecting each pill in order (for example, for Heading, select value, then number, then displayValue). {#comp-ex-dynamic-filtered-card__ul_q2g_mny_chc} 4. When you reach the final pill (displayValue), double-click or drag it to move it to the area above, then select Apply. 5. Repeat the process for each row in the table. 6. Select Save. {#comp-ex-dynamic-filtered-card__substeps_y1h_r3c_vgc} 10. Use a script to define the color of the priority for each record. 1. In the content tree, select Highlighted value 1. 2. In the configuration panel, on the Configure tab, hover over Color and select the bind data icon ![](). 3. Select the Use script icon ![]() in the upper right. 4. Replace the existing code with the following: function getPriorityColor(record) { let priority = record.api.item.value.priority.value; switch (priority) { case '1': return 'critical'; case '2': return 'high'; case '3': return 'moderate'; case '4': return 'low'; case '5': return 'gray'; default: return 'gray'; } } 5. Select Apply. {#comp-ex-dynamic-filtered-card__substeps_c4t_rlc_vgc} Verify that the highlighted value changes color depending on the priority of the record. Part 3: Add filtering with dropdown Configure a dropdown event to update a client state parameter and refresh the data resource, filtering the card display. 11. Create a client state parameter to track user selections. The client state parameter can be modified by components when they trigger events. For more information, see [Client state parameters](https://servicenow-prod.fluidtopics.net/WeCHsJimrihe7LXesMBb9Q "Use client state parameters to bind values to component configurations. When the client state parameter's value changes, the component updates to use the new value."). 1. In the Data and scripts drawer, next to Client state parameters, select the + icon. 2. In the Edit client state parameters dialog, fill out the fields: * Name: selected_caller * Type: String * Initial value: empty {#comp-ex-dynamic-filtered-card__ul_tgf_ppc_vgc} 3. Select Apply. {#comp-ex-dynamic-filtered-card__substeps_cvb_gpc_vgc} 12. Edit the data resource to use the client state parameter as a conditional value. 1. In the Data and scripts drawer, select the Incident lookup data resource. 2. Select Edit conditions. 3. In the Conditions dialog, enter Caller in the first field and select it from the list. 4. Leave the second field as is. 5. Hover over the third field and select the bind data icon ![](). 6. In the data binding modal, select Client states, then double-click or drag the `selected_caller` pill to move it to the area above. 7. Select Apply to confirm the binding. 8. Select Apply to save the condition. 9. Select the X in the upper right to close the Incident lookup dialog. {#comp-ex-dynamic-filtered-card__substeps_i2b_5pc_vgc} 13. Create a second data resource to query users from the user table. 1. In the Data and scripts drawer, select the +, then select Data resource. 2. Select Look up multiple records and then select Add. 3. Select the look_up_multiple_records_1 ID to open the Data resource details form. 4. Replace the text in the Data resource label field with sys_user_lookup. The Data resource ID field auto-populates. 5. Select Apply. 6. In the Edit sys_user_lookup dialog, fill in the fields: {#comp-ex-dynamic-filtered-card__table_hgn_d3t_wgc__entry__2} | Field | Action | |-|-| | Table | Enter User (sys_user) and then select it from the list. | | Return fields | 1. Select + Add. 2. Enter Name, then select it from the list to add it to the Selected column. 3. Select Apply. {#comp-ex-dynamic-filtered-card__ol_ign_d3t_wgc} | | Order by | Enter Name, then select it from the list. | | Max results | Enter 250. | [ ] {#comp-ex-dynamic-filtered-card__table_hgn_d3t_wgc} 7. Select the X in the upper right to close the dialog. 8. Select Save. {#comp-ex-dynamic-filtered-card__substeps_dmk_xht_wgc} This data resource looks up users from the user table. We will reference this data to populate the dropdown in the next step. 14. Add and configure a dropdown component. 1. In the content tree, hover over Column layout 1 and select the Configure icon ![](). 2. Select Add before. 3. Search for Dropdown, select it from the toolbox and then select Add. 4. In the configuration panel, navigate to the specified tab and configure the following fields: {#comp-ex-dynamic-filtered-card__table_bn3_crc_vgc__entry__2} | Tab | Action | |-|-| | Configure | In the Placeholder text field: Enter Select a caller. | | Configure | In the Variant field: Select Primary. | | Configure | In the List items field: 1. Hover over the field and select the bind data icon ![](). 2. In the data binding modal, select the Use script icon ![](). 3. Replace the existing code with the following: Dica: You can select the format code icon ![]() to make the code more readable. function evaluateProperty({ api, helpers }) { const userArray = api.data.sys_user_lookup.results; let outputArray = []; for (let i = 0; i < userArray.length; i++) { const obj = { 'id': `${userArray[i]._row_data.uniqueValue}`, 'label': `${userArray[i].name.displayValue}` }; outputArray.push(obj); } return outputArray; } 4. Select Apply. {#comp-ex-dynamic-filtered-card__ol_hny_3sc_vgc} | | Styles | Width: Enter 200. | | Styles | Padding: Select Padding, then choose M from the list. | [ ] {#comp-ex-dynamic-filtered-card__table_bn3_crc_vgc} {#comp-ex-dynamic-filtered-card__substeps_nrh_wqc_vgc} 15. Configure the dropdown with events so that it can modify the client state parameter we created. 1. With Dropdown 1 selected in the content tree, select the Events tab in the configuration panel, then select Add event mapping. 2. Select the Selected items changed event, then select Continue. 3. Select the Set client state parameter handler, then select Continue. 4. Set the following properties: {#comp-ex-dynamic-filtered-card__table_krr_ftc_vgc__entry__2} | Field | Action | |-|-| | Client State Parameter Name | Select selected_caller 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-dynamic-filtered-card__ol_mv2_htc_vgc} | [ ] {#comp-ex-dynamic-filtered-card__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. {#comp-ex-dynamic-filtered-card__substeps_ipc_5sc_vgc} After configuring the dropdown, selecting a caller updates the `selected_caller` client state parameter and refreshes the data resource to display that caller's records. Part 4: Enable record navigation Configure each card so that selecting it opens the record page using the sys_id from the repeater data. 16. Create another page in your experience that opens the record. 1. Return to the experience view by selecting the name of your experience (for example, "Demo Experience") in the upper left. 2. Select the + next to Pages, then select Create a new page. 3. Hover over the Standard record template and select Use template. 4. Name your page Incident record page and select Continue. 5. Select Looks Good, then select Create. {#comp-ex-dynamic-filtered-card__substeps_c5k_d5c_vgc} 17. Return to your original page by selecting the name of your experience in the upper left, then choosing your page from the experience view. 18. Add an event to the cards so that selecting a card opens its record on the page we created. 1. Select Card Base Container 1 in the content tree. 2. In the configuration panel, select the Events tab, then select Add event mapping. 3. Select the Card clicked event, then select Continue. 4. Select the Open page or URL handler, then select Continue. 5. Select Pages in current experience. 6. Select Incident record page. 7. In the form, fill in the fields: {#comp-ex-dynamic-filtered-card__table_sks_4wc_vgc__entry__2} | Field | Action | |-|-| | table | Enter incident | | sysId | 1. Hover over the sysId field and select the bind data icon ![](). 2. Locate Data types on the left and select Repeater. 3. In the Pill view, select value, then _row_data, then double-click uniqueValue. 4. Select Apply. {#comp-ex-dynamic-filtered-card__ol_nsc_qwc_vgc} | [ ] {#comp-ex-dynamic-filtered-card__table_sks_4wc_vgc} 8. Select Select. 9. Select the check box to enable the Open in new tab property. 10. Select Add. 11. Select Save. {#comp-ex-dynamic-filtered-card__substeps_kcy_1wc_vgc} 19. Preview and test the page. 1. Select Preview. 2. In the dropdown, select a user such as "Fred Luddy," "Carol Coughlin," or "Bow Ruggeri" to filter the cards. Nota: Some users do not have related incident records, so selecting those users will result in no cards being displayed. 3. Select a card to view the full record in a new tab. {#comp-ex-dynamic-filtered-card__substeps_wmr_d4t_wgc}