Configure field-level drilldowns in a table
In a table, you can configure different drilldowns on a field-level basis. This feature supports the following drilldowns:
Link to custom URL
Set token
Switch to tab
Configuring these drilldowns requires editing the visualization source code so that the drilldown only applies to the desired field. You can configure multiple field-specific drilldowns per table, but only one per field.
The following provides examples for configuring the field-level drilldowns. The examples use the same table, which shows a list of incident reports. The examples demonstrate configuring a different drilldown for each of the first 3 columns of the table.
Link to custom URL
You can configure a drilldown so that values for a field link to a custom URL. In this example, the left column shows the ID for each incident in the company's bug tracking system, with information about each incident available at https://mybugtracker.com/<incident ID>. You can configure a field-level drilldown for values in the ID column to link to custom URLs, using the $value$ token to link to the relevant page for each incident.
The following shows a snippet of the table eventHandlers
source code for this configuration. Note the fields
property is set to ID
to ensure that the drilldown only applies to the ID column.
"eventHandlers": [
{
"type": "drilldown.customUrl",
"options": {
"fields": [
"ID"
],
"url": "https://mybugtracker.com/$value$",
"newTab": true
}
}
]
Set token
You can configure a drilldown so that clicking values under a field set a token. In this example, the third column shows the severity for each incident. You can configure a field-level drilldown so that when users click a value in the Severity column, it sets the sevLevel token to the value of the clicked cell. You can then use that token to filter data for the other visualizations on the dashboard for only the desired incident severity level.
The following shows a snippet of the table source code for this configuration. Note the fields
property for drilldown.setToken
is set to Severity
to ensure that the drilldown only applies to the Severity column.
"eventHandlers": [
{
"type": "drilldown.setToken",
"options": {
"fields": [
"Severity"
],
"tokens": [
{
"token": "sevLevel",
"key": "value"
}
]
}
}
]
Switch to tab
You can configure a drilldown so that clicking values under a field switches to another dashboard tab. In this example, the second column shows the OS that each incident affects. You can configure a field-level drilldown so that when users click a value in the OS column, the dashboard view switches to another tab, which contains visualizations for relevant device and OS data.
The following shows a snippet of the table source code for this configuration. Note the fields
property for drilldown.switchToTab
is set to OS
to ensure that the drilldown only applies to the OS column.
"eventHandlers": [
{
"type": "drilldown.switchToTab",
"options": {
"fields": [
"OS"
],
"tabId": "layout_MLVzhg58"
}
}
]
Combined example
The following shows the eventHandlers
stanza of the table source code, which incorporates the 3 aforementioned examples. You can see that the table's first 3 columns are each configured with a different drilldown:
"eventHandlers": [
{
"type": "drilldown.customUrl",
"options": {
"fields": [
"ID"
],
"url": "https://mybugtracker.com/$value$",
"newTab": true
}
},
{
"type": "drilldown.switchToTab",
"options": {
"fields": [
"OS"
],
"tabId": "layout_MLVzhg58"
}
},
{
"type": "drilldown.setToken",
"options": {
"fields": [
"Severity"
],
"tokens": [
{
"token": "sevLevel",
"key": "value"
}
]
}
}
]