Introduction

This Client side rendering code sample will help you to work with CSRListForm and build your sharepoint list forms form scratch and use any form layout and design that you want. 

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 (Two Columns form)

 

Deployment steps:

  1. Create a Custom list
  2. Add some columns to the list, for my exampe I use the following:
    1. Name: Date, Type: date and time
    2. Name: Category, Type: Choice 
    3. Name: Active, Type: Yes/No
  3. Uplaod the FullyCustomizedForm.js file to the document library
  4. Edit List Form page 
  5. Go to List view web-part properties and add the JSLink file (~sitecollection/Style Library/JSLink-Samples/FullyCustomizedForm.js) to JS link property under the Miscellaneous Tab.   
  6. CHange Form Template Name to CSRListForm

7.  Click Apply button then Stop page editing.

 

JavaScript
Edit|Remove
// List Forms – User CSRListForm Server Tempalte 
// Muawiyah Shannak , @MuShannak  
  
(function () {  
  
    // Create object that have the context information about the field that we want to change it's output render   
    var formTemplate = {}; 
    formTemplate.Templates = {}; 
    formTemplate.Templates.View = viewTemplate; 
  
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate); 
  
})();  
  
// This function provides the rendering logic for the Custom Form 
function viewTemplate(ctx) { 
     
    var formTable = "".concat("<table width='100%' cellpadding='5'>", 
                                    "<tr>", 
                                        "<td><div>Title</div></td>", 
                                        "<td><div>{{TitleCtrl}}</div></td>", 
                                        "<td><div>Date</div></td>", 
                                        "<td><div>{{DateCtrl}}</div></td>", 
                                    "</tr>", 
                                    "<tr>", 
                                        "<td><div>Category</div></td>", 
                                            "<td><div>{{CategoryCtrl}}</div></td>", 
                                        "<td><div>Active</div></td>", 
                                        "<td><div>{{ActiveCtrl}}</div></td>", 
                                    "</tr>", 
                                    "<tr>", 
                                        "<td></td>", 
                                        "<td><input type='button' value='Save' onclick=\"SPClientForms.ClientFormManager.SubmitClientForm('{{FormId}}')\" style='margin-left:0' ></td>", 
                                    "</tr>", 
                              "</table>"); 
 
     
    //Replace the tokens with the default sharepoint controls 
    formTable = formTable.replace("{{TitleCtrl}}", getSPFieldRender(ctx, "Title")); 
    formTable = formTable.replace("{{DateCtrl}}", getSPFieldRender(ctx, "Date")); 
    formTable = formTable.replace("{{CategoryCtrl}}", getSPFieldRender(ctx, "Category")); 
    formTable = formTable.replace("{{ActiveCtrl}}", getSPFieldRender(ctx, "Active")); 
    formTable = formTable.replace("{{FormId}}", ctx.FormUniqueId); 
 
    return formTable; 
} 
 
//This function code set the required properties and call the OOTB (default) function that use to render Sharepoint Fields  
function getSPFieldRender(ctx, fieldName) 
{ 
    var fieldContext = ctx; 
 
    //Get the filed Schema 
    var result = ctx.ListSchema.Field.filter(function( obj ) { 
        return obj.Name == fieldName; 
    }); 
 
    //Set the field Schema  & default value 
    fieldContext.CurrentFieldSchema = result[0]; 
    fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName]; 
 
    //Call  OOTB field render function  
    return ctx.Templates.Fields[fieldName](fieldContext); 
} 

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

This is an advance sample, it will help you to learn how to create Fully customized forms and how to use CSRListForm template.