Opening a document in a SharePoint 2013 document library in a new tab (using code)

Question

How to open a SharePoint 2013 document library item in a new tab/new window? By default, the document, depending on whether it is .docx or .xlsx opens in Word or Excel Web Access in the same tab. I know by clicking CTRL + left click opens it in a new tab, but how do I achieve this by using code? Any suggestions are appreciated.

Answer 1

A little JavaScript employing jQuery does the job just perfectly.

$(document).ready(
  function ()
  {
    // has to be on an interval for grouped doc libraries
    // where the actual links are loaded only once a group
    // is expanded
    setInterval(
      function ()
      {
        $("a[onclick*='return DispEx'][target!='_blank']")
          .attr("target", "_blank")
          .removeAttr("onclick");

        // document type icons
        $("td.ms-vb-icon>img[onclick]:not([documentUrl])")
          .click(function (e)
          {
            window.open($(this).attr("documentUrl"), "_blank");
            e.stopPropagation();
            e.preventDefault();
            return false;
          })
          .each(function ()
          {
            $(this).attr(
            "documentUrl",
            $.trim(String($(this).attr("onclick"))
              .split("=")[1]
              .replace(/["'{}]/g, "")
              .split(";")[0])
            );
            this.onclick = null;
          });
      },
      500
    );
  }
);

For other options you can also check:

http://social.technet.microsoft.com/Forums/sharepoint/en-US/9db08c4a-b53c-419a-84f8-001c194d1311/how-to-open-sharepoint-document-library-pdf-file-in-new-window?forum=sharepointadminlegacy

http://www.codeproject.com/Tips/722356/Open-Links-in-a-New-Window-in-SharePoint

http://www.benramey.com/2011/04/25/opening-all-sharepoint-2010-documents-in-a-new-window/

Answer 2

You must use JSLink instead of inline scripts.

JSLink is providing us a method to customize column rendering, and you could easily add the expected behavior:

Sample:

// Create a namespace for our functions so we don't collide with anything else
var customFunctions = customFunctions || {};

// Create a function for customizing the Field Rendering of our fields
customFunctions.CustomizeOpenFieldInNewTab = function () {
    var fieldJsLinkOverride = {};
    fieldJsLinkOverride.Templates = {};

    fieldJsLinkOverride.Templates.Fields =
    {
        // Make sure the Your field view gets hooked up to the GetMyFieldIcon method defined below
        'LinkFilename': { 'View': customFunctions.GetDocumentsField }, 
    };

    // Register the rendering template
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);
};

// Create a function for getting the Your Field Icon value (called from the first method)
customFunctions.GetDocumentsField = function (ctx) {
    var myColumn = ctx.CurrentItem.ServerRedirectedEmbedUrl;
    var myFileName = ctx.CurrentItem.FileLeafRef;
    var myIndex = myFileName.lastIndexOf(".");
    myFileName = myFileName.substring(0, myIndex); 

    // In the following section we simply determine what the rendered html output should be. In my case I'm setting an icon.
    if (myColumn) {
        return "<a href='" + myColumn + "' target='_blank'>" + myFileName + "</a>";
    }

    return ctx.CurrentItem.ServerRedirectedEmbedUrl;
};

// Call the function. 
// We could've used a self-executing function as well but I think this simplifies the example
customFunctions.CustomizeOpenFieldInNewTab();

Source: https://zimmergren.net/sp-2013-using-the-spfield-jslink-property-to-change-the-way-your-field-is-rendered-in-sharepoint-2013/

Warning:

1. This sample render all items even folders (you must adapt on your context)
2. If you are rendering a system column, be aware for regression

Answer 3

Updated a little based on @Stact's solution to fix the folder name missing issue.

// Create a namespace for our functions so we don't collide with anything else
var customFunctions = customFunctions || {};

// Create a function for customizing the Field Rendering of our fields
customFunctions.CustomizeOpenFieldInNewTab = function () {
var fieldJsLinkOverride = {};
fieldJsLinkOverride.Templates = {};

fieldJsLinkOverride.Templates.Fields =
{
    // Make sure the Your field view gets hooked up to the GetMyFieldIcon method defined below
    'LinkFilename': { 'View': customFunctions.GetDocumentsField }, 
};

// Register the rendering template
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);};
// Create a function for getting the Your Field Icon value (called from the first method)
customFunctions.GetDocumentsField = function (ctx) {
var myColumn = ctx.CurrentItem.ServerRedirectedEmbedUrl;
var myFileName = ctx.CurrentItem.FileLeafRef;
var myFileRef = ctx.CurrentItem.FileRef;
var myIndex = myFileName.lastIndexOf(".");



// In the following section we simply determine what the rendered html output should be. In my case I'm setting an icon.
if (myColumn) {
    myFileName = myFileName.substring(0, myIndex); 
    return "<a href='" + myColumn + "' target='_blank'>" + myFileName + "</a>";
}else{
    return "<a href='" + myFileRef + "' target='_blank'>" + myFileName + "</a>";
}

return ctx.CurrentItem.ServerRedirectedEmbedUrl;};

// Call the function. 
// We could've used a self-executing function as well but I think this 
simplifies the example
customFunctions.CustomizeOpenFieldInNewTab();

Answer 4

this code OnPostRender run per page compared to $(document).ready(...) run just once and on paging (SP2013 is ajax) not run for the second page

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: 
           function() { 
               var index = $('th').index($('th [name=LinkFilename]').parent()[0]) + 2
               $('.ms-listviewtable tr td:nth-child('+ index +') a[onclick*="return DispEx"]')
                    .attr("target", "_blank")
                    .removeAttr("onclick");
           },
    });
})