- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-27-2016 08:00 AM
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?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-11-2016 09:59 AM
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."
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.)
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-23-2017 11:22 PM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-24-2017 08:33 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-01-2017 10:48 AM
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!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-13-2017 04:24 PM
Hey Dan,
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-15-2017 08:07 AM
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?