Client Side Rendering using JSLink – Post 03 – Properties to override

In last two post we discussed basics on JSLink. Now lets look bit deeper. In this post I will illustrate; what are the fields we can override and use in template. I will give you examples for each and every property. Below are the properties that we can use to override in our custom template.

• Header
• Footer
• View
• Body
• Group
• Item
• Fields
• OnPreRender
• OnPostRender

I have created an announcement list instance in order to illustrate the examples. My list instance displays as follows. Please note that I have grouped the list items by Created.

I have linked my JavaScript file for the above list instance. Now lets get into the examples.

Header

Overrides the Header of the list instance. The header area is described by the below image.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.  
6.     // Change the header
7.     overrideCtx.Templates.Header = "<b>This is a custom header</b>";
8.  
9.     // Register the template overrides.
10.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
11. })();

Results

Footer

We can add a footer in the list instance.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.  
6.     // Change the footer
7.     overrideCtx.Templates.Footer = "<b>This is a custom footer</b>";
8.  
9.     // Register the template overrides.
10.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
11. })();

Results

Fields

Visit my first blog post and see the example. You can understand how to override the fields. If you want to retrieve the actual value of a field you can retrieve by  “<#= ctx.CurrentItem.FieldName#>” or by ctx.CurrentItem.FieldName.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.  
6.     overrideCtx.Templates.Fields = {
7.         'Body': { 'View': '<div style="color:red; background-color: green"><#= ctx.CurrentItem.Body #></div>' }
8.     };
9.  
10.     // Register the template overrides.
11.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
12. })();

Results

Group

Overriding Group takes 7 parameters. Using those parameters you can change the look and feel of the group. I will just show you a basic.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.  
6.     overrideCtx.Templates.Group = customGroup;
7.     // Register the template overrides.
8.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
9. })();
10.  
11. function customGroup(ctx, group, groupId, listItem, listSchema, level, expand) {
12.     var html = '<div style="color:red">' + listItem[group] + ' </div>';
13.     return html;
14. }

Results

Body

Overrides the body.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.  
6.     overrideCtx.Templates.Body = customBody;
7.     // Register the template overrides.
8.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
9. })();
10.  
11. function customBody(ctx) {
12.  
13.     return String.format("Hello world from {0}", ctx.ListTitle);
14.  
15. }

Results

 

Item

The Item template points to the function that displays each Item in the list.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.    
6.     overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
7.         "<ul>";
8.  
9.     // This template is assigned to the CustomItem function.
10.     overrideCtx.Templates.Item = customItem;
11.     overrideCtx.Templates.Footer = "</ul>";
12.  
13.  
14.  
15.     // Register the template overrides.
16.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
17. })();
18.  
19. // This function builds the output for the item template.
20. // It uses the context object to access announcement data.
21. function customItem(ctx) {
22.     // Build a listitem entry for every announcement in the list.
23.     var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
24.     return ret;
25. }

Results

OnPreRender

OnPreRender event fires before the DOM is loaded. In my example I will show how to set a custom list name.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.  
6.     //Over ride the header
7.     overrideCtx.Templates.Header = "<#=ctx.ListTitle#>";
8.  
9.     //Set the List title on pre render event
10.     overrideCtx.OnPreRender = function a() {
11.         ctx.ListTitle = "Title from PreRender";
12.     };
13.  
14.     // Register the template overrides.
15.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
16. })();

Results

 

OnPostRender

OnPostRender event fires after DOM is loaded. So you can change the values after DOM load. Here in our example I have changed the background color.

Code

1. (function () {
2.     // Initialize the variable that stores the objects.
3.     var overrideCtx = {};
4.     overrideCtx.Templates = {};
5.     //OnPostRender call postRenderHandler function.
6.     overrideCtx.OnPostRender = postRenderHandler;
7.  
8.     // Register the template overrides.
9.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
10. })();
11. function postRenderHandler(ctx) {
12.     var rows = ctx.ListData.Row;
13.     for (var i = 0; i < rows.length; i++) {
14.         var isApproved = rows[i]["Title"] == "Title 001";
15.         if (isApproved) {
16.             var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
17.             var tr = document.getElementById(rowElementId);
18.             tr.style.backgroundColor = "#ada";
19.         }
20.     }
21. }

Results

 `

Conclusion

So the basics are covered and if you are familiar with JavaScript and CSOM you can do more on Client side rendering with JSLink.  In future posts I will show some examples how you can use client side rendering.