Create dynamic filtered card displays

task brazil Updated Sep 10, 2026 12 min read comp-ex-dynamic-filtered-card.md
Raw file servicenow.com

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.

Before you begin

Role required: ui_builder_admin

About this task

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.

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

Component

Documentation links

Card Base Container

Dropdown

Heading

Highlighted value

Label value

Stylized text
## Procedure

  1. Part 1: Build the card layout

    Add a repeater linked to a data resource and create the card containers that display each record.

  2. Navigate to All > Now Experience Framework > UI Builder.

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

  4. Create a page from scratch.

    For more information about how to create a page, see Create a page in UI Builder.

  5. 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.

    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:

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.

[Omitted image "comp-ex-dfc-data-resource-fields.png"] Alt text: Choose fields modal showing Caller, Priority, and Short description.

  1. Select Apply.

Max results

Enter 25.
\[Omitted image "comp-ex-dfc-data-resource.png"\] Alt text: Edit data resource dialog for "Incident lookup" with callouts highlighting the Table, Return fields, and Max results fields. 
7.  Select the **X** in the upper right to close the dialog.

8.  Select **Save**.

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

      [Omitted image "comp-ex-dfc-layout-row.png"] Alt text: Configuration panel for single column layout, with a cursor hovering over the Direction > Row property.

  2. 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.

    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 [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.

      [Omitted image "comp-ex-dfc-bind-data.png"] Alt text: Configurational panel for repeater, with a cursor hovering over 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.

      [Omitted image "comp-ex-dfc-repeater.png"] Alt text: Data binding modal showing the selection of data resource pills to configure the repeater.

    7. Select Apply to confirm the binding.

    8. In the configuration panel, select the Styles tab, select Enable styles, then fill in the fields:

      Field Value
      Type Grid
      Columns 4
      Gap S

    9. Select Save.

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

      [Omitted image "comp-ex-dfc-card-style.png"] Alt text: Configuration panel for Card Base Container, with callouts highlighting the Width and Height fields.

  4. Part 2: Add components and bind data

    Add components to each card and configure them to display record details by binding the appropriate fields.

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

      Tip: To keep all components nested in Card Base Container, add the first component, then use Add after from the configure icon [Omitted image "uib-configure-icon.png"] Alt text: 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 [Omitted image "comp-ex-dfc-cards.png"] Alt text: UI Builder editor with callouts highlighting the Repeater and its nested components in the content tree.

    3. Select Save.

  6. Bind data from the incident records to the components we added in the previous step.

    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

    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 [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.

    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).

    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.

      [Omitted image "comp-ex-dfc-cards2.png"] Alt text: UI Builder editor showing data-bound values on each card.

    6. Select Save.

  7. 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 [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.

    3. Select the Use script icon [Omitted image "uib-use-script-icon.png"] Alt text: in the upper right.

    4. Replace the existing code with the following:

      JavaScript
      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.

    Verify that the highlighted value changes color depending on the priority of the record.

    [Omitted image "comp-ex-dfc-cards3.png"] Alt text: UI Builder editor showing highlighted value in a different color, depending on record priority.

  8. 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.

  9. 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.

    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

    3. Select Apply.

  10. 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.

      [Omitted image "comp-ex-dfc-edit-conditions.png"] Alt text: Edit Incident lookup dialog with a highlight over the Edit conditions button.

    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 [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.

    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.

      [Omitted image "comp-ex-dfc-conditions.png"] Alt text: Conditions modal showing the condition, Caller is selected_caller.

    9. Select the X in the upper right to close the Incident lookup dialog.

  11. 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.

      [Omitted image "comp-ex-dfc-data-resource2.png"] Alt text: Edit data resource dialog with a highlight over the label and ID fields.

    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:

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.

Order by

Enter Name, then select it from the list.

Max results

Enter 250.
7. Select the **X** in the upper right to close the dialog. 
8.  Select **Save**.

This data resource looks up users from the user table. We will reference this data to populate the dropdown in the next step.

  1. Add and configure a dropdown component.

    1. In the content tree, hover over Column layout 1 and select the Configure icon [Omitted image "uib-configure-icon.png"] Alt text:.

    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:

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 [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:. 2. In the data binding modal, select the Use script icon [Omitted image "uib-use-script-icon.png"] Alt text:. 3. Replace the existing code with the following:

Tip: You can select the format code icon [Omitted image "comp-ex-dfc-format-code-icon.png"] Alt text: 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;

} ```

  1. Select Apply.

Styles

Width: Enter 200.

Styles

Padding: Select Padding, then choose M from the list.
18. 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:

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 [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.
  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.
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**.

    \[Omitted image "comp-ex-dfc-dropdown-events.png"\] Alt text: Events modal with the Incident lookup - REFRESH handler selected.

7.  Select **Add**.

8.  Select **Save**.

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.

  1. Part 4: Enable record navigation

    Configure each card so that selecting it opens the record page using the sys_id from the repeater data.

  2. 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.

  3. Return to your original page by selecting the name of your experience in the upper left, then choosing your page from the experience view.

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

Field

Action

table

Enter incident

sysId
  1. Hover over the sysId field and select the bind data icon [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.
  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.
8. Select **Select**. 
    \[Omitted image "comp-ex-dfc-card-events.png"\] Alt text: Select page destination modal.

9.  Select the check box to enable the **Open in new tab** property.

10. Select **Add**.

11. Select **Save**.

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

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

    [Omitted image "comp-ex-dfc-result.png"] Alt text: Preview of UI Builder page showing the card display filtered for a specific user.

Parent Topic:Learn components by example

Keywords UI BuilderUIBComponentsRepeaterHeadingLabel valueStylized textHighlighted valueDropdownCard base containerUse case
Search documentation
Search document titles and file paths on the brazil branch