UI Builder Links

[Velma]

UI Builder. Link to Destination event handler. Does anyone have a way to get an "external" link to open in the same window? I feel that it should somehow be possible using Advanced, but I don't know. Conversely, has anyone successfully gotten footer links to open in a different window/tab?

[Marc Mouries]

Hi Velma, 

Can you elaborate on the use case? Can you clarify if users need the page to open in a new browser tab or in a new UIB tab or something else? A screenshot would be helpful. 

[Velma]

Thanks, Marc. I don't think I can put screenshots in a public forum--happy to screen share if you want to see. Just browser tabs, absolutely standard functionality in web development. I mixed up two different issues in this question, around the same area. Here is more detailed documentation:

1. UI Builder Get External Link To Open In Same Tab. I have an external link in a UI Builder page. Using Link to Destination (built-in event handler) in the simple mode, it opens an external link in a separate browser tab (and a route inside the experience in the same tab). Using Link to Destination in the advanced scripted mode, I am able to open the external link (only because someone figured out how to do it by delving deep into ServiceNow source code and documented it in the forum, completely undocumented in the documentation)—however I cannot get it to open in the same tab, which is what I need. I have guessed at what the syntax might be—no way at all to write code, especially JSON!—but I didn’t guess right.
2. UI Builder Get Footer Links To Open In Different Tab. Chrome_footer is completely undocumented by ServiceNow in any public documentation (prove me wrong, please), so anything we all know about it is from looking at samples provided by ServiceNow or by others. I looked at all the samples from AES templates, as far as I know, as well as some provided by others. I added links to my footers. I want these links to open in a different browser tab. A syntax for that is provided in a sample. A link in the JSON looks like:

   {

        "id": 4,

        "type": "external",

        "target": "_blank",

        "label": {

            "translatable": false,

            "message": "[fill in label]"

        },

        "itemValue": {

            "url": "[fill in url]"

        }

   This works ok, all except the “target=_blank” part (target=_blank is standard HTML at the very least for decades if not from day one of HTML) —this external link opens in the same browser tab, which makes me think I should remove those links and make the footer go away.

I hope that is clearer. Happy to show the behavior privately.

[Velma]

I through a miraculous process of endlessly mucking around, got the links in the footer to open in a new browser tab (as they were supposed to, per the target=_blank attribute that doesn't work). So the link syntax in the footer looks like this:

                {

                    "id": 2,

                    "type": "external",

                    "target": "_blank",

                    "label": {

                        "translatable": true,

                        "message": "[your label]"

                    },

                    "itemValue": {

                        "url": "javascript: window.open('[your url]', '_blank')"

                    }

                }

One could presumably leave the non-functional "target": "_blank" line out.

I tried to do the converse thing to open an "external" (in my instance but not my experience) link from a button in the page to the current browser tab. However, we do not have access to the window object in a client script (that I can make work). We do have access to window sort of in "Link to to Destination"--this works partway as a destination for External:

javascript: window.open("[your url]", "_self")
But... the "_self" target is ignored, it still opens in a new tab, and I'm not reliably getting the url to work. (It does reliably open a new browser tab.)

All the above relates to Rome.

[Marc Mouries · Accepted solution]

I can see two options to accomplish this.

1. Use the Link Text component

https://developer.servicenow.com/dev.do#!/reference/now-experience/rome/now-components/now-text-link/uib-setup

You can style the component to make it appear as a button if you need to with some CSS

* {
    background: rgb(201, 224, 202);
    color: rgb(22, 79, 26);
    border-radius: var(--now-static-border-radius--lg);
    padding-right: var(--now-static-space--lg);
    padding-left: var(--now-static-space--lg);
    padding-top: var(--now-static-space--sm);
    padding-bottom: var(--now-static-space--sm);
    font-size: 16px;
    font-weight: 400;
}

2. Use the iframe component

This allows you to keep the experience within the UIB page.