How to Redirect to Another Page with Selected Data from Vertical Bar Chart in ServiceNow UI Builder?

[MansoorM]

Hello Community,

I am working on a drill-down page in ServiceNow UI Builder that includes a vertical bar chart. The chart has the following configuration:

• X-axis: Product name
• Y-axis: Account name

I need to implement a feature where clicking on a bar (representing a product) redirects the user to another page (e.g., "View page"). The "View page" requires one mandatory parameter and three optional parameters.

My requirements are:

1. When a user clicks on a product in the bar chart, the selected product name should be passed to the URL.
2. The user should be redirected to the "View page" with the selected product name as a parameter.

Could you please guide me on how to:

• Pass the selected product name to the URL.
• Redirect to another page with the selected data.

Any examples or detailed steps would be greatly appreciated.

Thank you!

[IronPotato]

Hi @MansoorM,

1. create client script with this code: console.log('visualization clicked', event.payload);

2. hang that client script on visualization component and it's "Visualization Clicked" event.

3. save the changes and refresh your page.

4. open browser's developer tools and click on the visualization chart and observe the payload.

5. access your data and store them in variables e.g: 

const segments  = event.payload.params.querySegments;

6. once your variables are stored use them in script as follows: 

const payload = {

        route: "your_paga_name", // here goes you page name

        fields: {

                your_mandatory_parameter_as_key: value_from_variable;

}, // here are mandatory parameters

        params: {}, // here goes your optional parameters as object...same as fields above

        redirect: null,

        passiveNavigation: null,

        title: null,

        multiInstField: null,

        targetRoute: null,

        external: null,

        navigationOptions: null

}

//Trigger redirect event

api.emit('NAV_ITEM_SELECTED', payload);

If my answer helped you in any way, please then mark it as helpful or correct. This will help others finding a solution.

[MansoorM]

console.log('visualization clicked', event.payload);

for the above log am getting undefined 

[IronPotato]

change it to just event without payload so console.log('visualization clicked', event) and observe the object

[MansoorM]

Got this in console log in payload chart type getting undefined