How to hide choices of fields

ClayS · ‎01-22-2025

Hello, I want to hide some choices but don't want to delete them.
Because some choice type fields are configrated to have dependencies.
Ex) [field_1]-choice_a, choice_b, choice_c
[field_2]-choice_d, choice_e *They will appear if choice_a are selected in [field_1].

Currently there are too many choices in one field and I would like to reduce them.
If you know how to make some of the choices invisible, please help me.
Thank you.

Juhi Poddar · ‎01-22-2025

Hello @ClayS

To meet the requirement, write an onChange client script on field_1.

onChange Script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return; // Do nothing if the form is loading or the field is empty
    }

    // Clear the options in field_2 to reset it
    g_form.clearOptions('field_2');

    // Check the value of field_1 and dynamically add options to field_2
    if (newValue === 'choice_a') {
        // Add the dependent options for choice_a
        g_form.addOption('field_2', 'choice_d', 'Choice D');
        g_form.addOption('field_2', 'choice_e', 'Choice E');
    } else if (newValue === 'choice_b') {
        // Add other dependent options for choice_b if needed
        g_form.addOption('field_2', 'choice_f', 'Choice F');
        g_form.addOption('field_2', 'choice_g', 'Choice G');
    } else {
        // Add a default placeholder if no matching options
        g_form.addOption('field_2', '', '-- Select an option --');
    }
}

Note: Update the option value and label as it is configured in your instance.

Refer the link to learn more about dynamically populating the choices

Using the g_form.addOption method

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps future readers to locate the solution easily and supports the community!"

Thank You
Juhi Poddar

View solution in original post

maheshkhatal · ‎02-14-2025

Hi @Arun kumar Chin ,

Kindly go through the code given below :

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

    var devices = g_form.getValue('devices');
    var placeField = 'place'; //Add proper backend/column field name from your instance configuration

    // Clear all options first
    g_form.clearOptions(placeField);

    // Add options based on the selected device
    if (devices === 'Mouse') {
        g_form.addOption(placeField, 'Kerala', 'Kerala');
        g_form.addOption(placeField, 'Bangalore', 'Bangalore');
    } else if (devices === 'Keyboard') {
        g_form.addOption(placeField, 'Hyderabad', 'Hyderabad');
        g_form.addOption(placeField, 'Pune', 'Pune');
        g_form.addOption(placeField, 'Uttar Pradesh', 'Uttar Pradesh');
    } else {
        // If no specific device is selected, add all options (or handle as needed)
        g_form.addOption(placeField, 'Kerala', 'Kerala');
        g_form.addOption(placeField, 'Bangalore', 'Bangalore');
        g_form.addOption(placeField, 'Hyderabad', 'Hyderabad');
        g_form.addOption(placeField, 'Pune', 'Pune');
        g_form.addOption(placeField, 'Uttar Pradesh', 'Uttar Pradesh');
    }
}

Explanation:

Clear Options: The g_form.clearOptions(placeField) method clears all options in the 'place' field. This ensures that no stale options remain.
Add Options: Based on the selected device, the appropriate options are added back to the 'place' field using g_form.addOption().
Default Case: If no specific device is selected, you can add all options back or handle it as per your requirements.

This should work now otherwise update here if you are still facing troubles. Mark me response as Helpful if it is helped you.

Thank you,

Mahesh.