link two ui components

[rah dev]

Hi Community,

Good day!

I have created a searchbar where I'm displaying a list of users in Workspace using UI Builder

Now I need to implement some data visualizations with the following behaviour:
When I select a user from the typeahead component, a score data visualization should display metrics specific to that user. For example, if I select "System Administrator," the visualization should show how many incident records have that user in the "Assigned to" field.

I need to make this data visualization dynamic according to the selected user.

Thanks in advance for your help

actually i followed this link to create the search bar
https://www.servicenow.com/community/now-platform-blog/how-to-setup-a-type-ahead-search-in-ui-builde...

[ivanortiz]

Okay, here is the English translation of the steps you provided:

Key Concept: The idea is to capture the sys_id of the selected user from the search bar, store it in a page state variable, and use that variable to dynamically filter a Data Resource that feeds your visualization.

Detailed Steps:

1. Create a Client State Parameter:

   • In UI Builder, in the left-hand panel, find the "Client state" section.
   • Click "+ Add" to create a new parameter.
   • Name it descriptively, e.g., selectedUserId.
   • Type: String.
   • Initial value: Leave it empty.
   • This parameter will store the sys_id of the user you select.

2. Capture the User Selection from the Typeahead:

   • Select your "typeahead" search component on the UI Builder canvas.
   • Go to the "Events" tab in the right-hand configuration panel.
   • Find the event that fires when an item is selected. It's commonly called Item selected (ITEM_SELECTED), Value set (VALUE_SET), or similar. Click "+ Add a new event handler".
   • For the action, the simplest is to use "Update client state parameter":
     • Client state parameter name: Choose selectedUserId (the one created in step 1).
     • New value: You need to get the sys_id of the selected user from the event payload. Use a binding like @event.payload.sysId or @event.payload.item.sys_id. The exact structure (payload.sysId, payload.item.sys_id, etc.) depends on the specific component and how it emits the event. You can use the "Test event" option or inspect the payload to find the correct path to the sys_id.
   • Alternatively, you can use a short script:
     • Choose "Run client script".
     • In the script, use: api.setState('selectedUserId', event.payload.sysId); (adjust event.payload.sysId as needed).

3. Add the Visualization Component:

   • Drag a suitable visualization component onto your page. A "Single Score" or "Data visualization" component configured as a counter is usually appropriate for displaying a number (like the incident count).

4. Create the Data Resource for the Visualization:

   • Go to the "Data" section in the left-hand panel and click "+ Add".
   • Select a suitable resource type. "Data Set - Aggregate" is ideal for counting records.
     • Label: Give it a descriptive name, e.g., incident_count_for_selected_user.
     • Table: Select the table you want to count, e.g., incident.
     • Aggregate Function: Choose Count.
     • Field: Choose Sys ID (or any field, since you are just counting rows).
   • Apply the Dynamic Filter:
     • In the "Filter" section, add a condition.
     • Field: Choose the field you want to filter by, e.g., Assigned to.
     • Operator: Choose is.
     • Value: Here's the key. Bind the value to the state parameter you created: type or select @STate.selectedUserId. UI Builder will recognize this as a dynamic binding.
   • Save the Data Resource.

5. Connect the Visualization to the Data Resource:

   • Select the "Single Score" component (or the one you added) on the canvas.
   • In the configuration panel ("Config"), find the main property for the value to display (it might be called "Metric", "Primary value", "Data", etc.).
   • Click the dynamic binding icon (</>) and bind this property to the result of your aggregated Data Resource. The path will be something like @Data.incident_count_for_selected_user.output.result or @Data.incident_count_for_selected_user.output.stats.count. Inspect the output object of your Data Resource in the "Data" section to find the correct path to the aggregated value (the number).
   • Configure other visualization properties like the title (e.g., "Assigned Incidents").