Category Archives: SharePoint 2013

One function that SharePoint Designer (pre-2013) was great for was doing some quick formatting changes to views – tweaks not available through normal view configuration. This example shows how you can implement simple changes to the field formatting using SharePoint 2013’s new JS Link property and Client-Side Rendering (CSR) – though some simple JavaScript.

Looking at an Issues app (list), we’ve got a ‘Issue Status’ field that we’d like to show as bold. Here’s how it looks in it’s native default view:

In order to override how a field is displayed (or ‘rendered’ – the ‘R’ in ‘CSR’) you need to create a JavaScript file that defines the Field Override we’re using. The full contents are shown here:

Much of this code is boilerplate. The key line in this is:
’Status’:{‘View’: ‘<b><#=ctx.CurrentItem.Status#></b>’}

and it breaks down like this:

• ’Status’:{‘View’: ‘<b><#=ctx.CurrentItem.Status#></b>’}
  ’Status’ is the column in the view being overridden.
• ’Status’:{‘View’: ‘<b><#=ctx.CurrentItem.Status#></b>’}
  ’View’ is the type of page
• ’Status’:{‘View’: ‘<b><#=ctx.CurrentItem.Status#></b>’}
  This is the HTML string that is constructed to replace the current contents of the column. The ctx.CurrentItem.[InternalFieldName] is referring to the column value of the item. This is where things can get as complicated as you want to make them by building more complex strings, combining field values much like a calculated field but using JavaScript instead of the Calculated Field type.

As mentioned in my other posts, you need to use the internal field name when referencing it in the code. You can find this in a number of ways but the easiest for me is to look at the list settings and click on the field name you’re looking at. The URL will show the internal name in the string (example shown below). With this particular example we can see in the Columns listing that the field is referred to as ‘Issue Status’, but that the internal name is actually ‘Status’.

https://yourdomain.com/sites/CSR/_layouts/15/FldEdit.aspx?List…&Field=Status

Upload the JavaScript file to the Master Page Gallery (yes, you can use alternate locations…).

For this example, I created a page in my Site Pages app (library) and added an App Part to the page for the ‘Office Issues’ app that I had created. I left the web part using the default view (shown above).

Note: Technically, you can edit the web part on the actual view page, but I don’t generally like to do that unless there is a really good use-case for it. It can be confusing to users and administrators.

On the page that was created, edit the page and edit the web part. At the far bottom of the web part properties is the JS Link property. Put your file name in the field and click ‘OK’.

~site/_catalogs/masterpage/[yourFileName].js

As soon as you hit ‘OK’, if all the parts are connected your override should be in place and the view should change to reflect your change.

Notes to remember:

• You aren’t changing the view itself. If you go to the list and look at the view, it will not reflect your CSR. Only the page where you are applying the CSR will show your changes.
• If you want to override more than one field, the code looks like the following:
  

If you’d like to walk through a simple ‘Hello World’ example to make sure your file is in the right place and your JS Link property is properly set take a look at the following posts:

• JS Link – Hello World
• JS Link – Functional Primer