Helsinki Service Portal Icon Link - New Tab

danenglish
Giga Expert

I'm working on building my service portal in Helsinki, and am running into an issue when creating icon links that I'd like to open in a new tab.   In older SN versions, there was an option to select how you wanted links to open.   That is now gone, and it seems that whatever href code I try to put in the href/html field to open in a new tab doesn't work.

This is specific to widgets in the Portal.   Not a UI action.

I believe part of the issue is that it is trying to append the html to the end of the instance url, rather than just opening the link in a new tab.

Has anyone found a way around this, or reported it already as a problem?

1 ACCEPTED SOLUTION

gustavogarcia_n
ServiceNow Employee
ServiceNow Employee

Hi Dan,



Great question. This does not appear to be fully implemented, though it does look like we have most of the code in to get this doen and I think you can get it working with a few changes.



The widget in question, Icon Link, has the following three lines in the HTML template (you can find this by going to the widget editor or the widget record):



3:       <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">


10:     <a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">


20:     <a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">



These are basic a tags that have some angular calls. What we're interested in is the value of the target attribute as that defines what window you're going to open the link in. The target for all of these is set to data.target which is defined in the Server Script for the widget as follows:


4: data.target = options.target || "";



So we're looking for an option named target and passing its value to the target attribute. If there is no value then we pass an empty string which will use the default behavior - opening in the same tab/window.



For more information on how options work see our documentation on widget options.



Options allow your users to configure individual widget instances. Defining a target option allows you to set the target for each icon link individually if implemented. Here is how I tested enabling this.



1) Open the widget in the widget editor. You can find this by going to /sp_config, clicking widget editor, and searching for "Icon Link".



2) Click the menu icon and click "Clone Icon Link" to create a copy of the widget called "Icon Link with Target". This is necessary because out of box widgets cannot be modified.



3) In the new widget click the menu icon and click "Edit option schema."


Screen Shot 2016-11-11 at 9.57.57 AM.png


4) Click the + icon to add a widget option as follows:


  Label: Target


  Name: target


  Type: Choice


  Choices: _blank, _self (These are the two answers that make the most sense. The other two I was able to find were _parent and _top but those are for frames which we're not using here.)


Screen Shot 2016-11-11 at 9.56.28 AM.png


Now when you use "Icon Link with Target" instead of Icon Link you'll see the option to set a target. Setting it to _blank will cause the links to open in a new tab.



Go ahead and test this and make any modifications as necessary. Please note that I've only done some quick testing on my own instance, so you'll want to make sure this is working 100% before moving forward into a production instance.



Thanks,


Gustavo Garcia


View solution in original post

16 REPLIES 16

Really sorry about the reply just now, I found the issue on my Firefox was caused by the Tab Mix Plus plugin that i installed, there is an option said "Open Lnks with a target attribute in current tab" and it was check. I removed the check and the link now open in new tab.



Thank you very much, Gustavo.


Hi Eddie,



Well, now if someone has the same plugin/configuration in place they'll find your comment to steer them in the right direction! Happy to hear this post was helpful.



Gustavo Garcia


Hey Gustavo,



I was wondering what the steps would be to also make links on the header menu open in a new tab?   I'm not seeing any edit schema options in the menu items and would like to have a drop down list of quick links in my header that will open links in a new tab.



Any help is much appreciated!


Hey Dan,



Great question! The way the menu works is it pulls an sp_widget for the header (out of box this is called Header Menu) and provides the items in the sp_instance_menu related list. Out of box this related list of menu items is iterated through and rendered using the menuTemplate angular template which reads as follows in the line used for basic menu items:
<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}">{{ item.label }}</a>
As you can see there is already a target attribute defined and all you need to do is define the item.url_target. If you go to the sp_instance_menu and open an individual item you'll see there is a URL Target field which, if you set to "_blank" will open that menu item in a new tab.
Please let me know if that didn't work for you I tested it quickly on my test instance and everything seemed in order but maybe I missed someone's previous customization.
Gustavo Garcia

Thanks for the guidance!



When I look at my menuTemplate (which is OOB, Helsinki currently) this is what I see:



<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}">{{ item.label }}</a>


<a ng-if="item.items.length > 0" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ item.label }} <span class="caret"></span></a>


<ul ng-if="item.items.length > 0" class="dropdown-menu" role="menu">


      <li ng-repeat="item in item.items" ng-include="'menuTemplate'" />


</ul>


<a ng-if="item.scriptedItems.count > 0" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">


      <span ng-bind-html="item.label"></span>


      <span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>


</a>


<sp-dropdown-tree ng-if="item.scriptedItems.count > 0" items="item.scriptedItems.items" />



So, ideally if I replace the bold line above with the line you provided, I should then see a URL Target field... correct?