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. The original blogpost can be found here.
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>'));
var priorityFilledContext = {};
priorityFilledContext.Templates = {};
priorityFilledContext.Templates.Fields = {
"ColoredPriority": { "View": priorityFilledTemplate}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFilledContext);
})();
var handledPriorities = [];
function priorityFilledTemplate(ctx) {
var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name].Label;
var className = "priorityClass" + priority;
if (handledPriorities.indexOf(priority) == -1) {
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:
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.
by
Rob Lempens via Everyone's Blog Posts - SharePoint Community
No comments:
Post a Comment