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 (see figure 1).

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:

Neem contact op

Coltbaan 4E
3439 NG Nieuwegein

+31 (0)85 - 489 1008

Meer informatie?

%d bloggers like this: