Enable "View All" and “Record” onClick Navigation for Platform Analytics Dashboards in Workspaces

[bhanu_vamshi]

Overview

When working with Platform Analytics dashboards inside Service Operations Workspace (SOW), a common requirement is to:

• Redirect users to the record form when a row is clicked

• Redirect users to a filtered list view when the “View All” button is clicked

Out of the box, dashboards do not always provide flexible navigation for these interactions specially for List/SimpleList Widgets/reports.. This article explains how to achieve both using UI Builder event handling and client scripts.

---

Step-by-Step Implementation

1. Open Service Operations Workspace in UI Builder

1. Navigate to UI Builder

2. Go to Experiences

3. Open Service Operations Workspace

4. Locate the variant page for the dashboard where you want to enable redirection

---

2. Check if the Variant Is Editable

• If the variant is editable, you can proceed directly

• If not editable:

  • Duplicate the variant

  • Work on the duplicated version

---

3. Create a Client Script

Inside the variant page, add a new Client Script as shown in the below image.

Give it a meaningful name (example:PA Dashboard Navigation Handler)

---

4. Add the Client Script Code

Use the following script to handle both View All and Row Click events:

/**
 *  {params} params
 *  {api} params.api
 *  {any} params.event
 *  {any} params.imports
 *  {ApiHelpers} params.helpers
 */
function handler({
    api,
    event,
    helpers,
    imports
}) {

    // Handle "View All" button click
    if (
        event.payload.componentProps.showViewAll &&
        event.payload.eventOrigin === "NOW_RECORD_LIST_CONNECTED#VIEW_ALL_CLICKED"
    ) {

        helpers.navigate.to(
            "simplelist",
            {
                table: "incident"
            },
            {
                query: "active=false",
                listTitle: "P3 Incidents"
            }
        );
    }

    // Handle row click – navigate to record
    if (event.payload.eventOrigin === "NOW_RECORD_LIST_CONNECTED#ROW_CLICKED") {
        helpers.navigate.to("record", {
            table: event.payload.table,
            sysId: event.payload.row.sys_id.value
        });
    }
}

---

5. Attach the Script to the Dashboard Component

1. Click on the dashboard component

2. Go to Events as shown in the below image

3. Under “Dashboard Widget Clicked” event, attach the client script to by clicking on Add handler as in the shown below image

4. Select Execute Client Script

5. Choose the client script you created

   

---

6. Test the Functionality

1. Open the target dashboard

2. Click:

   • A row → should open the record form

   • View All → should redirect to the filtered list view

3. Validate query, list title, and navigation behavior

---

Important Notes (Very Important ⚠️) 

Payload Differences Across Versions

The event.payload structure can differ based on ServiceNow versions.

For example:

• Zurich

  event.payload.componentProps.showViewAll

• Yokohama

  event.payload.componentProps.hideViewAll

Best Practice

Always inspect the payload before writing conditions by logging the event payload in the script(client script or event script):

console.log(event.payload);

Use this to:

• Verify available keys

• Confirm eventOrigin

• Adjust conditions based on your instance version