Open SuiteLinks in a new tab

Open SuiteLinks in a new tab header image

Within the SharePoint 2013 look and feel a new element found its way to the users, at the top of each page you can find a new bar that contains a few links, depending on the environment you are working on. This bar contains so called SuiteLinks, and they will help you navigate the different services that are available on your farm. If you are running an on premise installation you will find for instance your newsfeed and SkyDrive and sites.

While if you are running an Office 365 it will show a few more like Outlook, people, Yammer and OneDrive

Now there are some minor style difference between both but one of the most catchy one’s is that all of those links will open in the same window (or tab) of your browser. Except the yammer, that one is opened with a _blank thus resulting in a new tab. The reason probably is that Yammer is the only service that is currently not supporting the SuiteLinks. If you are navigating to Yammer you will lose the ‘context’ the SuiteLinks provide you with.

The thing is some users find it confusing that some of the links take them away from the site they are currently on and they need more then one click to go ‘back’. If you for instance are on a project site and navigate to your outlook using the SuiteLinks a redirect takes place meaning that you have to click back twice to get back to the project site you where working on. So in some cases it might be useful to open the SuiteLinks in a new window or tab.

Opening these links in a new tab is not something you can do by simply changing the HTML since it is a specific control on the page that renders these links asynchronous:

<SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />

So if you need to open these links in new tabs the only option you have is using JavaScript. Since you can use JavaScript to attach handlers to your DOM you could use this method to add a handler that listens to any changes on a certain element and then write some logic to update the HTML after it got changed. The only thing to keep in mind then is to prevent an never-ending loop as that will not result in anything pretty. In order to work with that type of script you must be sure that the HTML element you are trying to attach to is actually present. So you will have to add your script at the bottom of your MasterPage. If you are using the ScriptLink tag for your custom scripts you can use LoadAfterUI=“true” to make sure your scripts are loaded at the bottom of the page. But by default you can find a script block at the bottom right before yourtag where a workspace variable is set, so you can just use that part to insert your custom logic. If you have added a handler that listens to changes to the element that contains the SuiteLinks, all you have to do is to retrieve all elements that you want to add a target=_blank to. 

<SharePoint:ScriptBlock runat="server">var g_Workspace = "s4-workspace";
   var firstRun = true;

   $('div#suiteLinksBox').bind("DOMSubtreeModified",function(){
       if(firstRun){
           firstRun = false;
           var topLinks = $('ul#Suite_TopMenu li a');
           if(topLinks.length != 0) {
               $(topLinks).attr('target', '_blank');
           };
       }
   });
</SharePoint:ScriptBlock>

In the example you can see that we attach the _blank to all links but you can of course write logic to only target specific links and leave others. Another then opening the existing links you could insert your own custom links into the the SuiteLinks, and as long as you use the same html format they will look great

  <SharePoint:AjaxDelta runat="server" id="DeltaSuiteLinks" BlockElement="true" CssClass="ms-core-deltaSuiteLinks">
      <div id="customtopnav">
          <ul class="ms-core-suiteLinkList">
              <li class="ms-core-suiteLink">
                  <a href="http://www.mavention.nl" class="ms-core-suiteLink-a">
                  <span>Mavention</span></a>
              </li>
          </ul>
      </div>

      <div id="suiteLinksBox">
          <SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
      </div>
  </SharePoint:AjaxDelta>

Obviously besides inserting the rough HTML into your MasterPage you can also use jQuery (or just plain JavaScript) to insert it as well, as long as you use the same HTML format to make sure the styling looks good.

Loading comments…