UI Builder Text Link/Alert Component Events

[TFischer]

I'm running into an issue with the OOB Components available and I'm hoping there's a solution that doesn't involve custom component development. I'm trying to create a link that both allows me to use non-link stylized text in addition to the referenced link AND when the link is clicked it opens a new tab in the dashboard, rather than opening a new browser tab.

So far, I've looked into two components specifically, Text Link and Alert.

The click event action on Text Link component (screenshot below) is configurable, which allows me to use the event intended for opening the link in a workspace tab. However, the label tab accounts for all the text on the component, not allowing me to separate the link from the text (as is possible with the alert component).

With the Alert component (screenshot below) I am able to have text separated from the link, however the link's action is set to the `NOW_ALERT#TEXT_LINK_CLICKED` event, which opens the link in a new browser tab (instead of the workspace tab)

[IronPotato]

What you could do though is, instead of using text link component...wrap your url as a text in for example button compoent along with stylized text next to it. You can use client script on click event and trigger link to destination event where you can specify in payload that you want to stay on current page

const payload = {

        route: "your_page_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: 'current', // setting target route to current should make sure that you will stay on the same page TAB

        external: null,

        navigationOptions: null

}

//Trigger redirect event

api.emit('NAV_ITEM_SELECTED', payload);

[Kevin83 · Accepted solution]

I think you can configure the alert component link property like so: (

{

"label": "Link label",

"href": "javascript:void(0)",

"opensWindow": false

})

And then in the events choose link to destination to go to the link you want in the workspace:

 

 

[TFischer]

@Kevin83 This is close to a solution! However, when I click the link the OOB redirect is still occurring, taking me to the specified page in the link property config. When I use the back button to navigate back to the Dashboard, I can see that the intended link was opened in a new workspace tab, which must have been triggered after the OOB action.

[Kevin83]

Oh it looks like I had a copy paste issue, the href should be 

{ 
 href: javascript:void(0)
}

It feels like any time I type javascript :  void(0) it gets escaped, can you look at the screenshot for the value I was going for. i.e replace : with :

[TFischer]

That did it! Thanks. 

@IronPotato Your solution would also work as well, but it would be preferred to be able to leverage the <a> tag rather than the button for semantic reasons. Thanks for the assistance.