Introduction

This JSLink sample will show how to add an icon beside confidential documents name. This icon is added to the document name based on the Confidential field (Yes/No) value.

Note: This sample is part from series of samples to learn you how to work with CSR templates.

 

How to deploy the JSLink templates

You can deploy those JSLink files in many ways, you can use OOTB, LIST schema PowerShell or code.  
I describe in the samples below how to deploy JSLink files using OOTB techniques, but if you want to know more about JSLink deployment methods, I recommend this article by Andrei Markeev. 

Before proceeding with the samples, You have to upload the JavaScript code files on your SharePoint 2013 site. You can upload to any SharePoint storage document library, _layouts folder or IIS virtual folder, But in the below deployment steps I’m supposing you will upload the JSLink-Samples folder to the site collection Style Library.

 

Screenshot

List view – Client side rendering

 

Deployment steps:

  1. Create a Documents Library
  2. Add a new column to the library: 
    • Name: Confidential
    • Type: Yes/No
  3. Edit the Default List View (All Documents) page
  4. Go to List view web-part properties and add the JSLink file (~sitecollection/Style%20Library/JSLink-Samples/ConfidentialDocuments.js) to JS link property under the Miscellaneous Tab.
  5. Click Apply button then Stop page editing.

 

JavaScript
Edit|Remove
// List view – Confidential Documents Sample 
// Muawiyah Shannak , @MuShannak 
 
(function () { 
 
    // Create object that have the context information about the field that we want to change it's output render  
    var linkFilenameFiledContext = {}; 
    linkFilenameFiledContext.Templates = {}; 
    linkFilenameFiledContext.Templates.Fields = { 
        // Apply the new rendering for LinkFilename field on list view 
        "LinkFilename"{ "View": linkFilenameFiledTemplate } 
    }; 
 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFilenameFiledContext); 
 
})(); 
 
// This function provides the rendering logic 
function linkFilenameFiledTemplate(ctx) { 
 
    var confidential = ctx.CurrentItem["Confidential"]; 
    var title = ctx.CurrentItem["FileLeafRef"]; 
 
    // This Regex expression use to delete extension (.docx, .pdf ...) form the file name 
    title = title.replace(/\.[^/.]+$/, "") 
 
    // Check confidential field value 
    if (confidential && confidential.toLowerCase() == 'yes'{ 
         
        // Render HTML that contains the file name and the confidential icon 
        return title + "&nbsp;<img src='/Style%20Library/JSLink-Samples/imgs/Confidential.png' alt='Confidential Document' title='Confidential Document'/>"; 
    } 
    else 
    { 
        return title; 
    } 
} 

What you should learn if you browse this code sample (ConfidentialDocuments.js)?

If you browse this code sample, it’s like previous sample, you will learn the basic steps to work with JS Link templates. And the code shows you how to use well-known technologies, such as HTML and JavaScript to easily customize SharePoint list views.