Custom field rendering for managed metadata fields

The JS Link property is a great addition in SharePoint 2013 that can be used to modify the rendering of SharePoint controls using a JavaScript file. This blog post will be a guide that can help you to render your managed metadata fields in a much nicer way.

Using custom properties of the managed metadata values to define the rendering properties will add some major advantages to your solution:
–– The ability to change these properties in a user-friendly way;
–– The ability to work in a multilingual environment.

You should definitely take a look at these samples if you plan to use client-side rendering (JS Link) in SharePoint 2013. I decided to extend the first sample using the custom properties of managed metadata to define the layout of my listview.

Guide:
First I created the termset “Priority”.

For each of the terms I created a custom property that will be used to specify the color.

Then I added this managed metadata field to my list. Out of the box my view will look like this:

With the code beneath, added to the JS Link of your view, the custom property will be used to display the color of the priority.

Code:

(function () {(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));// Create object that has the context information about the field that we want to change it's output rendervar priorityFilledContext = {};priorityFilledContext.Templates = {};priorityFilledContext.Templates.Fields = {// Apply the new rendering for Priority field on List View"ColoredPriority": { "View": priorityFilledTemplate}};SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFilledContext);})();var handledPriorities = [];function priorityFilledTemplate(ctx) {var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name].Label;var className = "priorityClass" + priority;// The color needs only to be set once for each term (class)if (handledPriorities.indexOf(priority) == -1) {// Getting the color from the custom taxonomy property and set it for the class.setTaxonomyColor(ctx.CurrentItem[ctx.CurrentFieldSchema.Name], className);handledPriorities.push(priority);}return "<span class='"+className+"'>" + priority + "</span>";} function setTaxonomyColor(valueObject, className) {if (valueObject && valueObject.__type == "TaxonomyFieldValue:#Microsoft.SharePoint.Taxonomy") {var context = SP.ClientContext.get_current();var session = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);var termStore = session.getDefaultSiteCollectionTermStore();var term = termStore.getTerm(valueObject.TermID);context.load(session);context.load(termStore);context.load(term, 'IsRoot', 'Id', 'Name', 'Parent', 'CustomProperties');context.executeQueryAsync(success, fail);function success() {var color = term.get_objectData().get_properties()["CustomProperties"]["Color"] != undefined ? term.get_objectData().get_properties()["CustomProperties"]["Color"] : "";$("." + className).css('color', color);}function fail() {alert("Oops...");}}}

Result:

References:
–– https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
–– http://mushannak.blogspot.be/2014/02/sharepoint-2013-client-side-rendering.html
–– http://blog.amtopm.be/about

Disclaimer:
This code is provided as is without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement. No animals were harmed during the making of this blog post.

–

–