link two components of UI Builder
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-15-2025 11:38 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-15-2025 11:52 AM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-15-2025 04:39 PM - edited ‎04-15-2025 04:42 PM
@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...
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-15-2025 12:39 PM
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 = ResolvedAdd a condition to handle empty selection (e.g., show "Select a user")
Use Script Data Resource for more complex logic or combined metrics
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-15-2025 04:42 PM
@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...