How can I link UI Builder Button and multiple external links?

Naoki Ikawa
Tera Contributor

I'm trying to link a single button and multiple external links. I mean, when I click the button once, I want all the external links to open with a new tab respectively. Is it possible?

As I see the "Destination" colum in the "Link to destination" event handler, it seems to be difficult to add multiple links here. If you have another idea to achieve it, I would be grateful if you could tell it to me.

1 ACCEPTED SOLUTION

Kevin83
ServiceNow Employee
ServiceNow Employee

you could try:

 

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

    function delay(ms) {
        return new Promise(resolve => helpers.timing.setTimeout(resolve, ms));
    }

    const links = [{
        external: {
            url: "https://servicenow.com"
        }
    }, {
        external: {
            url: "https://google.com"
        }
    }];

    for (const link of links) {
        console.log("opening link: ", link);

        helpers.navigate.to(
            null, //route,
			null, //fields
			null, //params = {},
			null, //redirect = false,
			null, //passiveNavigation = false,
			null, //targetRoute = null,
			link.external,
			null, //titlelink
        );

        await delay(100);
    }

}

 

View solution in original post

4 REPLIES 4

Kevin83
ServiceNow Employee
ServiceNow Employee

You could do something like this in a script. 

Screenshot 2024-11-08 at 10.45.18 AM.png

 

Screenshot 2024-11-08 at 10.46.49 AM.png

 
The script I wrote is as follows:

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

    function delay(ms) {
        return new Promise(resolve => helpers.timing.setTimeout(resolve, ms));
    }

    const links = [{
        route: "srp",
        fields: {
            table: "incident",
            sysId: "57af7aec73d423002728660c4cf6a71c"
        },
        params: {},
        redirect: false,
        passiveNavigation: true
    }, {
        route: "srp",
        fields: {
            table: "incident",
            sysId: "ed92e8d173d023002728660c4cf6a7bc"
        },
        params: {},
        redirect: false,
        passiveNavigation: true
    }];

    for (const link of links) {
        console.log("opening link: ", link);

        helpers.navigate.to(link.route, link.fields, link.params, link.redirect, link.passiveNavigation);
        await delay(100);
    }

}

Hi Kevin, thank you for your answer. The idea of combining client script with button seems interesting and useful for many purposes.

I tried that script changing the parameters to which I want users to redirect.

However, it seems it opens the links as "internal tabs". I wanted to open multiple links with the "browser's tabs" respectively. Do you have any idea to achieve this?

Kevin83
ServiceNow Employee
ServiceNow Employee

you could try:

 

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

    function delay(ms) {
        return new Promise(resolve => helpers.timing.setTimeout(resolve, ms));
    }

    const links = [{
        external: {
            url: "https://servicenow.com"
        }
    }, {
        external: {
            url: "https://google.com"
        }
    }];

    for (const link of links) {
        console.log("opening link: ", link);

        helpers.navigate.to(
            null, //route,
			null, //fields
			null, //params = {},
			null, //redirect = false,
			null, //passiveNavigation = false,
			null, //targetRoute = null,
			link.external,
			null, //titlelink
        );

        await delay(100);
    }

}

 

That code worked as I desired! Thank you.