Dynamically show/hide characteristic (option)

[bmedic]

Hi all,

I am looking at the options to dynamically show/hide characteristic and/or characteristic options based on the other characteristic values chosen.

Imagine scenario:

I am selling mobile phones, Mobile phone 1 and Mobile phone 2. 

In the runtime (configurator), when the Mobile phone 1 option is selected,  256GB, 512GB, and 1TB storage options are available. But if I choose Mobile phone 2, only 512GB and 1TB storage options should be available.

The idea is that characteristic option values are dynamically filtered based on the previous selection.

Or even hide the entire characteristic from the configurator form (based on the previous selection).

Is that possible in any way?

Thanks in advance.

[Collin Romeijn]

Hi,

If you are talking about catalog items, you can use an onchange client script with the g_form.removeoption() or g_form.addoption() operator based on specific if statements.

GlideForm - Client

Kind regards,

Collin

[Satoshi Abe]

@bmedic 

You can use extension point to show dynamic filter characteristic.You need to create extension point including script for your business logic.

https://docs.servicenow.com/bundle/xanadu-order-management/page/product/tmt-order-mgt/concept/som-op...

The way to use extension point is explained in Nowlearning as well.

-course

Introduction - SOM Implementation Bootcamp On Demand

[Ashish Parab]

Hey @bmedic ,

Below is an onChange client script that adds and removes options based on the phone selection.

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

    var phoneModel = g_form.getValue('phone'); // replace 'phone' with your actual field name

    // Define available storage options based on the selected phone model
    var storageOptions = {
        'Mobile phone 1': ['256GB', '512GB', '1TB'],
        'Mobile phone 2': ['512GB', '1TB']
    };

    // Get the field name for storage options
    var storageField = 'storage_type'; // replace 'storage_type' with your actual field name

    // Clear the current options
    g_form.clearOptions(storageField);

    // Add the "None" option first
    g_form.addOption('storage_type', '', '-- None --');
    // Add options for the selected phone model
    if (storageOptions[phoneModel]) {
        storageOptions[phoneModel].forEach(function(option) {
            g_form.addOption(storageField, option, option);
        });
    }
}

Please mark this as "correct" and "helpful" if you feel this answer helped you in anyway.

Thanks and Regards,

Ashish

[SrdanMatijevic · Accepted solution]

I think you will need this, product configurator Open State Management API framework.