Those samples help you learn how to customize a field type by using the Client-Side Rendering (also called CSR, JS Link) technology in SharePoint 2013.
JSLink files have the ability to quickly and easily change how a list views and forms are rendered. More specifically how the fields in that list should be displayed.
Note: I wrote those code samples to be easy to understand and to achieve learning purposes, because of that I avoided using complex code and controls. In the same time I tried to present real world examples as much as possible.
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.
Sample 1 (Priority color)
Let’s start with a simple example, This JSLink sample allows you to change the priority field text color based on the task priority level (High, Normal and Low).
Sample 2 (Substring long text)
Our next sample, Will show you how to make the announcements body text shorter and display the whole announcements body text as a tooltip.
Sample 3 (Confidential Documents)
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.
Sample 4 (HTML5 number input )
This JSLink sample will demonstrate how to use HTML5 input control Instead of the old HTML in SharePoint New and Edit forms.
Sample 5 (Percent Complete)
This JSLink sample will show how to add rendering logic for the Task list Percent Complete field, this code will change the file render to be displayed as a progress bar in View and Display forms, and as a scroll input in the New and Edit forms.
Sample 6 (Accordion)
This JSLink sample will show how to change rendering logic for the whole List View. This sample will read the Title and Description fields’ values and render the fields in an accordion style view.
Sample 7 (Email Regex Validator)
This JSLink sample will show how to add Regex validation to input fields inside New and Edit forms.
Sample 8 (Read- Only SP Controls)
Sample 9 (Hidden Field)
If you browse this code sample, you will learn how to use OnPostRender template functionality.
Sample 10 (Hide Empty Column)
If you look at this code sample, you will see how to create the CSR Context object, and how to access all reternd list data, then you can use the JQuery to change the view html.
Sample 11 (Form Tabs)
This is an advance sample, it will help you to learn how to create the embed css inside your CSR files.
Sample 12 (Repeater)
Sample 13 (Fully customized forms with CSRListForm)
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. .