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.

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/

  • does this work for SP2013 also? – Hardik Kothari Sep 30 '14 at 5:48
  • This is just javascript, should work. – Aanchal Sep 30 '14 at 5:50
  • Hi Aanchal, can you please tell me how do I add this code to a document library? – Koushik Sep 30 '14 at 10:43
  • You can add this on your master page or you can use Content query editor web part. – Aanchal Sep 30 '14 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 '14 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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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