Changing the multi-select value list based on other attribute in Form creation

[Navinkumar.V.R]

Hi Everyone,

 

We are trying to create a user friendly form for self service request by end users in CA Identity Portal.

 

So the scenario is this,

I have two attributes. The first attribute is a drop down list and the second attribute need to be a Multi-Select and the options for this multi-select will vary based on the selection of first attribute. Once a user chose an option for first attribute using the drop-down, then the option for the second attribute(a multi-select attribute) should be displayed in the form. Any thoughts/suggestions on this is highly helpful. Thanks much in advance!

 

Note: Using the below article, I was able to come up with a form that has both these attributes as a drop-down list. The challenge here is to make the second attribute as multi-select.

Hotel Reservation Form Example - CA Identity Portal - 14.1 - CA Technologies Documentation 

 

 

Regards,

V R

[Legacy User]

Hi,

 

If I understand the use case correctly then the following example should work (it's quite similar to the example from the documentation you referred to):

• Form with two properties, the first is a Drop-Down and the second a Multi Select List. 
• Give the Multi Select List property a Reference Name (in the property's General tab) so you can modify it from the Drop-Down property. Let's assume this name is 'multiselect-ref-name'.
• The Drop-Down property has three options: "Option 1", "Option 2" and "Option 3". 
• In the Drop-Down property's Change Handler, add the following code:
  

  let multiSelectOptions;
  const firstValueOptions = [
      {name: 'Option 1 first option', value: 'Option 1 first option', description: 'first description'},
      {name: 'Option 1 second option', value: 'Option 1 second option', description: 'second description'},
      {name: 'Option 1 third option', value: 'Option 1 third option', description: 'third description'}
  ];
  const secondValueOptions = [
      {name: 'Option 2 first option', value: 'Option 2 first option', description: 'first description'},
      {name: 'Option 2 second option', value: 'Option 2 second option', description: 'second description'},
      {name: 'Option 2 third option', value: 'Option 2 third option', description: 'third description'}
  ];
  const thirdValueOptions = [
      {name: 'Option 3 first option', value: 'Option 3 first option', description: 'first description'},
      {name: 'Option 3 second option', value: 'Option 3 second option', description: 'second description'},
      {name: 'Option 3 third option', value: 'Option 3 third option', description: 'third description'}
  ];
  
  switch (prop.value) {
      case 'Option 1':
          multiSelectOptions = firstValueOptions;
          break;
      case 'Option 2':
          multiSelectOptions = secondValueOptions;
          break;
      case 'Option 3':
          multiSelectOptions = thirdValueOptions;
          break;
      default:
          // populate some default values in multiSelectOptions here
  }
  
  api.getProp('multiselect-ref-name').options = multiSelectOptions;

• Save the form.

 

There are two things to notice:

1. The Multi Select List property in the example above will be populated with options only after a value is chosen in the Drop-Down property. For instance, if the form is loaded for a user who doesn't have any value in the attribute of the Drop-Down property then the Multi Select List property will be empty until you select a value from the drop-down. 
2. It is better to add the same code from the Change Handler of the Drop-Down property to its Initialization Handler as well. This will make sure that when the form initializes with information of a user who already has a value in the attribute of the Drop-Down property, the matching options in the Multi Select List property will be populated immediately (rather then the property will remain empty until you 'touch' the Drop-Down property).

 

I hope it achieves the required behavior.

 

Regards,

David

[Navinkumar.V.R]

Hello David,

 

I tried your suggestion and it works good. Thanks much!!

 

 

Regards,

V R