SharePoint : Clicking the icon in Type column is highlighting the item instead of launching the document
Our customer has complained that in the old SharePoint they used to have, they could click on the document Icon, and this would open the document. In a new SharePoint, click makes a selection click in the list.
So the customer really wanted us to make this icons clickable.
I have found a number of solutions, and they all were not satisfactory for me.
Official Microsoft answer:
https://support.microsoft.com/en-us/kb/2457975
suggests to change the default xsl file on the server. WE have Office 365.
One of the most interesting solutions was here
https://spdociconlink.codeplex.com
(
you do not have to install the whole solution, as the core you can find in this file
which just does a CSR override for the DocIcon field.
)
The disadvantages of this solution:
- Checkin/Checkout status is not shown. Usually there is a little override icon.
- When you have an OWA, the clicks on the documents does not open the editor, instead, the file is getting downloaded.
So I came with the solution that reuses the built-in functions, and so has all advantages of the proper icon and the opening of the OWA files.
function CustomIcon(ctx, field, listItem, listSchema) {
if (ctx.CurrentItem.FSObjType == '1') { /* a folder*/
var ret = [];
ret.push(ComputedFieldWorker.DocIcon(ctx, field, listItem, listSchema));
}
else {
var ret = [];
ret.push("<a href=\"" + ctx.CurrentItem.FileRef);
ret.push("\" onmousedown=\"return VerifyHref(this,event,'");
ret.push(listSchema.DefaultItemOpen);
ret.push("','");
ret.push(listItem["HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon"]);
ret.push("','");
ret.push(listItem["serverurl.progid"]);
ret.push("')\" ");
ret.push(">");
ret.push(ComputedFieldWorker.DocIcon(ctx, field, listItem, listSchema));
ret.push("</a>");
}
return ret.join('');
}
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = { 'DocIcon': { 'View': CustomIcon } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
Comments
- Anonymous
June 07, 2016
Where do I have put this code?- Anonymous
June 14, 2016
well you can add it into the script that you attach by jslink to the list or view, in our case the customer wanted this to be on all sites and libraries so we have added this to the master. any way that makes the script appear on your page (up to script editor web part) should be ok.
- Anonymous