How to create links in Service Portal that open in a new tab

By default, all links open in the same window or tab. This article provides several options (using various widgets) for creating links in a Service Portal that open in a new tab.

  All Releases

Using link-button widget:

1. Clone the widget first to allow customization.
2. On the HTML Template field on the widget, add in the attribute of target="_blank" so it's like this:
   <a target="_blank" ng-href="{{options.href}}" class="btn btn-{{options.color}} m-b" role="button">{{data.buttonMsg}}</a>

Using Icon Link widget:

1. Clone the widget first to allow customization.
2. In the widget editor, click the menu icon and click Edit option schema.
3. Click the + icon to add a widget option as follows:
   
   • • Label: Target
     • Name: target
     • Type: Choice
     • Choices: _blank, _self, etc. (you may add more options that make sense for link type such as _top)
4. Now, whenever this widget is used there would now be the option to select the target type for the link. Setting it to _blank will make the links open in a new tab.
   

• This works because of how the widget was already configured to receive the additional option (target).
  • In the HTML template, each anchor tag (<a/>) has this attribute already: target="{{::data.target}}" which is defined in the Server Script field of the widget: data.target = options.target || ""

Using HTML widget:

1. Add the HTML widget to a page as normal.
2. On the HTML field of the widget create a link by going to the source code (using the <> icon on the editor).
3. Put the target attribute with value _blank as seen in the image or example code below for the link:
   
   (<a href="http://yourlink.com" target="_blank">Your link text</a>)