Dynamic Multi-line Select Fields Based on List Collector Selection

[DevYadav]

Hi Community, good day!

I have a requirement where a catalog item variable was initially of type Select Box with choices a, b, c but I had to convert it to a List Collector using a certain technique.
https://www.servicenow.com/community/developer-forum/how-do-i-allow-multiple-selections-of-choices-o...

Now, the requirement is as follows:
When a user selects 1 option in the List Collector, a single-choice variable below should be pre-selected, and a Multi-line Select field with that name should appear.

Three multi-line select fields are already created, just need to build a functionality that could do so.
When the user selects 2 options, two such Multi-line Select fields should appear.
When the user selects 3 options, three Multi-line Select fields should appear, and so on matching the number of selections made in the List Collector.

Has anyone implemented something similar? Any guidance or script examples would be greatly appreciated.

Thanks in advance!

[Ankur Bawiskar]

@DevYadav 

so you want to dynamically show variables based on choice selected?

If yes then you cannot have dynamic number of variables coming on the fly on catalog form.

those variables should be associated to your catalog item and then based on option selected you can show/hide them.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Rafael Batistot]

Hi @DevYadav 

I’ll assume:

• Your List Collector variable is called list_collector_var.
• You have three Multi-line Select variables: multi_select_1, multi_select_2, multi_select_3.
• You have a single-choice variable called single_choice_var.

// Type: onChange
// Variable: list_collector_var
// Client Script

(function executeOnChange(control, oldValue, newValue, isLoading) {
if (isLoading) return; // do nothing on form load

// Get the selected values from the List Collector
var selectedValues = g_form.getValue('list_collector_var').split(',');

// Hide all multi-line selects initially
g_form.setVisible('multi_select_1', false);
g_form.setVisible('multi_select_2', false);
g_form.setVisible('multi_select_3', false);

// Show Multi-line Selects based on number of selections
for (var i = 0; i < selectedValues.length; i++) {
var multiSelectName = 'multi_select_' + (i + 1);
g_form.setVisible(multiSelectName, true);

// Optional: Pre-select the single-choice variable with the first value
if (i === 0) {
g_form.setValue('single_choice_var', selectedValues[0]);
}
}

})(g_form.getControl('list_collector_var'));

[DevYadav]

Your code is working perfectly as it shows exactly the same number of fields as the selected values. I want to add an enhancement where, for example, if I am using choices a, b, c and I select option b, a field named b should appear, if I select a and b then fields named a and b should appear below, and when I deselect an option its corresponding field should be hidden again.

[shivaprasad98]

Hi @DevYadav .,

You can try with onchange client & check if the value is in it field and decide which field displays.