Enable the Dependent Combo Box Using UI Customization

The below is the sample XML code implemented for 3 level cascade dropdown options.

 

 

<attribute displayName="Classification" id="customAttributes.string2" editable="true" required="true" type="dependentcombobox">

 <options editable="true" selectLabel="Select Classification" createLabel="Please specify">

 <values>

   <item value="Event of Interest" displayName="Event of Interest">

   <options>

   <values>

  <item value="Potential Incident" displayName="Potential Incident">

  <options>

   <values>

   <item value="A" displayName="A"/>

   </values>

   </options>

   </item>

   <item value="Potential Vulnerability" displayName="Potential Vulnerability">

  <options>

   <values>

   <item value="AA" displayName="AA"/>

   </values>

   </options>

   </item>

    </values>

   </options>

   </item>                                                                                                                              

   <item value="Incident" displayName="Incident">

   <options>

   <values>

   <item value="Tuning Opportunity" displayName="Tuning Opportunity"/>

   </values>

  </options>

  </item>

   </values>

   </options>

   </attribute>

   <attribute id="customAttributes.string1" displayName="Event Type" hidden="false" required="true" type="dependentcombobox" referToAttribute="customAttributes.string2">

   </attribute>          

   <attribute id="customAttributes.string3" displayName="Level" hidden="false" required="true" type="dependentcombobox" referToAttribute="customAttributes.string1">

  </attribute>

 

And the same way we can do for 2 levels as well.

 

 <attribute displayName="Country" id="customAttributes.string4" editable="true" required="true" type="dependentcombobox">

 <options editable="true" selectLabel="Select Country" createLabel="Please Select">

  <values>

 <item value="India" displayName="India">

 <options>

   <values>

   <item value="Delhi" displayName="Delhi"/>

   <item value="Mahras" displayName="Mahras"/>

   <item value="AP" displayName="AP"/>

   <item value="Bihar" displayName="Bihar"/>

    </values>

   </options>

   </item>                                                                                                          

   <item value="US" displayName="US">

   <options>

   <values>

   <item value="Calif" displayName="Calif"/>

   <item value="NY" displayName="NY"/>

   <item value="LA" displayName="LA"/>

   </values>

   </options>

   </item>

  </values>

  </options>

   </attribute>

   <attribute id="customAttributes.string5" displayName="State" hidden="false" required="true" type="dependentcombobox" referToAttribute="customAttributes.string4">

  </attribute>