Taxonomy Field - Cascading Dropdowns using JSLink

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);
}