Add a drilldown event to a data visualization on a technical dashboard
Technical dashboards do not support preconfigured destinations for drilling down from a data visualization. If you want a viewer to open a more detailed view of the data when they interact with a visualization, configure a custom drilldown event.
Before you begin
This procedure assumes that you have already created a technical dashboard and populated it with a data visualization component.
Warning: This procedure does not apply to Saved Visualization components.
Role required: ui_builder_admin, rights to edit a technical dashboard
Procedure
-
Navigate to All > Platform Analytics > Library > Dashboards.
-
Locate and open the desired technical dashboard.
-
Select Edit in UI Builder.
-
In the UI Builder, select the desired data visualization in the dashboard.
-
In the configuration panel for the data visualization, open the Events tab.
-
If your only option is to add an event mapping, do so.
[Omitted image "add-event-mapping.png"] Alt text: Making a data visualization component interactive.
-
Select Add event mapping.
-
In the list of events, select Visualization Clicked.
[Omitted image "visualization-clicked.png"] Alt text: Selecting the Visualization Clicked event.
-
Select Continue.
-
-
If the Visualization Clicked event is already listed on the Events tab, select Add handler for it.
[Omitted image "techdash-add-handler.png"] Alt text: Adding a handler to the Visualization Clicked event.
-
Search for and select the Advanced dashboards - Redirect event handler and Continue.
[Omitted image "db-adv-db-redirect.png"] Alt text: Selecting the Advanced dashboards - Redirect event handler.
-
Configure the event handler as follows.
Field JSON types Description Context object, with a string property named path The path of the experience where the destination page resides. Route none The route name of the destination page. Route fields object, with all parameters as strings Required parameters for the destination page. Optional parameters Optional parameters for the destination page. The required and optional parameters for common targets follows:
Target Route fields (required parameters) Optional parameters List {table:@payload.params.table} {query:@payload.params.query} Record {table: @payload.params.table, sysId: @payload.parms.row.sys_id.value} None KPI Details {uuid:@payload.params.indicatorSysid} None -
Select Add.
Drilldown for a table data source
You have a vertical data visualization that shows the number of records on the Incident [incident] table grouped by Priority. When a viewer interacts with this visualization, you want it to open a list of Incident records in the Platform Analytics experience.
Note: This example uses the Context of the Platform Analytics experience and default Route names to components therein.
-
You follow Steps 1-8 in the general procedure, so you now have the configuration open for the Advanced dashboards - Redirect event handler for your vertical bar visualization.
-
In the Context field, you select Edit.
[Omitted image "db-adv-db-ex-edit-context.png"] Alt text: The Edit control in the Context field.
-
In the editing dialog, you select the object JSON type.
[Omitted image "db-adv-db-ex-json-object.png"] Alt text: Selecting the object JSON type for the Context.
-
You select Add property and enter
pathas the property name andnow/platform-analytics-workspaceas the property value. These values specify that the viewer drills down to the Platform Analytics experience.[Omitted image "db-adv-db-ex-context-value-table.png"] Alt text: Setting the value of the Context.
-
You select Apply and move on to the next field.
-
In the Route field, you enter
simplelist. This route leads to the simplelist page in the Platform Analytics experience. -
For the Route fields, you first choose to bind data. [Omitted image "bind-data.png"] Alt text: Selecting to bind data.
-
Then you add the property
{table: @payload.params.table}to the field. This property passes the name of the table in your visualization to the simplelist page of the Platform Analytics experience.-
You select the Event payload property
paramsand thentable.[Omitted image "db-tech-adv-redirect-table-param.png"] Alt text: Selecting the payload.params.table property in the data binding editor.
-
You double-click, drag and drop, or select the arrow to add the property to the upper area of the editor.
-
Double-click on the property in the upper area of the editor to open it for editing.
[Omitted image "db-adv-event-edit-prop.gif"] Alt text: Double-clicking the property pill to open it for editing.
-
You surround the
@payload.params.tableproperty with curly brackets and add thetable:property.[Omitted image "db-tech-event-complete-parm.gif"] Alt text: Completing the table property.
-
You select Apply.
-
-
Similarly, you choose to bind data for the Optional parameters field and set the value
{query:@payload.params.concatenatedQuery}.
The properties of your Advanced dashboards - Redirect event handler now appear as follows:
| Field | Value |
|---|---|
| Context | {path:now/platform-analytics-workspace} |
| Route | simplelist |
| Route fields | {table:@payload.params.table} |
| Optional parameters | {query:@payload.params.query} |
In runtime, a user can interact with the visualization to open a list of Incident records.
[Omitted image "db-adv-ex-ddown-table.gif"] Alt text: Opening a list of Incident records by clicking a Single Score visualization on a technical dashboard.
Drilldown for an indicator data source
You have a Line data visualization for the indicator Number of open incidents. When a viewer interacts with this visualization, you want it to open the KPI Details page for that indicator.
-
You repeat steps 1-5 from the Table data source example, because in this case too you are drilling down to a page on the Platform Analytics experience.
-
For the Route, you enter
ac_kpi_details. -
For the Route fields, you first choose to bind data [Omitted image "bind-data.png"] Alt text: Selecting to bind data.. Then you enter
{uuid: @payload.params.indicatorSysid}. This parameter passes the id of the indicator, in this case Number of open incidents, to the Platform Analytics experience KPI Details page.Tip: First use autocomplete to add the data parameter
@payload.params.indicatorSysid, then surround that parameter with curly brackets and adduuid:.The properties of your Advanced dashboards - Redirect event handler now appear as follows:
Field Value Context {"path":"now/platform-analytics-workspace"} Route ac_kpi_details Route fields {uuid:@payload.params.indicatorSysid} -
No other parameters are necessary, so you select Add and then Save the UI Builder page.
In runtime, a viewer can interact with the visualization to open KPI Details for the Number of open incidents indicator.
[Omitted image "db-adv-ex-ddown-indicator.gif"] Alt text: Opening KPI Details by clicking a Line visualization on a technical dashboard.
Parent Topic:Technical dashboards
Related topics
---
title: Add a drilldown event to a data visualization on a technical dashboard
description: Technical dashboards do not support preconfigured destinations for drilling down from a data visualization. If you want a viewer to open a more detailed view of the data when they interact with a visualization, configure a custom drilldown event.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/now-intelligence/add-custom-drilldown-event.html
release: brazil
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 5
keywords: [Add a drilldown event to a data visualization in UI Builder, Add a drilldown event to a report in UI Builder]
breadcrumb: [Technical dashboards, Dashboards, Platform Analytics experience, Platform Analytics]
---
# Add a drilldown event to a data visualization on a technical dashboard
Technical dashboards do not support preconfigured destinations for drilling down from a data visualization. If you want a viewer to open a more detailed view of the data when they interact with a visualization, configure a custom drilldown event.
## Before you begin
This procedure assumes that you have already created a technical dashboard and populated it with a data visualization component.
**Warning:** This procedure does not apply to Saved Visualization components.
Role required: ui\_builder\_admin, rights to edit a technical dashboard
## Procedure
1. Navigate to **All** > **Platform Analytics** > **Library** > **Dashboards**.
2. Locate and open the desired technical dashboard.
3. Select **Edit in UI Builder**.
4. In the UI Builder, select the desired data visualization in the dashboard.
5. In the configuration panel for the data visualization, open the **Events** tab.
6. If your only option is to add an event mapping, do so.
\[Omitted image "add-event-mapping.png"\] Alt text: Making a data visualization component interactive.
1. Select **Add event mapping**.
2. In the list of events, select **Visualization Clicked**.
\[Omitted image "visualization-clicked.png"\] Alt text: Selecting the Visualization Clicked event.
3. Select **Continue**.
7. If the **Visualization Clicked** event is already listed on the Events tab, select **Add handler** for it.
\[Omitted image "techdash-add-handler.png"\] Alt text: Adding a handler to the Visualization Clicked event.
8. Search for and select the **Advanced dashboards - Redirect** event handler and **Continue**.
\[Omitted image "db-adv-db-redirect.png"\] Alt text: Selecting the Advanced dashboards - Redirect event handler.
9. Configure the event handler as follows.
|Field|JSON types|Description|
|-----|----------|-----------|
|Context|object, with a string property named path|The path of the experience where the destination page resides.|
|Route|none|The route name of the destination page.|
|Route fields|object, with all parameters as strings|Required parameters for the destination page.|
|Optional parameters| |Optional parameters for the destination page.|
The required and optional parameters for common targets follows:
|Target|Route fields \(required parameters\)|Optional parameters|
|------|------------------------------------|-------------------|
|List|\{table:@payload.params.table\}|\{query:@payload.params.query\}|
|Record|\{table: @payload.params.table, sysId: @payload.parms.row.sys\_id.value\}|None|
|KPI Details|\{uuid:@payload.params.indicatorSysid\}|None|
10. Select **Add**.
## Drilldown for a table data source
You have a vertical data visualization that shows the number of records on the Incident \[incident\] table grouped by Priority. When a viewer interacts with this visualization, you want it to open a list of Incident records in the Platform Analytics experience.
**Note:** This example uses the Context of the Platform Analytics experience and default Route names to components therein.
1. You follow Steps 1-8 in the general procedure, so you now have the configuration open for the Advanced dashboards - Redirect event handler for your vertical bar visualization.
2. In the Context field, you select **Edit**.
\[Omitted image "db-adv-db-ex-edit-context.png"\] Alt text: The Edit control in the Context field.
3. In the editing dialog, you select the object JSON type.
\[Omitted image "db-adv-db-ex-json-object.png"\] Alt text: Selecting the object JSON type for the Context.
4. You select **Add property** and enter `path` as the property name and `now/platform-analytics-workspace` as the property value. These values specify that the viewer drills down to the Platform Analytics experience.
\[Omitted image "db-adv-db-ex-context-value-table.png"\] Alt text: Setting the value of the Context.
5. You select **Apply** and move on to the next field.
6. In the Route field, you enter `simplelist`. This route leads to the simplelist page in the Platform Analytics experience.
7. For the Route fields, you first choose to bind data. \[Omitted image "bind-data.png"\] Alt text: Selecting to bind data.
8. Then you add the property `{table: @payload.params.table}` to the field. This property passes the name of the table in your visualization to the simplelist page of the Platform Analytics experience.
1. You select the Event payload property `params` and then `table`.
\[Omitted image "db-tech-adv-redirect-table-param.png"\] Alt text: Selecting the payload.params.table property in the data binding editor.
2. You double-click, drag and drop, or select the arrow to add the property to the upper area of the editor.
3. Double-click on the property in the upper area of the editor to open it for editing.
\[Omitted image "db-adv-event-edit-prop.gif"\] Alt text: Double-clicking the property pill to open it for editing.
4. You surround the `@payload.params.table` property with curly brackets and add the `table:` property.
\[Omitted image "db-tech-event-complete-parm.gif"\] Alt text: Completing the table property.
5. You select **Apply**.
9. Similarly, you choose to bind data for the Optional parameters field and set the value `{query:@payload.params.concatenatedQuery}`.
The properties of your Advanced dashboards - Redirect event handler now appear as follows:
|Field|Value|
|-----|-----|
|Context|\{path:now/platform-analytics-workspace\}|
|Route|simplelist|
|Route fields|\{table:@payload.params.table\}|
|Optional parameters|\{query:@payload.params.query\}|
In runtime, a user can interact with the visualization to open a list of Incident records.
\[Omitted image "db-adv-ex-ddown-table.gif"\] Alt text: Opening a list of Incident records by clicking a Single Score visualization on a technical dashboard.
## Drilldown for an indicator data source
You have a Line data visualization for the indicator Number of open incidents. When a viewer interacts with this visualization, you want it to open the KPI Details page for that indicator.
1. You repeat steps 1-5 from the Table data source example, because in this case too you are drilling down to a page on the Platform Analytics experience.
2. For the Route, you enter `ac_kpi_details`.
3. For the Route fields, you first choose to bind data \[Omitted image "bind-data.png"\] Alt text: Selecting to bind data.. Then you enter `{uuid: @payload.params.indicatorSysid}`. This parameter passes the id of the indicator, in this case Number of open incidents, to the Platform Analytics experience KPI Details page.
**Tip:** First use autocomplete to add the data parameter `@payload.params.indicatorSysid`, then surround that parameter with curly brackets and add `uuid:`.
The properties of your Advanced dashboards - Redirect event handler now appear as follows:
|Field|Value|
|-----|-----|
|Context|\{"path":"now/platform-analytics-workspace"\}|
|Route|ac\_kpi\_details|
|Route fields|\{uuid:@payload.params.indicatorSysid\}|
4. No other parameters are necessary, so you select **Add** and then **Save** the UI Builder page.
In runtime, a viewer can interact with the visualization to open KPI Details for the Number of open incidents indicator.
\[Omitted image "db-adv-ex-ddown-indicator.gif"\] Alt text: Opening KPI Details by clicking a Line visualization on a technical dashboard.
**Parent Topic:**[Technical dashboards](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/brazil/markdown/now-intelligence/technical-dashboards.md)
**Related topics**
[More examples and information are available in KB2663434](https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB2663434)
| title | Add a drilldown event to a data visualization on a technical dashboard |
| description | Technical dashboards do not support preconfigured destinations for drilling down from a data visualization. If you want a viewer to open a more detailed view of the data when they interact with a visualization, configure a custom drilldown event. |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/now-intelligence/add-custom-drilldown-event.html |
| release | brazil |
| topic_type | task |
| last_updated | 2026-09-10 |
| reading_time_minutes | 5 |
| keywords | Add a drilldown event to a data visualization in UI BuilderAdd a drilldown event to a report in UI Builder |
| breadcrumb | Technical dashboardsDashboardsPlatform Analytics experiencePlatform Analytics |