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!

[MansoorM]

Am getting the data, the below script is in client script. how can i pass that product value in URL to redirect to next page

function executeLink(api,event){

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

    //console.log('Product Selectd  ' , product_selected);

    var product = api.event.payload.data.elements[0];

    console.log('Product: ', product);

}

[IronPotato]

what is the name of your mandatory parameter on that page where you want to redirect?

also does the product variable contains the value that this page needs as mandatory parameter?

[MansoorM]

Name of the mandatory parameter: product;

Yes it contains the value as shown in below image

[IronPotato]

const payload = {

        route: "your_page_name", // here goes you page name where you want to redirect

        fields: {

                product: product

}, // here are mandatory parameters

        params: null,

        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 and correct. This will help others finding a solution.

[MansoorM]

I have added your script in client script as shown below, when i try to save it the page is loading and not saving.

nction executeLink(api,event){

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

    //console.log('Product Selectd  ' , product_selected);

    var product = api.event.payload.data.elements[0];

    console.log('Product: ', product);

    api.setState('selected_product', product);

    const payload = {

        route: "milestone-dashboard", // here goes you page name where you want to redirect

        fields: {

                product: product

}, // here are mandatory parameters

        params: null,

        redirect: null,

        passiveNavigation: null,

        title: null,

        multiInstField: null,

        targetRoute: null,

        external: null,

        navigationOptions: null

}

//Trigger redirect event

api.emit('NAV_ITEM_SELECTED', payload);

}