What does this solution do?

This code  adds a custom link to open a document in the browser. Before opening the document the code writes the document name to a list to track that the current user has clicked the link.

This is a basic example, and you can use it as a starting point for your custom solution.

Setup

The code

Start by adding this code to a file in the site where you plan to use the code:

/*
JSLink code to log when a Document has been opened.
--------------------------
Author: Alexander Bautz / SPJSBlog.com
*/

var spjs_currDocInfo = {};

function spjs_logLinkClick(ctx){
var a, b = "", c = "";
a = ctx.CurrentItem;
spjs_currDocInfo[a.ID] = a;
c = a.FileLeafRef.substring(a.FileLeafRef.lastIndexOf(".")+1);
b = "<a class="ms-listlink" title="Open document and log to a list that you have opened this document.">"+"<img style="height: 16px; width: 16px; border: 0; vertical-align: top; margin-right: 3px;" src="/_layouts/15/images/ic"+c+".png" alt="" />"+a.FileLeafRef+"</a>";
return b;
}

function openDocAndLog(id){
var cc = new SP.ClientContext.get_current(), list = cc.get_web().get_lists().getByTitle('DocumentsOpenedLog'), nItem = list.addItem(new SP.ListItemCreationInformation());
nItem.set_item('Title', spjs_currDocInfo[id].FileLeafRef);
nItem.update();
cc.load(nItem);
cc.executeQueryAsync(
function(sender, args) {
SP.UI.ModalDialog.commonModalDialogOpen(_spPageContextInfo.webAbsoluteUrl+"/_layouts/15/WopiFrame.aspx?sourcedoc="+spjs_currDocInfo[id].UniqueId+"&action=interactivepreview",{"allowMaximize":true,"showMaximized":true,"showClose":true});
},
function(sender, args) {
alert('Error: ' + args.get_message());
}
);
}

var spjsOpenDocument = {};
spjsOpenDocument.Templates = {};
spjsOpenDocument.Templates.Fields = {
"SPJS_DocLink": {
"View":function(ctx){return spjs_logLinkClick(ctx);}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(spjsOpenDocument);

Add field to document library

Then you must add a new field to the document library named “SPJS_DocLink”. This is a calculated column with a blank formula:

=""

When the column has been created, you can rename it to for example “Open document with tracking”.

Add the field to the list view, and remove the “Name” column to prevent the users from opening the document with another method

Add JSLink scrip to the field

Use the Field JSLink too for SharePoint 2013 tool for setting the link to the JSlink file in the current field.

The path to use is the site relative path to the file you stored the above code example in. Use this format:

~site/DocLib/FileName.js

Add the list for logging the opening of documents

You must add a list to store log of the opened documents. This list must be placed in the same site as your document library.

The list must be named “DocumentsOpenedLog” as this is the name used in the code example. If you decide to change the display name of this list, you need to modify the code to use the new name.

In this example, the only field used in the “DocumentsOpenedLog” list is the Title. Therefore it is not necessary to add any more fields to this list.

Test the link

Go to your list view and click the link in the new field. The document should open in a dialog, and the “DocumentsOpenedLog” should show a new record with the document name in the “Title” field, and the name of the current user in the “Created by” field.

Discuss this code example in the forum

Alexander