3

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.

4 Answers 4

8

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/

11
  • does this work for SP2013 also? Sep 30, 2014 at 5:48
  • This is just javascript, should work.
    – Aanchal
    Sep 30, 2014 at 5:50
  • Hi Aanchal, can you please tell me how do I add this code to a document library?
    – Koushik
    Sep 30, 2014 at 10:43
  • You can add this on your master page or you can use Content query editor web part.
    – Aanchal
    Sep 30, 2014 at 10:44
  • Aanchal I added a Script Editor web part to the page and added the above script. Now whenever I'm clicking a document link, instead of opening in the same (default behavior) or a new (expected behavior)tab, it is prompting me to Open or Save the document to my computer. I only want to open it in a new tab.
    – Koushik
    Sep 30, 2014 at 11:29
0

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
0

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();
0

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");
           },
    });
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.