On-Change Client Script

[Mohamed Elsayed]

Hi All,

I need to display different sets of categories based on the selected Service field. I created an on-change client script for the Service field, and it works as expected when I initially choose a specific service, showing the relevant categories. However, if I change the service field again, the categories appear blank unless I refresh the page. Any thoughts?

The on-change client script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var serviceName = g_form.getReference('business_service').name;
    var optionsToRemove = [];

    if (serviceName == 'AS HCI OS') {
        optionsToRemove = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 270, 280, 290, 300, 310, 320, 330];
    } else if (serviceName == 'AKS Hybrid') {
        optionsToRemove = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 310, 320, 330];
    } else if (serviceName == 'Windows Server Support') {
        optionsToRemove = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300];

    } else {
        optionsToRemove = [170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330];
    }

    optionsToRemove.forEach(function(option) {
        g_form.removeOption('category', option);
    });

}

[Nikhil Bajaj9 · Accepted solution]

I guess you can go with Dependent fields rather than this On change code. Dependent field should work here. 

Please mark my Answer as correct Answer and helpful if you think it helped you in anyways.

[Mohamed Elsayed]

Thanks All for your support,

As explained above the dependent field has partially resolved the issue as the relevant categories are populated based on the service configured in the dependent field but there are about 10 categories that need to be associated with more than one service. So, I created the below client script to resolve this. If you have any comments/improvements, please let me know 😊

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    //Type appropriate comment here, and begin script below
    g_form.getReference('business_service', function(reference) {
        if (reference) {
            var serviceName = reference.name;
            var validServices = ['AS HCI OS', 'AKS Hybrid', 'Windows Server Support'];
            if (!validServices.includes(serviceName)) {
                g_form.addOption('category', 10, 'Category label 1');
                g_form.addOption('category', 20, 'Category label 2');
                g_form.addOption('category', 30, 'Category label 3');
                g_form.addOption('category', 40, 'Category label 4');
                g_form.addOption('category', 50, 'Category label 5');
                g_form.addOption('category', 60, 'Category label 6');
                g_form.addOption('category', 70, 'Category label 7');
                g_form.addOption('category', 80, 'Category label 8');
                g_form.addOption('category', 90, 'Category label 9');
            }
        } else {
            g_form.addErrorMessage('Unable to retrieve business service reference.');
        }
    });
}

[Nikhil Bajaj9]

It looks good if you are able to achieve what you wanted to achieve.

Please mark my Answers as correct and Helpful, if it helped.