Converting taxonomy field into cascading drop down fields using PnP Branding.JsLink
Managed metadata fields don’t provide the same look and feel as choice field type. It is quick clunky specially when there are a lot of terms displayed.
The requirement cropped up to display the managed metadata fields as drop downs. After googling for a while, stumbled on PnP sample Branding.JSLink solution which had an example how to achieve it. The solution is a no code sandboxed solution with different examples how to enrich fields. I wanted only the taxonomy to cascading drop down feature.
I copied the file TaxonomyOverrides.js and ManagedMetadata.js only into the “Style Library” library in my test SharePoint Site Collection. I modified the TaxonomyOverrides.js file to refer to the field “DocumentType” I wanted transformed in the fields section.
Type.registerNamespace(‘jslinkOverride’)
var jslinkOverride = window.jslinkOverride || {};
jslinkOverride.Taxonomy = {};jslinkOverride.Taxonomy.Templates = {
Fields: {
‘DocumentType’: {
‘NewForm’: jslinkTemplates.Taxonomy.editMode,
‘EditForm’: jslinkTemplates.Taxonomy.editMode
}
}
};jslinkOverride.Taxonomy.Functions = {};
jslinkOverride.Taxonomy.Functions.RegisterTemplate = function () {
// register our object, which contains our templates
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(jslinkOverride.Taxonomy);
};
jslinkOverride.Taxonomy.Functions.MdsRegisterTemplate = function () {
// register our custom template
jslinkOverride.Taxonomy.Functions.RegisterTemplate();// and make sure our custom view fires each time MDS performs
// a page transition
var thisUrl = _spPageContextInfo.siteServerRelativeUrl + “Style Library/OfficeDevPnP/Branding.JSLink/TemplateOverrides/TaxonomyOverrides.js”;
RegisterModuleInit(thisUrl, jslinkOverride.Taxonomy.Functions.RegisterTemplate)
};if (typeof _spPageContextInfo != “undefined” && _spPageContextInfo != null) {
// its an MDS page refresh
jslinkOverride.Taxonomy.Functions.MdsRegisterTemplate()
} else {
// normal page load
jslinkOverride.Taxonomy.Functions.RegisterTemplate()
}
The DocumentType is a taxonomy field which has SharePoint OOB look and feel
After referencing the files TaxonomyOverrides.js and ManagedMetadata.js on the editform page of the document library using a script editor webpart using tags as below.
/Projects/EDRMS/Style%20Library/OfficeDevPnP/Branding.JSLink/Generics/ManagedMetadata.js
/Projects/EDRMS/Style%20Library/OfficeDevPnP/Branding.JSLink/TemplateOverrides/TaxonomyOverrides.js
Voila, the taxonomy field is transformed into cascading drop downs.
from reshmeeauckloo http://bit.ly/2qwao8c
|
You must be logged in to post a comment.