Taxonomy Field - Cascading Dropdowns using JSLink
var globalORGValue ="";
var globalOriginalORGValue = "";
(function () {
// Create object that have the context information about the field that we want to change it's output render
var ORGFiledContext = {};
ORGFiledContext.Templates = {};
ORGFiledContext.OnPostRender = OnPostRender
ORGFiledContext.Templates.Fields = {
// Apply the new rendering for Age field on New and Edit forms
"BusinessTitle": {
"NewForm": businessFiledTemplate,
"EditForm": businessFiledTemplate
},
"CompanyTitle": {
"NewForm": CompanyFiledTemplate,
"EditForm": CompanyFiledTemplate
},
"DepartmentTitle": {
"NewForm": departmentFiledTemplate,
"EditForm": departmentFiledTemplate
},
"ORGBusiness": {
"NewForm": ORGbusinessFiledTemplate,
"EditForm": ORGbusinessFiledTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ORGFiledContext);
})();
function OnPostRender(ctx) {
}
function ORGbusinessFiledTemplate(ctx) {
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
globalOriginalORGValue = ctx.CurrentFieldValue;
// Register a callback just before submit.
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
if(globalORGValue !="")
return globalORGValue;
else
return globalOriginalORGValue;
});
return SP.UI.Taxonomy.TaxonomyFieldTemplate.renderDisplayControl(ctx);
}
// This function provides the rendering logic
function businessFiledTemplate(ctx) {
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
// Register a callback just before submit.
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
if(document.getElementById(formCtx.fieldName + "_control").selectedIndex == -1 )
return "";
else
return document.getElementById(formCtx.fieldName + "_control").options[document.getElementById(formCtx.fieldName + "_control").selectedIndex].text;
});
// Instead of hardcoding the field value, we can fetch it from the context
var fieldInternalName = ctx.CurrentFieldSchema.Name;
var controlId = fieldInternalName + "_control";
// Initialization of the field: here I'm attaching onchange event to my control,
// so that whenever text is changed, FormContext.updateControlValue is executed.
ctx.FormContext.registerInitCallback(fieldInternalName, function () {
$addHandler($get(controlId), "change", function (e) {
// ctx.FormContext.updateControlValue(fieldInternalName, $get(controlId).value);
// alert("x_Handler for .change() called. with " + $(this).val());
var _ORG =document.getElementById("BusinessTitle_control").options[document.getElementById("BusinessTitle_control").selectedIndex];
globalORGValue = _ORG.text + "|" + _ORG.value;
LoadInit("CompanyTitle_control", $(this).val(), ctx.ListData.Items[0], 2);
});
//Hardcode your First Termset (should be parent for all) GUID
LoadInit(controlId, '745193dc-65db-437d-8a3b-af3695924296', ctx.ListData.Items[0], 1);
});
// Render Html5 input (number)
return "<select id='" + controlId + "' ><option>Loading...</option></select>";
}
function CompanyFiledTemplate(ctx) {
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
// Register a callback just before submit.
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
if(document.getElementById(formCtx.fieldName + "_control").selectedIndex == -1 )
return "";
else
return document.getElementById(formCtx.fieldName + "_control").options[document.getElementById(formCtx.fieldName + "_control").selectedIndex].text
});
// Instead of hardcoding the field value, we can fetch it from the context
var fieldInternalName = ctx.CurrentFieldSchema.Name;
var controlId = fieldInternalName + "_control";
// Initialization of the field: here I'm attaching onchange event to my control,
// so that whenever text is changed, FormContext.updateControlValue is executed.
ctx.FormContext.registerInitCallback(fieldInternalName, function () {
$addHandler($get(controlId), "change", function (e) {
// ctx.FormContext.updateControlValue(fieldInternalName, $get(controlId).value);
//alert("x_Handler for .change() called. with " + $(this).val());
var _ORG =document.getElementById("CompanyTitle_control").options[document.getElementById("CompanyTitle_control").selectedIndex];
globalORGValue = _ORG.text + "|" + _ORG.value;
LoadInit("DepartmentTitle_control", $(this).val(),ctx.ListData.Items[0], 3);
});
});
// Render Html5 input (number)
return "<select id='" + controlId + "' ><option></option></select>";
}
function departmentFiledTemplate(ctx) {
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
// Register a callback just before submit.
formCtx.registerGetValueCallback(formCtx.fieldName, function () {
if(document.getElementById(formCtx.fieldName + "_control").selectedIndex == -1 )
return "";
else
return document.getElementById(formCtx.fieldName + "_control").options[document.getElementById(formCtx.fieldName + "_control").selectedIndex].text;
});
// Instead of hardcoding the field value, we can fetch it from the context
var fieldInternalName = ctx.CurrentFieldSchema.Name;
var controlId = fieldInternalName + "_control";
ctx.FormContext.registerInitCallback(fieldInternalName, function () {
$addHandler($get(controlId), "change", function (e) {
// ctx.FormContext.updateControlValue(fieldInternalName, $get(controlId).value);
//alert("x_Handler for .change() called. with " + $(this).val());
if(document.getElementById("DepartmentTitle_control").selectedIndex!=0)
{
var _ORG =document.getElementById("DepartmentTitle_control").options[document.getElementById("DepartmentTitle_control").selectedIndex];
globalORGValue = _ORG.text + "|" + _ORG.value;
}
else
{
globalORGValue ="";
}
});
});
// Render Html5 input (number)
return "<select id='" + controlId + "' value='" + formCtx.fieldValue + "'><option></option></select>";
}
function LoadInit(_elementId, _navTermSetId, _item, _level) {
//alert(_navTermSetId);
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
var elementId = "#" + _elementId;
SP.SOD.registerSod('jquery.js', '//' + document.location.hostname + '/Style%20Library/js/jquery-3.2.1.min.js');
SP.SOD.executeFunc('jquery.js', 'jQuery', function () {
SP.SOD.registerSod('sp.taxonomy.js', SP.Utilities.Utility.getLayoutsPageUrl('sp.taxonomy.js'));
SP.SOD.executeFunc('sp.taxonomy.js', 'SP.Taxonomy.TaxonomySession', function () {
SP.SOD.registerSod('sp.publishing.js', SP.Utilities.Utility.getLayoutsPageUrl('sp.publishing.js'));
SP.SOD.executeFunc('sp.publishing.js', 'SP.Publishing.Navigation.NavigationTermSet', function () {
var navTermSetId = _navTermSetId;
loadNavigationTermSet(navTermSetId,
function (terms) {
$(elementId).empty();
var html = "<option></option>";
var html2 = "<option></option>";
var termEnumerator = terms.getEnumerator();
while (termEnumerator.moveNext()) {
var currentTerm = termEnumerator.get_current();
// To check is any term is deprecated or not
var strDeprecate='';
if(currentTerm.get_isDeprecated()==true)
{
// to disable Deprecated item in Dropdown list
strDeprecate='disabled="disabled"';
}
if (currentTerm.get_isSourceTerm() == true) {
html += "<option value='" + currentTerm.get_id() + "' " +strDeprecate+ " ";
html += ">" + currentTerm.get_name() + "</option>";
} else {
html2 += "<option value='" + currentTerm.get_id() + "' " +strDeprecate+ " ";
html2 += ">" + currentTerm.get_name() + "</option>";
}
}
console.log(html);
// if(elementId != "#RecordType_control")
$(elementId).append(html);
var selectedItemGUID;
var selectedItemFound = false;
var _fieldValue = "";
if(_level == 1)
{
if(_item.BusinessTitle!="" && _item.BusinessTitle!=null)
_fieldValue = _item.BusinessTitle;
else
_fieldValue = globalMyProfile.Business;
}
if(_level == 2)
{
if(_item.CompanyTitle!="" && _item.CompanyTitle!=null)
_fieldValue = _item.CompanyTitle;
else
_fieldValue = globalMyProfile.Company;
$("#DepartmentTitle_control").empty();
}
if(_level == 3)
{
_fieldValue = _item.DepartmentTitle;
}
if(_level == 4)
{
_fieldValue = _item.RecordType;
}
if (_fieldValue != "") {
$(elementId + ' option')
.filter(function (i, e) {
if ($(e).text() == _fieldValue) {
selectedItemGUID = $(e)[0].value;
selectedItemFound = true;
}
return $(e).text() == _fieldValue;
}).attr('selected', 'selected');
if(selectedItemFound )
{
if( elementId == "#BusinessTitle_control")
LoadInit("CompanyTitle_control",selectedItemGUID ,_item,2);
if( elementId == "#CompanyTitle_control")
LoadInit("DepartmentTitle_control",selectedItemGUID ,_item,3);
}
}
},
function (sender, args) {
console.log('Request failed ' + args.get_message() + ':' + args.get_stackTrace());
}
);
});
});
});
});
}
function loadNavigationTermSet(navTermSetId, success, error) {
var ctx = SP.ClientContext.get_current();
console.log(navTermSetId)
var taxonomySession = SP.Taxonomy.TaxonomySession.getTaxonomySession(ctx);
var termStores = taxonomySession .get_termStores();
termStore = termStores.getByName("Managed MetaData Service ORG");
var groups = termStore.get_groups()
var group = groups.getByName("ORGMMSBusiness") ;
var termSets = group.get_termSets()
termSet = termSets.getByName("ORGBusiness")
var term = termSet.getTerm(navTermSetId);
var terms = term.get_terms();
ctx.load(terms);
ctx.executeQueryAsync(function () {
success(terms);
},
error);
}
