Article
4 comments

Handling field values in JSLink

Handling field values in JS Link

In this blog post I try to cover all the aspects around field values used in JSLink overrides. I recognised while working on the blog post “Bind JSLink overrides to certain web parts only” that some fields serve more information than just only the display value.

Methods to access field values

Properties in JavaScript can be accessed via the following two methods.

Another approach is the so called array notation.

Some field values require a period right after the field name. Sooner or later you will end up with a mixing of both notations in your source code. Therefor I’d recommend just to use the array notation inside your JSLink.
You can read more about property accessors on Mozilla Developer Network.

Simple Text Field

Simple text field values can be requested by simply passing the internal field name to the current item.

This applies to fields of the following types:
* Single Line of Text
* Multi Line of Text (Plain Text Configuration)
* Date
* Choice
* Calculated
* Task Outcome
Rich Text field values and Enhanced Rich Text field values can be requested the same way. The content of those fields is wrapped up in div elements. These fields also include all the html formatting tags.
To get the values as plain text the html elements first need to be removed using regular expressions.

Source: Remove/Strip Html tags Java Script

Numbers / Currency Fields

On Numbers and Currency fields you have two different properties that can be requested. The default property accessor passing the internal field name will return the formatted text.
If you add a period right after the field name the numeric value will be returned instead. This makes it easy to use for additional calculations or compression used in your JSLink.

As mentioned earlier the period right after the field name is one of the problems accessing the properties using the dot notation instead of the of array notation.

Lookup fields

Lookup fields return always the values as an array. This is independent if the field is configured for multi- or single value use. The elements of the array have two properties. The lookup Id and the display value.

Person or Group field

The base characteristics of a person or group field is the same as a lookup field. The lookup list is the user information list in each site collection.
The field values in JSLink will be returned as an array too. The array elements contain some relevant properties of the user and group. The script below lists all the available properties.

The id returned matches the id of the user information list that exists in every site collection. However, when you try to access this list directly you might have some trouble.

For performance reasons you should also consider to work with the already provided information listed above.

Managed Metadata field

Managed metadata fields only provide some basic but useful information. The values will be returned as an array too. The array elements have two properties. The Label and the TermID of the terms.

This scenario matches both. Single and Multi item fields.

Yes / No field

This field type return only the strings “Yes” or “No” via the default accessor. In German language the same request will return the string “Ja” or “Nein”. Comparison against those strings might work in some cases.
A better way to compare a “Yes/No” field is to use the numeric equivalence to the boolean. This can be requested by adding “.value” to the field name.

Hyperlink / Picture field

In general this field types use two fields to store the values that will be combined into a single string. In JSLink the JavaScript object provides access to both values independently. Passing only the field name will return only the url of the hyperlink or picture. With the appended string “.desc” the description of the web link will be returned.

Summary

I hope that I’ve provided a nearly complete overview how to handle field values in JS Link. Before you start to develop a JSLink override you should make sure to request the correct value for comparison or additional formatting.
In case you miss something important, please use the comments field below.