Open in new window – MySites

Within SharePoint 2013, there is a navigation menu with the “About Me” link – which re-directs to MySites.

We have a customer request that asked if this link could be changed to display in a new tab.

image

After some investigation into the HTML, and markup within the Master Page, I determined the following :

There is a control called WELCOME.ASCX for this piece – in the master page :

<%@ Register TagPrefix=”wssuc” TagName=”Welcome” src=”~/_controltemplates/15/Welcome.ascx” %>

This loads a bunch of HTML and JavaScript – with the actual click-link being executed by a function called :

  • STSNavigate2

image

THIS function is actually within INIT.JS – and changes the window.location.href.

image

So – HOW do you change this ??

The change I introduced does the following, using some JavaScript added to the Master Page :

  • Find the HTML hidden nodes used for the WELCOME menu
  • Determine the OnClick JavaScript function – using jQuery
  • Change this to be MY function
  • New function to do ‘open in new window’ for the URL

image

** The biggest problem I had was whether to use ExecuteOrDelayUntilScriptLoaded, and WHERE in the Master Page to put this.

In the end, I included this at the very BOTTOM of the Master Page – just before the closing BODY tag – you can see this in the screenshot above.

The functions included are :

  • STSNavigationNewWindow – new function called when user clicks on the link
  • ReplaceMenuFunction – just a string replace function
  • OpenInNewWindow – gets the existing text in the onmenuclick property – and change it
  • _changeTargetForHyperlinks – can list the specific item to change – and any others

Here’s the full text of the above ‘magic’ – hope it helps you – let me know if it does, I love to see/hear nice comments from other SharePoint’ers out there.

🙂

<script type=”text/javascript”>
    // this is the new function that does the stuff
    function STSNavigateNewWindow(a, b) {
        window.open(b, ‘_blank’);
    }

    //helper function to replace out the property
    function ReplaceMenuFunction(a) {
        return a.replace(‘STSNavigate2’, ‘STSNavigateNewWindow’);
    }

    //set the JS function for specific fields
    function OpenInNewWindow(idValue) {
        var jqControl = $(idValue);
        var oldFunctionRef = jqControl.attr(‘onmenuclick’);
        if (oldFunctionRef) {
            var newFunctionRef = ReplaceMenuFunction(oldFunctionRef);
            jqControl.attr(‘onmenuclick’, newFunctionRef);
        }
    }

    function _changeTargetForHyperlinks() {
        OpenInNewWindow(‘#ID_AboutMe’);
    }

    _spBodyOnLoadFunctionNames.push(‘_changeTargetForHyperlinks’);

</script>

~wookie…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s