How to create a link in Service Portal that opens in a new tab using various widgets

Description

This article details the various ways (using various widgets) on how to create a link in Service Portal that opens it in a new tab as out-of-the-box any link opens in a same window/page by default.

Procedure

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 to open in a new tab.

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 below for the link:

(<a href="http://yourlink.com" target="_blank">Your link text</a>)

Applicable Versions

All versions

Additional Information

For the solution of using the Icon Link widget 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 || ""