link two components of UI Builder

[DevYadav]

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

[SasiChanthati]

When a user is selected from the Typeahead: You want to show a score visualization (like number of incidents assigned to that user).

 

Solution:

Set Up Your Typeahead Component

• This component should return a user sys_id when selected.

• Store this sys_id in a page state variable (e.g., selectedUserId).

• On the Typeahead onChange event → Use "Set Value" → Set selectedUserId = $event.item.sys_id

Create a Data Resource (User-Specific)

Create a data resource that pulls records (e.g., Incidents) where Assigned to = selectedUserId.

Option A: If using a Record-based data resource:

• Source table: incident

• Filter: assigned_to is {{state.selectedUserId}}

• Be sure the filter dynamically references the page state.

If using a Scripted REST or Data Broker:

• Pass selectedUserId as an input.

• Return the count or details of the user's incidents.

Bind the Data Resource to a Score Visualization

• Add a Score/Metric visualization component to the page.

• Set the data source to the one you just created.

• Bind the metric (e.g., incident count) from the response.

•  Example:  Display total number of incidents:

  • Use {{data.incidentData.length}} (if returning incident list)

  • Or use {{data.incidentData.result.count}} if using an aggregate/scripted source

Test the Behavior

• Type a user into the search bar.

• Select them → State variable updates → Data resource refetches → Score component updates automatically.

[DevYadav]

@SasiChanthati thanks for your solution, but can you provide me some screenshots please that will be great for me and for all future developers as well.
actually i followed this link to create the solution
https://www.servicenow.com/community/now-platform-blog/how-to-setup-a-type-ahead-search-in-ui-builde...

[Udayrathore049]

1.  Typeahead Component

• Data Source: sys_user

• Selected Record Output: Bind it to a Page State (e.g., selectedUser)

• Binding Setup:

  • Go to State in your page

  • Add a new state variable:
    selectedUser → Type: Object

---

2.  Add a Data Resource

• Type: Aggregate

• Table: incident

• Condition:
  assigned_to = ${state.selectedUser.sys_id}

• Aggregate Function: COUNT
  (You can also add GROUP BY or other metrics if needed)

• Set the Data Resource to:

  • Fetch on load:  No

  • Auto-fetch on state change:  Yes → on selectedUser

---

3. Add Score Visualization (Scorecard / Chart)

• Data Source: Bind to the above Data Resource

• Value Field: count or metric result

• Label: Use static (like "Assigned Incidents") or dynamic if needed

---

4.  Wiring It All Up (Recap)

• Typeahead → Updates selectedUser (page state)

• selectedUser.sys_id → Triggers Data Resource fetch

• Data Resource → Feeds your Scorecard

---

 Optional Enhancements

• Add more scorecards:
  e.g., Resolved incidents → assigned_to = selectedUser AND state = Resolved

• Add a condition to handle empty selection (e.g., show "Select a user")

• Use Script Data Resource for more complex logic or combined metrics

[DevYadav]

@Udayrathore049  thanks for your solution, but can you provide me some screenshots please that will be great for me and for all future developers as well.
actually i followed this link to create the solution
https://www.servicenow.com/community/now-platform-blog/how-to-setup-a-type-ahead-search-in-ui-builde...