Anexinet Applications: Client-Side Rendering in SharePoint 2013

SharePoint 2013 offers Client-Side Rendering, which is a new and fairly easy way to update the way SharePoint content is rendered in your browser. In this post, we’ll take a look at how we can update a view in a Contact list by replacing the default table with an appealing unordered list. All we need is some simple HTML, CSS, and JavaScript.

Before we do anything at all, we start off with a list of items, as seen above. SharePoint creates the list with an HTML table and we want to redesign it by using and styling an unordered list like the sample below.

<p>Job Title</p>

Note: The sticky notes tutorial used as the basis for this post can be found here. (Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5)

Now that we've defined what the HTML will look like, we can create the JavaScript file that will be responsible for replacing the old table design with our defined list. We start off by creating a new JS file, and I chose to place it in the following location: /_catalogs/masterpage/Display Templates/Anexinet/StickyNotes.js

This next section shows the full contents of the JS file. We start by create a context object that we’ll use to define our template. You’ll notice that we’re replacing the header and footer with our containers which in our case are the div and ul tags. After that, we move on to defining the li tags that will be inside the header and footer. We define the Item template inside the function found at the end of this script.

// Create a context object

var stickyContext = {};

stickyContext.Templates = {};

stickyContext.Templates.Header = "<div class='sticky'><ul>";

stickyContext.Templates.Footer = "</ul></div>";

// Replace the item template with the HTML generated in the stickyTemplate function

stickyContext.Templates.Item = stickyTemplate;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(stickyContext);

// This function provides the rendering logic

function stickyTemplate(ctx) {

var name = ctx.CurrentItem["FullName"];

var jobTitle = ctx.CurrentItem["JobTitle"];

var fullEmail = ctx.CurrentItem["Email"];

var email = fullEmail.toString().replace(/<\/?a[^>]*>/g, "");

var photo = ctx.HttpRoot + '/_layouts/15/userphoto.aspx?size=L&accountname=' + email;

// Return whole item html

return "<li><img src='" + photo + "' /><a href='#'><h2>" + name + "</h2><p>" + jobTitle + "</p></a></li>";

When we inspect the stickyTemplate function, we see that we define the fields that we want to render. In this case, we want the full name, job title, and email from the contact list item.

Next, we need to format the email since the field stores an anchor tag with a mailto address. We use a regular expression to strip away the tag and return the inner text. The email address is then passed as a query string parameter to an application page that will return the person’s profile image and finally we create a simple string that pieces all of the acquired information with the html and returns it.

When an item is being rendered, this function will get called and our new html will be used in place of the default.

At this point, we’re just returning un-stylized html. We’re not going to go into the details of creating a css file to style the list items but the link provided above has a very easy to follow step by step tutorial for creating the sticky notes used in this example.

The last steps are to reference the new js and css files. I placed the css file in the Style Library and referenced it in the masterpage; however, the js file, in this example, is referenced directly inside the Contacts web part seen in the screenshot above. When you edit the page and edit the web part, you’ll need to go to the very bottom of the editor part and in the Miscellaneous category, you’ll find a JS Link section with a text box where you will provide the location of the js file. In this example, my location is the following: ~sitecollection/_catalogs/masterpage/display templates/Anexinet/StickyNotes.js

After you hit the OK button and save your changes, the web part will render using the new template that we've just defined and the end result can be seen in the following screenshots. As you can see, client-side rendering gives you the ability to dramatically change the way things are rendered in SharePoint with minimal effort and tools.