PortiBlog

Use JSLink to show Managed Metadata Path in a different way

23 januari 2015

With SharePoint 2013 you can use JSLink to render your data in a different way. In this blogpost I will focus on the rendering of the Managed Meta Data when the option Rendering Full Path is ticked

Managed Metadata field option set to full path Figure 1 - Managed Metadata field option set to full path.

When nothing is customized the Managed Meta Data with full path looks like the picture below.

Normal view from managed metadata field on an item
Figure 2 - Normal view from managed metadata field on an item.

Ok, now we know what it looks like by default in SharePoint 2013, we are creating a Javascript file to show the path in a different way. The goal is to show the managed metadata path as figure 3.


Figure 3 - New rendering managed metadata field

Ok let’s start with the code, the Javascript file looks like:


(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        "Drinks": {
            "View": multiLookupValue
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function multiLookupValue(ctx) {
    var output = [];
    var field = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var labels = field.Label.split(":");
    if (labels.length > 0) {
       for (var i = 0; i < labels.length; i++) {
          output.push(labels[i]);
          output.push('<br />');
       }
    }
    return output.join('');
}
 

Finally you can upload the Javascript file to the Style Library of your site collection. Then map your listview webpart (JSLink property) to the Javascript file from the Style Library, see figure 4.

Figure 4 - Set JSLink property in List View WebPart
Figure 4 - Set JSLink property in List View WebPart

You can also do this trick with Visual Studio, then you need to add the JSLink attribute to your custom column definition and you need to package the javascript file. Put your javascript file in the layouts folder or in the style library.

Now you know how to manipulate the rendering of a field, you can create your own javascript file. See the following links for inspiration:

Submit a comment