Create dynamic filtered card displays

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:

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

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:

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.

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

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.

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

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

1. Part 2: Add components and bind data

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

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

    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 `100`px

3.  Select **Save**.

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

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.

6.  Select **Save**.

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

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

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

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

2. 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
        1. Select Apply.

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

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

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

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:

```

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

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

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:

8.  Select **Select**.

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.

Parent Topic:Learn components by example