JSLink – Using the Person Column with CSR

When starting with JSLink and CSR (Client-Side Rendering) in SharePoint 2013 one usually starts with text fields. They tend to be the most intuitive and simple. Referring to a text field looks like this:

ctx.currentItem.[internalName] like “ctx.CurrentItem.Title”

Pretty straightforward. Other fields take a little bit more poking around to figure out the correct syntax. Person fields, like a few other field types, allow for one or more values to be stored – meaning the data will be stored in an array. Because of the array, overriding Person fields looks something like this:

The name:
ctx.CurrentItem.[internalName][0].title

The email address:
ctx.CurrentItem.[internalName][0].email

For some reason, the complete list of properties that are available for my ‘Created By’ field (internal name ‘Author’ – using Name with Presence) and ‘Modified By’ field (internal name ‘Editor’) are: email, id, picture, sip, and title.

However, when I have a Person field that I manually add to the list the properties I get are: department, email, id, jobTitle, picture, sip, title. When a People field allows multiple values it also has a ‘value’ property.

I’m not sure why you get the extra properties (department,  jobTitle, and value)  in addition to the original fields. The manually added field also has the picture property populated by the data from the user profile while the Created By and Modified By fields do not. More to dig into at another time.

If the Person column does contain more than one item, you can check ctx.CurrentItem.[internalName].length and then iterate through the array for all the names, email addresses, etc.

Definitely more nitty gritty details on how these fields work. But this should get you started for now.

Leave a Reply

Your email address will not be published. Required fields are marked *