The standard SharePoint rendered views generally score low for originality with limited points for user-experience. The following is an example of a standard list view, which is a table structure with text-based field values.

What if we add a little style to represent the Approval Status column? We can override the standard field control rendering and inject our own client-side logic. This can be accomplished using HTML and JavaScript technologies with the SharePoint 2013 client-side rendering feature. So…let’s look at a simple style enhancement to the above list view and Approval Status column.

This is a very simple change, which utilizes color (red, yellow and green) and a minor value change (Approved is now Live) to improve the view. At a glance, the user can associate the color with the status using the common traffic stop light palette. So…let’s look at the changes required to implement the rendering logic.

 First, we can create the rendering logic.

 Javascript |  copy code |? 
01
(function () {
02
    var fieldContext = {}; 
03
    fieldContext.Templates = {}; 
04
    fieldContext.Templates.Fields = { 
05
        "_ModerationStatus": { "View": approvalStatusFieldTemplate, "ViewForm": approvalStatusFieldTemplate }
06
    };
07
 
08
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext); 
09
 
10
})(); 
11

This function contains the field context and registers the templates. The key is fields and _ModerationStatus, which is the internal field name for Approval Status. You can include templates for View, DisplayForm, EditForm and NewForm. In this example, the View and ViewForm templates are defined to call the approvalStatusFieldTemplate function.

 Javascript |  copy code |? 
01
function approvalStatusFieldTemplate(ctx) { 
02
 var approvalStatus = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
03
 
04
    switch (approvalStatus) { 
05
        case "Draft": 
06
            return "<span style='color:red'><strong>" + approvalStatus + "</strong></span>"; 
07
            break; 
08
        case "Scheduled": 
09
            return "<span style='color:orange'><strong>" + approvalStatus + "</strong></span>"; 
10
            break; 
11
        case "Approved": 
12
            return "<span style='color:green'><strong>Live</strong></span>";
13
 }
14
 
15
 return approvalStatus; 
16
}
17

This function will return the injected mark-up for the target field. The first statement assigns the current field value to approvalStatus. Next, a switch statement returns a span element with the appropriate style color. The result is a colorized value based on the approval status.

The next example replaces the text value with an image, which also represents the approval status. The result is mark-up to render an image with the approval status value as a tooltip.

The following is the modified approvalStatusFieldTemplate function. In this example, we are borrowing a few SharePoint provided images.

 Javascript |  copy code |? 
01
function approvalStatusFieldTemplate(ctx) { 
02
 var approvalStatus = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
03
 var icon;
04
 
05
    switch (approvalStatus) { 
06
        case "Draft": 
07
            icon = "hlthwrn.png"; 
08
            break; 
09
        case "Scheduled": 
10
            icon =  "calendar.gif"; 
11
            break; 
12
        case "Approved":
13
            icon = "hlthsucc.png";
14
            break;
15
        default:
16
            icon = "hltherr.png";
17
    }
18
 
19
    return "<img src='/_layouts/15/images/" + icon + "' title='" + approvalStatus + "'/>";
20
}
21

The client-side rendering is also referred to as JSLink, since this is the new property that instructs the field rendering process to replace the result using the JavaScript contained in the JSLink resource. The following PowerShell script will assign the JSLink value to the JavaScript file containing our rendering logic for the Approval Status field.

 DOS |  copy code |? 
1
$web = Get-SPWeb http://myserver
2
$field = $web.Fields["Approval Status"]
3
$field.JSLink = "~layouts/15/ApprovalStatusViewDecorate.js"
4
$field.Update($true)
5

If you would like to explore client-side rendering for your sites then I would recommend additional tutorials. This should include handling multiple instances of the field on a page, which would cause issues without additional configuration. The following are a few helpful resources:

Good Examples

Good Overview

This new powerful feature will provide another tool to improve the user experience with endless possibilities. I hope this information provides a quick start for SharePoint 2013 Client-side rendering.