Problem Name: UI Builder Donut Chart – Grouping and Drilldown Issues 🍩📊
General Solution Proposal:
To effectively utilize the Donut chart in ServiceNow's UI Builder, ensure that the Data Visualization component is correctly configured with appropriate grouping fields and data sources. For enabling drilldown functionality, set up event handlers that pass the selected segment's data to a detailed view, facilitating interactive data exploration.
Detailed Step-by-Step Solution:
Configure the Data Source:
Navigate to UI Builder.
Select or create the page where the Donut chart will reside.
Add a Data Visualization component to the page.
In the component's properties, choose the Donut chart type.
Select the appropriate Data Source (e.g., a table or a predefined data source) that contains the data you wish to visualize.
Set Up Grouping:
Within the Data Visualization component settings, specify the Group By field. This field determines how the data is segmented in the Donut chart (e.g., grouping incidents by priority).
Ensure that the selected field is suitable for grouping and contains categorical data.
Enable Drilldown Functionality:
Still within the Data Visualization component, locate the Events section.
Add a new event handler for the Visualization Clicked event.
Configure the event to navigate to a detailed view or another page, passing relevant parameters such as the selected group's value.
Use the payload to pass dynamic query parameters to the target page, enabling it to display filtered data based on the selected segment.
Create the Detailed View:
Design a new page or component that will serve as the detailed view.
Configure it to accept parameters (e.g., via the page's context or properties).
Set up the data source for this page to use the passed parameters to filter and display the relevant records.
Test the Configuration:
Preview the UI Builder page.
Interact with the Donut chart by clicking on different segments.
Verify that the navigation occurs correctly and that the detailed view displays data filtered according to the selected segment.
Example Solution:
In a Service Operations Workspace, you have a Donut chart displaying the count of incidents grouped by priority. Clicking on a segment representing "High" priority should navigate to a list view showing all incidents with high priority.
Data Source: Incident table.
Group By Field: Priority.
Drilldown: Configured via the Visualization Clicked event to pass the selected priority as a parameter to the detailed list view.
Testing the Solution:
Access the page containing the Donut chart.
Click on a segment (e.g., "High" priority).
Confirm that the application navigates to the detailed list view.
Verify that the list displays only incidents with the selected priority.
Sources:
ServiceNow Community - UI Builder Data Visualization Question:
ServiceNow Documentation - Donut Visualization Example:
ServiceNow Documentation - Create a Pie, Donut, or Semi-Donut Visualization:
If you need further assistance or have specific requirements, feel free to ask! 😊
