Forum Discussion
Quicklinks - open in a new tab
Hi,
i need some support. I added some Quicklinks on our Sharpoint-Site and some of them open in a new tab and some in the same. But we want to open all in a new tab, how can I adjust
- In general, only external links open in a new tab. This is a terrible implementation because files like pdf's open in the file viewer and then redirect to the source library rather than the page you were on. Really bad user experience. To work around this major oversight by Msft, you can create bit.ly links to trick SP into opening in a new tab.
- I agree - terrible user experience. The even more frustrating part is that some links to internal assets (on the SharePoint site) DO open in a new tab and some do not. I'm not sure how SharePoint decides which behavior to use, but there doesn't seem to be any way to modify the behavior. Inconsistent user experience is even worse than an overall poor design.
Msft has overcomplicated this - you can see the default behavior by inspecting links added to the text web part. The data-interception tag is set to "on" by default, forcing same tab behavior. If you check "open in a new tab", data-interception is "off" and the standard target="_blank" tag is added and isn't overridden. Clearly Sharepoint detects if a link is internal and adds data-interception="on" to force it to open in the same tab, UNLESS (and this is where it gets silly), you're on a system page (like a library). How they come up with this logic is beyond me.
It would be simple to add the open in new tab option to the quick links web part to defeat the default behavior, regardless of whether the link is internal or external, but Msft has ignored the numerous complaints about this - as usual - and the end result is they're just pushing the use of all the url shortening apps out there.
- Quick links (and navigation links) in SharePoint Online open the target site in the same tab if the target is a SharePoint page, otherwise (the target is an external target) they open in a new browser tab.
A work-around that requires user training is to Ctrl+click any link that the user wants to open in a new browser tab. Also, if the mouse has a scroll wheel, clicking the link with the scroll wheel causes the browser to open the target in a new browser tab.
To make a regular mouse click open a link to a SharePoint page in a new tab, there are several options:
A. Use Bitly (https://bitly.com/) to convert any internal SharePoint URL like https://contosocorp.sharepoint.com/Lists/sc1/calendar.aspx to a “short” link like https://bit.ly/3Fru34e. The short link looks like an external target. This causes SharePoint to open that target in a new browser tab.
B. As documented on code2care https://code2care.org/sharepoint/how-to-open-sharepoint-online-modern-sfpx-links-in-new-tab-window, you can use a custom web part that allows you to embed custom HTML into a SharePoint page. Samson would need to deploy the SPFx Content Editor Web Part which works like the classic SharePoint CEWP and then embed links with the attributes target=”_blank” and data-interception="off"
C. My Microsoft Partner version of SharePoint Online has a cool new OOTB web part called the HTML Content Editor, enriched with the warning "USE WITH CAUTION". This web part let me do the same thing as the SPFx Content Editor Web Part does in option B. above except without SPFx. No idea when this will be available to my clients. Hi inkaotto ,
I recently tried this myself with the Modern Script Editor. The thing that you could do to manipulate the standard behavior of links in the SharePoint environment is to target the id of the webpart and inject JavaScript to make the link target="_blank" and also make it so that data-interception="off".
Here is the code for implementing this:
<script>
document.querySelectorAll('[data-automation-id^="QuickLinksWebPart"] [role=listitem] a').forEach(function(anchor) {
anchor.setAttribute('target', '_blank');
anchor.setAttribute('data-interception', 'off');
});
document.querySelectorAll('[data-automation-id="CollapsibleLayer-Button"]').forEach(function(domClick) {
domClick.addEventListener("click", function() {
setTimeout(function() {
document.querySelectorAll('[data-automation-id^="QuickLinksWebPart"] [role=listitem] a').forEach(function(anchor) {
anchor.setAttribute('target', '_blank');
anchor.setAttribute('data-interception', 'off');
});
}, 500); // 0,5 second delay
});
});
</script>The code above does two things. It first injects JavaScript on page load where all data-automation-id^="QuickLinksWebPart"] [role=listitem] are found. This would be enough if your page on SharePoint does not include sections. If you do not have any sections the only thing you would need is this:
document.querySelectorAll('[data-automation-id^="QuickLinksWebPart"] [role=listitem] a').forEach(function(anchor) {
anchor.setAttribute('target', '_blank');
anchor.setAttribute('data-interception', 'off');
});But if you do have sections on your SharePoint page, then you need to add a delay to this injection of the script so that it waits for the user to click on the expand function for the section. When the user clicks that event the code that run on page load is overwritten.
Now you want your injection for the Quick Links to run after the script that opens the sections. Then you need to add a delay. I have added 0,5 seconds in this example:
document.querySelectorAll('[data-automation-id="CollapsibleLayer-Button"]').forEach(function(domClick) {
domClick.addEventListener("click", function() {
setTimeout(function() {
document.querySelectorAll('[data-automation-id^="QuickLinksWebPart"] [role=listitem] a').forEach(function(anchor) {
anchor.setAttribute('target', '_blank');
anchor.setAttribute('data-interception', 'off');
});
}, 500); // 0,5 second delay
});
});I hope you find this helpful.
Best regards,
Oscar
I think Microsoft should provide a setting for each link in quick links web part to open the link in new tab, similar to how we can configure navigation links to open in a new tab in SharePoint.
There are already few feedback's submitted by other users - consider voting on them:
- Open in a new tab Quick Links WebPart SharePoint Online
- Allow Quicklinks to Open in a New Tab or Window
Meanwhile if you are unable to use the modern script editor web part or SPFx and/or custom scripting is not allowed in your company, you can right/second click on quick link and select Open link in new tab option like:
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
Thanks for the script oscar. Dumb question how do i find out the target ID for a hero web part? I want this same behavior for any hero web part, not only the quick links
jkwong inkaotto Oscar_Stensson Martin Cox mattchowell
No need to use any custom script or custom code for this functionality now as Microsoft is currently rolling out a new feature for SharePoint Online quick links web part which will allow you to open links in new browser tab.
You can choose to open individual links in new browser tab using quick links web part settings, like:
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
- This is great - I was having an issue where opening a form page from a QuickLink wasn't rendering the form after loading the form page. I need the form page to open in same tab so I removed the anchor.setAttribute('target', '_blank') part and voila! thanks!!!
inkaotto the default action with Quick Links is to open in the same tab and there is no way to change that.
https://feedbackportal.microsoft.com/feedback/idea/86278ee6-dd1c-ec11-b6e7-0022481f8914
Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)
