With JSLink you have the ability to quickly and easily change how a list views and forms are rendered. In this example I will explain how to change a field or fields located in the view, display, new or edit forms. The advantage of only changing the look and feel of specific fields is that all the default features and functions will remain functional. For example paging will still work and you will not need to create custom paging.

Solution

In this solution I will change the look and feel of the default % complete column.

1. Create a custom SharePoint list called Progress Example.
2. Add the default % complete column.
3. Save the JSLink Percentage Complete to SharePoint.
4. Link the JSLink to the form on new, edit, display and view web parts.
5. The view and display form will be shown as a progress bar with the exact number shown.
   
6. The edit en new forms will be shown as a progress bar that you change with the exact number shown.
   

Explanation

1. The JSLink overrides the default rendering of the percentage complete (% complete) column.
2. Each column and form that needs a different rendering needs to be linked to the new render function.
   You can link multiple forms to one function.
3. In the following code the view and display column are linked to the same function called percentCompleteViewDisplayFiledTemplate.
4. The edit and new form are linked to the function called percentCompleteEditFiledTemplate.

   (function  ()  
       // Create object that have the context information about the field that we want to change it's output render  
      var overrideNameField  =  {};  
      overrideNameField.Templates  =<  {};  
      overrideNameField.Templates.Fields  =  {  
           // Apply the new rendering for Priority field on List View 
           "PercentComplete": {    "View": percentCompleteViewDisplayFiledTemplate,
                                   "EditForm": percentCompleteEditFiledTemplate,
                                   "NewForm": percentCompleteEditFiledTemplate,
                                   "DisplayForm": percentCompleteViewDisplayFiledTemplate
           }
        };  
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideNameField);
   })(); 
   

5. In the functions you can rewrite how the column is rendered.
6. The function percentCompleteEditFiledTemplate rewrites the rendition.

   // This function provides the rendering logic for New and Edit forms for percentage complete column
   function percentCompleteEditFiledTemplate(ctx) { 
    
     var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); 
    
       // Register a callback just before submit. 
       formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
           return document.getElementById('inpPercentComplete').value; 
       }); 
    
       return "<input type='range' id='inpPercentComplete' name='inpPercentComplete' min='0' max='100' oninput='outPercentComplete.value=inpPercentComplete.value' value='" + formCtx.fieldValue + "' /> <output name='outPercentComplete' for='inpPercentComplete' >" + formCtx.fieldValue + "</output>%"; 
   } 
   

7. The result is an input slide bar instead of the default text box.
   

When you use JSLink not all default SharePoint list features will be generated automaticly, for example paging will not be available. When you require paging you need to code this yourself. In this example I will create an example list with no custom styling besides the custom paging.

Solution

1. Create a custom list called Paging Example with a title field.
2. If required changed the fields to be shown.
3. Create a page and add the Paging Example web part to the page.
4. Create the JSLink file called BasicPaging.js
5. Link the JSLink to the web part to load the BasicPaging.js

Explanation

1. The JSLink overrides the default Templates (Header, Item and Footer).
2. The paging has been added to the Footer template.
3. The following variables are used to get the first and last row and the previous and next hyperlinks.

   var firstRow = ctx.ListData.FirstRow;
   var lastRow = ctx.ListData.LastRow;
   var prev = ctx.ListData.PrevHref;
   var next = ctx.ListData.NextHref;
   

4. The following code will render the paging are required and uses the default SharePoint classes and images.

   var footerHtml = "<div class='Paging'>";
   footerHtml += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
   footerHtml += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
   footerHtml += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
   footerHtml += "</div>";
   footerHtml += "</div>";
   return footerHtml;