Forum Discussion
Quicklinks - open in a new tab
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
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
- ganeshsanapNov 08, 2023MVP
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.
- mattchowellNov 08, 2023Iron Contributor
FINALLY - thanks ganeshsanap !