link two components of UI Builder

DevYadav
Tera Contributor

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.

DevYadav_0-1744742214741.png

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

DevYadav_1-1744742283357.png

 

 

 

Thanks in advance for your help

4 REPLIES 4

SasiChanthati
Giga Guru

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.

@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
Tera Contributor

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

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