Introduction

Sometimes we need to allwo user to edit list item but without touch some item fields, this will enhance the form user experience (if no need to modify these filed), This JSLink sample will demonstrate how to use and utilize ready sharepoint javascript libraries to make form fileds uneditable. 

 

Note: This sample is part of a series 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

JS-Link ReadOnly

 

 

Deployment steps:

  1. Create a Task List
  2. Edit the Edit Form page
  3. Go to List Edit Form web-part properties and add the JSLink file (~sitecollection/Style Library/JSLink-Samples/ReadOnlySPControls.js) to JS link property under the Miscellaneous Tab
  4.  Click Apply button then Stop page editing
  5. Apply the previous steps on the Edit Form

 

 

JavaScript
Edit|Remove
// List add and edit – ReadOnly SP Controls 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 readonlyFiledContext = {}; 
    readonlyFiledContext.Templates = {}; 
    readonlyFiledContext.Templates.Fields = { 
        // Apply the new rendering for Age field on Edit forms 
        "Title"{ 
            "EditForm": readonlyFieldTemplate 
        }, 
        "AssignedTo"{ 
            "EditForm": readonlyFieldTemplate 
        }, 
        "Priority"{ 
            "EditForm": readonlyFieldTemplate 
        } 
    }; 
 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(readonlyFiledContext); 
 
})(); 
 
// This function provides the rendering logic 
function readonlyFieldTemplate(ctx) { 
 
    //Reuse ready sharepoint javascript libraries 
    switch (ctx.CurrentFieldSchema.FieldType) { 
        case "Text": 
        case "Number": 
        case "Integer": 
        case "Currency": 
        case "Choice": 
        case "Computed": 
            return SPField_FormDisplay_Default(ctx); 
 
        case "MultiChoice": 
            prepareMultiChoiceFieldValue(ctx); 
            return SPField_FormDisplay_Default(ctx); 
 
        case "Boolean": 
            return SPField_FormDisplay_DefaultNoEncode(ctx); 
 
        case "Note": 
            prepareNoteFieldValue(ctx); 
            return SPFieldNote_Display(ctx); 
 
        case "File": 
            return SPFieldFile_Display(ctx); 
 
        case "Lookup": 
        case "LookupMulti": 
                return SPFieldLookup_Display(ctx);            
 
        case "URL": 
            return RenderFieldValueDefault(ctx); 
 
        case "User": 
            prepareUserFieldValue(ctx); 
            return SPFieldUser_Display(ctx); 
 
        case "UserMulti": 
            prepareUserFieldValue(ctx); 
            return SPFieldUserMulti_Display(ctx); 
 
        case "DateTime": 
            return SPFieldDateTime_Display(ctx); 
 
        case "Attachments": 
            return SPFieldAttachments_Default(ctx); 
 
        case "TaxonomyFieldType": 
            //Re-use ready sharepoint inside sp.ui.taxonomy.js javascript libraries 
            return SP.UI.Taxonomy.TaxonomyFieldTemplate.renderDisplayControl(ctx); 
    } 
} 
 
//User control need specific formatted value to render content correctly 
function prepareUserFieldValue(ctx) { 
    var item = ctx['CurrentItem']; 
    var userField = item[ctx.CurrentFieldSchema.Name]; 
    var fieldValue = ""; 
 
    for (var i = 0; i < userField.length; i++) { 
        fieldValue += userField[i].EntityData.SPUserID + SPClientTemplates.Utility.UserLookupDelimitString + userField[i].DisplayText; 
 
        if ((i + 1) != userField.length) { 
            fieldValue += SPClientTemplates.Utility.UserLookupDelimitString 
        } 
    } 
 
    ctx["CurrentFieldValue"] = fieldValue; 
} 
 
//Choice control need specific formatted value to render content correctly 
function prepareMultiChoiceFieldValue(ctx) { 
 
    if (ctx["CurrentFieldValue"]) { 
        var fieldValue = ctx["CurrentFieldValue"]; 
 
        var find = ';#'; 
        var regExpObj = new RegExp(find, 'g'); 
 
        fieldValue = fieldValue.replace(regExpObj, '; '); 
        fieldValue = fieldValue.replace(/^; /g''); 
        fieldValue = fieldValue.replace(/; $/g''); 
 
        ctx["CurrentFieldValue"] = fieldValue; 
    } 
} 
 
//Note control need specific formatted value to render content correctly 
function prepareNoteFieldValue(ctx) { 
 
    if (ctx["CurrentFieldValue"]) { 
        var fieldValue = ctx["CurrentFieldValue"]; 
        fieldValue = "<div>" + fieldValue.replace(/\n/g'<br />'); + "</div>"; 
 
        ctx["CurrentFieldValue"] = fieldValue; 
    } 
}
 

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

This JSLink sample will show how to use and utilize ready sharepoint javascript libraries to make form fileds uneditable.