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