Issue With Catalog Client Script - Variables Not Hiding Based on Selection

tallurunand · 3 weeks ago

Hi Team,

I am facing an issue in a ServiceNow Catalog item related to dynamic variable visibility based on the "Request Reason" dropdown.

I have a variable request reason (choice field).
Based on the selected value, i need to:
show only the relevant set of variables
hide all other variables
make only the visible variables mandatory

Example:

If user selects Existing Business Partner (BAU)
Only BAU - related variables should be visible
If user selects New Existing Business Partner (PMATT)
Only PMATT - related variables should be visible.

What I Implemented

I have tried with UI Policies, but it's not worked out.
Now I am trying with client script instead of Ui policies.
Created Catalog Client Script in onChange.
The Script is working for field visibility and mandatory, but what is happing is when we select Existing Business partner and then again if we select Existing Affiliate -BAU all the variables are showing on portal.
I need suggestion how to hide the other request reason variables when we select particular request reason.
I have Attached script and Screen Short for Reference.

Portal View

function onChange(control, oldValue, newValue, isLoading) {

if (isLoading || !newValue) {

return;

}

var allFields = [

// EBP BAU

'business_partner_name_ebp_bau',

'business_partner_connection_id_ebpm_bau',

'business_partner_validation_number_ebp_bau',

'att_ip_address_of_application_and_or_device_ebp_bau',

'business_partner_network_ip_addresses_ebp_bau',

'request_summary_ebp_bau',

'detailed_description_ebp_bau',

// NBP PMATT

'business_partner_name_nbp_pmatt',

'business_partner_network_ip_addresses_nbp_pmatt',

'business_partner_validation_number_nbp_pmatt',

'pmatt_nbp_pmatt',

'request_summary_nbp_pmatt',

'detailed_description_nbp_pmatt',

//Existing Affiliate

'business_partner_name_ea_bau',

'affiliate_network_ip_addresses_ea_bau',

'att_ip_address_of_application_and_or_device_ea_bau',

'business_partner_validation_number_ea_bau',

'affiliate_connection_id_ea_bau',

'pmatt_project_manager_attuid_ea_bau',

'request_summary_ea_bau',

'detailed_description_ea_bau'

];

allFields.forEach(function(field) {

g_form.setVisible(field, false);

g_form.setMandatory(field, false);

g_form.clearValue(field);

});

switch (newValue) {

case 'existing_business_partners_bau':

g_form.setVisible('business_partner_name_ebp_bau', true);

g_form.setMandatory('business_partner_name_ebp_bau', true);

g_form.setVisible('business_partner_connection_id_ebpm_bau', true);

g_form.setMandatory('business_partner_connection_id_ebpm_bau', true);

g_form.setVisible('business_partner_validation_number_ebp_bau', true);

g_form.setMandatory('business_partner_validation_number_ebp_bau', true);

g_form.setVisible('att_ip_address_of_application_and_or_device_ebp_bau', true);

g_form.setMandatory('att_ip_address_of_application_and_or_device_ebp_bau', true);

g_form.setVisible('business_partner_network_ip_addresses_ebp_bau', true);

g_form.setMandatory('business_partner_network_ip_addresses_ebp_bau', true);

g_form.setVisible('request_summary_ebp_bau', true);

g_form.setMandatory('request_summary_ebp_bau', true);

g_form.setVisible('detailed_description_ebp_bau', true);

g_form.setMandatory('detailed_description_ebp_bau', true);

break;

case 'new_business_partner_pmatt':

g_form.setVisible('business_partner_name_nbp_pmatt', true);

g_form.setMandatory('business_partner_name_nbp_pmatt', true);

g_form.setVisible('business_partner_network_ip_addresses_nbp_pmatt', true);

g_form.setMandatory('business_partner_network_ip_addresses_nbp_pmatt', true);

g_form.setVisible('business_partner_validation_number_nbp_pmatt', true);

g_form.setMandatory('business_partner_validation_number_nbp_pmatt', true);

g_form.setVisible('pmatt_nbp_pmatt', true);

g_form.setMandatory('pmatt_nbp_pmatt', true);

g_form.setVisible('request_summary_nbp_pmatt', true);

g_form.setMandatory('request_summary_nbp_pmatt', true);

g_form.setVisible('detailed_description_nbp_pmatt', true);

g_form.setMandatory('detailed_description_nbp_pmatt', true);

break;

case 'existing_affiliate_bau':

g_form.setVisible('business_partner_name_ea_bau', true);

g_form.setMandatory('business_partner_name_ea_bau', true);

g_form.setVisible('affiliate_network_ip_addresses_ea_bau', true);

g_form.setMandatory('affiliate_network_ip_addresses_ea_bau', true);

g_form.setVisible('att_ip_address_of_application_and_or_device_ea_bau', true);

g_form.setMandatory('att_ip_address_of_application_and_or_device_ea_bau', true);

g_form.setVisible('business_partner_validation_number_ea_bau', true);

g_form.setMandatory('business_partner_validation_number_ea_bau', true);

g_form.setVisible('affiliate_connection_id_ea_bau', true);

g_form.setMandatory('affiliate_connection_id_ea_bau', true);

g_form.setVisible('pmatt_project_manager_attuid_ea_bau', true);

g_form.setVisible('request_summary_ea_bau', true);

g_form.setMandatory('request_summary_ea_bau', true);

g_form.setVisible('detailed_description_ea_bau', true);

g_form.setMandatory('detailed_description_ea_bau', true);

break;

}

Thanks in advance!

vaishali231 · 3 weeks ago

hey @tallurunand

try this :

function onChange(control, oldValue, newValue, isLoading) {

    if (isLoading) {
        return;
    }

    resetAllFields();

    if (!newValue) {
        return;
    }

    switch (newValue) {

        case 'existing_business_partners_bau':
            showFields([
                'business_partner_name_ebp_bau',
                'business_partner_connection_id_ebpm_bau',
                'business_partner_validation_number_ebp_bau',
                'att_ip_address_of_application_and_or_device_ebp_bau',
                'business_partner_network_ip_addresses_ebp_bau',
                'request_summary_ebp_bau',
                'detailed_description_ebp_bau'
            ]);
            break;

        case 'new_business_partner_pmatt':
            showFields([
                'business_partner_name_nbp_pmatt',
                'business_partner_network_ip_addresses_nbp_pmatt',
                'business_partner_validation_number_nbp_pmatt',
                'pmatt_nbp_pmatt',
                'request_summary_nbp_pmatt',
                'detailed_description_nbp_pmatt'
            ]);
            break;

        case 'existing_affiliate_bau':
            showFields([
                'business_partner_name_ea_bau',
                'affiliate_network_ip_addresses_ea_bau',
                'att_ip_address_of_application_and_or_device_ea_bau',
                'business_partner_validation_number_ea_bau',
                'affiliate_connection_id_ea_bau',
                'pmatt_project_manager_attuid_ea_bau',
                'request_summary_ea_bau',
                'detailed_description_ea_bau'
            ]);
            break;
    }
}

//  Reset everything FIRST
function resetAllFields() {
    var allFields = [
        'business_partner_name_ebp_bau',
        'business_partner_connection_id_ebpm_bau',
        'business_partner_validation_number_ebp_bau',
        'att_ip_address_of_application_and_or_device_ebp_bau',
        'business_partner_network_ip_addresses_ebp_bau',
        'request_summary_ebp_bau',
        'detailed_description_ebp_bau',

        'business_partner_name_nbp_pmatt',
        'business_partner_network_ip_addresses_nbp_pmatt',
        'business_partner_validation_number_nbp_pmatt',
        'pmatt_nbp_pmatt',
        'request_summary_nbp_pmatt',
        'detailed_description_nbp_pmatt',

        'business_partner_name_ea_bau',
        'affiliate_network_ip_addresses_ea_bau',
        'att_ip_address_of_application_and_or_device_ea_bau',
        'business_partner_validation_number_ea_bau',
        'affiliate_connection_id_ea_bau',
        'pmatt_project_manager_attuid_ea_bau',
        'request_summary_ea_bau',
        'detailed_description_ea_bau'
    ];

    allFields.forEach(function(field) {
        g_form.setDisplay(field, false);   
        g_form.setMandatory(field, false);
        g_form.clearValue(field);
    });
}

//  Show + Mandatory helper
function showFields(fields) {
    fields.forEach(function(field) {
        g_form.setDisplay(field, true);
        g_form.setMandatory(field, true);
    });
}

*************************************************************************************************************************************

If this response helps, please mark it as Accept as Solution and Helpful.
Doing so helps others in the community and encourages me to keep contributing.
Regards
Vaishali Singh

vaishali231 · 2 weeks ago

hey @tallurunand

hey

Hope you are doing well.

Did my previous reply answer your question?

If it was helpful, please mark it as correct ✓ and close the thread . This will help other readers find the solution more easily.

Regards,
Vaishali Singh

Tanushree Maiti · 3 weeks ago

Hi @tallurunand ,

In ServiceNow, it is a best practice to use UI Policies over Client Scripts whenever possible. UI Policies offer a low-code/no-code approach that is easier to maintain and faster for the browser to process.

Could you share your UI policy with its trigger condition, ui policy actions.

Please mark this response as Helpful & Accept it as solution if it assisted you with your question.
Regards
Tanushree Maiti
ServiceNow Technical Architect
Linkedin: