Read my first two post in order to get basics idea on Client Side rendering using JSLink.
- Client Side Rendering using JSLink – Post 01 – Starting Over
- Client Side Rendering using JSLink – Post 02 – Customize List Forms
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.
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.
Overrides the Header of the list instance. The header area is described by the below image.
We can add a footer in the list instance.
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.
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.
Overrides the body.
The Item template points to the function that displays each Item in the list.
OnPreRender event fires before the DOM is loaded. In my example I will show how to set a custom list name.
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.