Multiple Drill-Down Level Reports in UI Builder

[Luis Estefano]

Advanced Reports with multiple Drill-Down Levels in UI Builder

This article details the process of building advanced reports with multiple drill-down levels using ServiceNow's UI Builder. This allows for interactive data visualizations where users can click through to explore deeper levels of data. If you only need a single drill-down level that redirects to a list view of the displayed data, it's best to use the basic drill-down feature within the workspace data visualization.

Step 1: Create or Open a UI Builder Experience

1.        Log in to ServiceNow and navigate to UI Builder.
2.        Either:

o    Create a new experience: Click Create Experience, and follow the setup wizard.
      Documentation and instructions could be found on: Create an experience for UI Builder 

o    Open an existing experience: Select the desired experience from the list.

Step 2: Create and Configure the Data Visualization

1.        Add a new Data Visualization component to your desired page.
2.        Configure the visualization:

o    Select the Type of chart (e.g., Donut, Column, Area, etc.).

o    Specify the Table from which data will be pulled.

o    Apply Conditions to filter data.

o    Set Metric to count the records on the table.

o    Set Group By options to organize the data.

3.        Save your changes to ensure the basic visualization is set up.

Step 3: Configure the Drill-Down Event

1.        Within the Data Visualization component, navigate to the Events tab.
   
   
2.        Add a new event:
   • Select the Event Type as "Link to Destination".
     
     
3. Enable the Advanced mode configuration
   
   
4. Configure the event with the following parameters:
   • Destination: Specify the name of the page that will display the drill-down data.
         Example: "/report_0001_level_2".
   • Table: Use “@payload.params.table”.
   • Query: Use “@payload.params.query”.
     
     

Step 4: Create the Drill-Down Page

1.        Create a new page in the same experience:
   • Name the page according to the Destination set in Step 3.
     Example: "/report_0001_level_2". 

2.        Add a new Data Visualization component to the page.
   
   
3.        Configure the visualization:
   • Select the Type of chart (e.g., Donut, Column, Area, etc.).
   • Set the Data Source dynamically using scripts to ensure the table and conditions are populated based on the user's prior selection.

Step 5: Configure Scripts for Dynamic Data Population

Use the following scripts to populate the Data Source dynamically:

Script 1: Set Table from Previous Selection

This script retrieves the selected table from the payload parameters.

function evaluateProperty({api, helpers}) {
  var data = [
                {
                    "isDatabaseView": false,
                    "allowRealTime": true,
                    "sourceType": "table",
                    "label": {
                        "message": "LABEL OF YOUR DIV"
                    },
                    "tableOrViewName": api.context.props.table,
                    "filterQuery": api.context.props.query, //you can build your query here using dynamica data binding. 
                    "id": "DVID"
                }
            ];

    return data;

}

Script 2: Set Metric Type from Previous Selection

This script retrieves the metric type based on the previous selection.

function evaluateProperty({api, helpers}) {

    var metric = [
                {
                    "dataSource": "DVID",
                    "id": "METRICID",
                    "aggregateFunction": "COUNT",
                    "aggregateField":"sys_id",
                    "numberFormat": {
                        "customFormat": false
                    },
                    "axisId": "primary"
                }
            ];

    return metric;

}

Script 3: Set Group By from Previous Selection

This script retrieves the grouping criteria dynamically.

function evaluateProperty({api, helpers}) {

    var groupby = [{
        "maxNumberOfGroups": "ALL",
        "numberOfGroupsBasedOn": "NO_OF_GROUP_BASED_ON_PER_METRIC",
        "showOthers": false,
        "groupBy": [{
            "dataSource": "DVID",
            "groupByField": "sys_updated_by",
            "isRange": false,
            "isPaBucket": false
        } ] //can use multi 'group by' by adding another object
    }];

    return groupby;

}

Final Testing and Deployment

1.        Test the functionality:

o    Navigate to the main report page.

o    Interact with the visualization to trigger the drill-down event.

o    Verify that the drill-down page loads correctly with the appropriate data.

2.        Configure different levels in the same way, setting the desired visualization types, filters, etc.
3.        Deploy the experience to production, make it available to your target users.

Benefits of this Approach

•          Interactivity: Users can explore data intuitively by clicking through levels of detail.
•          Customization: Each drill-down page is configured dynamically, ensuring relevance based on user interaction.
•          Scalability: This approach can be extended to support additional levels of reporting, with different types of visualizations.

By following these steps, you can create advanced, interactive reporting experiences in ServiceNow that offer valuable insights into your data.

Hope it helps! 

Kind regards,

Luis Estéfano

[Bennie dijkslag]

Hi,

I seem to not have this option "Link to destination", I upgraded to the last version of UI Builder, working on Xanadu. What could be wrong?

Thanks,

Bennie

[Luis Estefano]

Hi @Bennie dijkslag , 

The option should be available, just make sure you’re in the correct component, then click the ‘Add handler’ link in the "Events" tab. This opens a modal where you can choose the appropriate handler from the list.

Kind regards,
Luis Estéfano