---
sourceDocument: Xanadu Platform Analytics
sourceDocumentLink: https://www.servicenow.com/docs/r/xanadu/now-intelligence

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu Platform Analytics

ft:clusterId :

    - par

bundleId :

    - par

workflow :

    - Platform


---

# Add a drilldown event to a data visualization

# Add a drilldown event to a data visualization in a technical dashboard {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read

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.

Role required: ui_builder_admin, rights to edit a technical dashboard

## Procedure

1. Navigate to AllPlatform AnalyticsLibraryDashboards.
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. Select + Add event mapping.  
   The Select an event dialog opens.  

7. Select the Visualization Clicked event.  
   A dialog opens with a list of available event handlers.
8. Select the Advanced dashboards - Redirect event handler.  
   The configuration fields for this event handler appear.  

9. Configure the event handler as follows.  
   {#add-custom-drilldown-event__table_zsb_4ht_31c__entry__2}

   | Field | Description |
   |-|-|
   | Context | The path of the experience where the destination page resides. |
   | Route | The route name of the destination page. |
   | Route fields | Required parameters for the destination page. |
   | Optional parameters | Optional parameters for the destination page. |
   [ ]

   {#add-custom-drilldown-event__table_zsb_4ht_31c}
10. Select Add.

## Drilldown for a table data source {#add-custom-drilldown-event__example_enc_xht_31c}

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.

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.  
   ![The Edit control in the Context field.]()  
3. In the editing dialog, you select the object JSON type.  

4. You select Add property and enter <kbd class="ph userinput">path</kbd> as the property name and <kbd class="ph userinput">now/platform-analytics-workspace</kbd> as the property value. These values specify that the viewer drills down to the Platform Analytics experience.  

5. You select Apply and move on to the next field.
6. In the Route field, you enter <kbd class="ph userinput">simplelist</kbd>. This route leads to the simplelist page in the Platform Analytics experience.
7. For the Route fields, you first choose to bind data. ![Selecting to bind data.]()
8. Then you add the property <kbd class="ph userinput">{table: @payload.params.table}</kbd> 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 <kbd class="ph userinput">@payload.params.table</kbd>.  

   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.  

   4. You surround the `@payload.params.table`property with curly brackets and add the <kbd class="ph userinput">table:</kbd> property.  

   5. You select Apply.
   {#add-custom-drilldown-event__ol_bw2_wcb_1dc}
9. Similarly, you choose to bind data for the Optional parameters field and set the values <kbd class="ph userinput">{query: @payload.params.query, listTitle: @payload.title}</kbd>.
   1. In the Optionals Parameters field, add <kbd class="ph userinput">{query: @payload.params.query}</kbd> as you did for <kbd class="ph userinput">{table: @payload.params.table}</kbd>, but do not select Apply.
   2. Select the Add another input (+) button.
   3. Add <kbd class="ph userinput">listTitle: @payload.title</kbd> inside the curly brackets.  

   4. You select Apply.
   {#add-custom-drilldown-event__ol_jrx_yjb_1dc}

{#add-custom-drilldown-event__ol_s1z_l3t_31c}  
The properties of your Advanced dashboards - Redirect event handler now appear as follows: {#add-custom-drilldown-event__table_k45_j4t_31c__entry__2}

| Field | Value |
|-|-|
| Context | {path:now/platform-analytics-workspace} |
| Route | simplelist |
| Route fields | {table:@payload.params.table} |
| Optional parameters | {query:@payload.params.query, listTitle:@payload.title} |
[ ]

{#add-custom-drilldown-event__table_k45_j4t_31c}  
In runtime, a user can interact with the visualization to open a list of Incident records.  

## Drilldown for an indicator data source {#add-custom-drilldown-event__example_qk4_xht_31c}

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 <kbd class="ph userinput">ac_kpi_details</kbd>.
3. For the Route fields, you first choose to bind data ![Selecting to bind data.](). Then you enter <kbd class="ph userinput">{uuid: @payload.params.indicatorSysid}</kbd>. 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 <kbd class="ph userinput">@payload.params.indicatorSysid</kbd>, then surround that parameter with curly brackets and add <kbd class="ph userinput">uuid:</kbd>.  
   The properties of your Advanced dashboards - Redirect event handler now appear as follows: {#add-custom-drilldown-event__table_ncw_fzx_31c__entry__2}

   | Field | Value |
   |-|-|
   | Context | {"path":"now/platform-analytics-workspace"} |
   | Route | ac_kpi_details |
   | Route fields | {uuid:@payload.params.indicatorSysid} |
   [ ]

   {#add-custom-drilldown-event__table_ncw_fzx_31c}
4. No other parameters are necessary, so you select Add and then Save the UI Builder page.

{#add-custom-drilldown-event__ol_ztr_1wx_31c}  
In runtime, a viewer can interact with the visualization to open KPI Details for the Number of open incidents indicator.  

**Related tasks**   

* [Create a technical dashboard in UI Builder](https://www.servicenow.com/docs/kh7K6HSd1o~EuMbfBoRQkg "Follow the Technical Editor option to create a dashboard using UI Builder. In UI Builder, you can use a wider range of features than the inline editor, including scripting and data binding.")
* [Configure an event handler for a Filter component](https://www.servicenow.com/docs/YcSy5Ll8pBkxYPTQTrAdMg "On a technical dashboard, configure a special client script-based event handler for a Filter component so it can be followed by any Lists or Data Visualizations. It is not necessary to configure an event handler for filters on inline dashboards.")
* [Use a local data instance with a data visualization](https://www.servicenow.com/docs/mAzftPtXzyvdwJ1wxcMBaw#dv-local-data-instance "For finer grained control of the data source than you have with preconfigured data sources, create a local data instance. Then bind the local data instance to the dataPassthrough property of the data visualization.")  
**Related reference**   

* [Technical dashboards compared to inline dashboards](https://www.servicenow.com/docs/7XX4XxiQuX4uZe2Y6TUdTA "The inline editor produces dashboard components with events and page properties preconfigured. The technical editor allows for a full range of UIB components but requires more backend configuration.")

*[\>]: and then