Find your people. Pick a challenge. Ship something real. The CreatorCon Hackathon is coming to the Community Pavilion for one epic night. Every skill level, every role welcome. Join us on May 5th and learn more here.

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

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

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

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.