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”.

Managed Metadata

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

Custom Properties

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

List view

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.

JS Link

Code:

/*****************************************************
* List View – Managed Metadata Priority Color Sample *
* Authors: Rob Lempens + Wouter Laureys  (Spikes NV) *
*****************************************************/

(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 render
    var 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:

ClientSideRenderingResult


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.


Rob Lempens

Rob Lempens

Code Ninja @ Spikes

Advertisements