Question reagarding catalog

[supriya1kum]

Suppose during the catalog making .. i have made one variable that is "Language(selectbox)" and in the language drop down we have choices like "arabic" , "swiss" , "us" .

And i have made one "Keyboard" variable also ... so if i select the "arabic" option from language drop down it should automatically generate "wired-arabic standard" and "wireless-arabic standard" in the "keyboard" drop down .

And similarly for the other options in the language drop down .

How can i do this?

Also i have chosen "keyboard" variable as a multiple choice and i have not added any option and i want to auto-generate this .

I am attaching the screenshot of this .

Please help asap .

[JenniferRah]

You can do this with a catalog client script. Set it to run onChange of the Language variable, and the code will look something like this:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (newValue == '') {
        return;
    }
    // Clear all of the choices from the Keyboard field choice list
    g_form.clearOptions('keyboard');
    g_form.addOption('keyboard', 'wired-' + newValue + " standard", 'Wired Standard');
    g_form.addOption('keyboard', 'wireless-' + newValue + " standard", 'Wireless Standard');
}

[Ashish Parab · Accepted solution]

Hi @supriya1kum you can achieve this functionality by using below onChange client script ( when language changes)

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

    // Clear existing options in the "Keyboard" field
    g_form.clearOptions('keyboard'); // Replace 'keyboard' with the actual variable name if different

    g_form.addOption('keyboard', '', '-- None --'); // Adds a "None" option at the top

    // Define keyboard options for each language
    var keyboardOptions = {
        'arabic': ['wired-arabic standard', 'wireless-arabic standard'],
        'swiss': ['wired-swiss standard', 'wireless-swiss standard'],
        'us': ['wired-us standard', 'wireless-us standard']
    };

    // Retrieve the options for the selected language
    var selectedOptions = keyboardOptions[newValue] || [];

    // Add the relevant options to the "Keyboard" variable
    selectedOptions.forEach(function(option) {
        g_form.addOption('keyboard', option, option);
    });
}

Please mark this response as Correct and Helpful if it assists you. You can mark more than one reply as an accepted solution.

Thanks,
Ashish Parab

[supriya1kum]

Thanku so much sir .. it is working fine .

I have one more thing to ask ..suppose there is only three language option that is "arabic" , "us" , "swiss" . What if it has 20 languages ? So do we have to add all 20 options like you have added in the code ? Please help :

 var keyboardOptions = {
        'arabic': ['wired-arabic standard', 'wireless-arabic standard'],
        'swiss': ['wired-swiss standard', 'wireless-swiss standard'],
        'us': ['wired-us standard', 'wireless-us standard']
    };

[Ashish Parab]

@supriya1kum Yes, you can achieve this functionality as well. Please try the script below; it works for me. Let me know if it does not work for you.

function onChange(control, oldValue, newValue, isLoading) {
    // Clear options and add only "None" when the form initially loads
    if (isLoading) {
        g_form.clearOptions('keyboard');
        g_form.addOption('keyboard', '', '-- None --');
        return;
    }
    
    // Clear existing options in the "Keyboard" field when a language is selected
    g_form.clearOptions('keyboard');
    g_form.addOption('keyboard', '', '-- None --');

    // If no language is selected, do not add any other options
    if (newValue === '') {
        return;
    }

    // Split selected languages into an array if multiple are selected
    var selectedLanguages = newValue.split(',').map(lang => lang.trim().toLowerCase());

    var selectedOptions = new Set();

    // Define a naming pattern for keyboard options based on selected languages
    selectedLanguages.forEach(function(language) {
        selectedOptions.add(`wired-${language} standard`);
        selectedOptions.add(`wireless-${language} standard`);
    });

    // Add each unique option to the "Keyboard" dropdown
    selectedOptions.forEach(function(option) {
        g_form.addOption('keyboard', option, option);
    });
}

Please mark this response as Correct and Helpful if it assists you. You can mark more than one reply as an accepted solution.

Thanks,

Ashish Parab