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

Table 1. Components used in this procedure

Component	Documentation links
Card Base Container	Usage Guidelines UIB Setup
Dropdown	Usage Guidelines UIB Setup
Heading	Usage Guidelines UIB Setup
Highlighted value	Usage Guidelines UIB Setup
Label value	Usage Guidelines UIB Setup
Stylized text	Usage Guidelines UIB Setup

Procedure

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 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. 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	Select + Add. Enter Caller, select it to add it to the Selected column, then clear the search box. Repeat the above step for Priority and Short description. Select Apply.
      Max results	Enter 25.

      

   7. Select the X in the upper right to close the dialog.
   8. Select Save.
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.
      
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.

   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.

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

      Field	Value
      Type	Grid
      Columns	4
      Gap	S

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

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

      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

      

   3. Select Save.
9. 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.
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.

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

       Field	Action
       Table	Enter User (sys_user) and then select it from the list.
       Return fields	Select + Add. Enter Name, then select it from the list to add it to the Selected column. 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.
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:

       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: Hover over the field and select the bind data icon . In the data binding modal, select the Use script icon . Replace the existing code with the following: Tip: 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; } Select Apply.
       Styles	Width: Enter 200.
       Styles	Padding: Select Padding, then choose M from the list.

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:

       Field	Action
       Client State Parameter Name	Select selected_caller from the list.
       Value to use after triggering event	Hover over the field and select the bind data icon . Select Data types, then Event payload. Under Pill view, double-click or drag the value pill to move it to the area above. Select Apply to confirm the binding. 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.
       
    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.

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

       Field	Action
       table	Enter incident
       sysId	Hover over the sysId field and select the bind data icon . Locate Data types on the left and select Repeater. In the Pill view, select value, then _row_data, then double-click uniqueValue. Select Apply.

    8. Select Select.
       
    9. Select the check box to enable the Open in new tab property.
    10. Select Add.
    11. Select Save.
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.
       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.