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
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://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/
-
-
-
Hi Aanchal, can you please tell me how do I add this code to a document library?– KoushikSep 30, 2014 at 10:43
-
You can add this on your master page or you can use Content query editor web part.– AanchalSep 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.– KoushikSep 30, 2014 at 11:29
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();
Warning:
- This sample render all items even folders (you must adapt on your context)
- If you are rendering a system column, be aware for regression
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();
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");
},
});
})