UiPath Forms Tutorial: Conditional Select boxes

News Tutorials
, ,
1

Conditional select boxes allows us to display different select box options based on the previous selection made in another form component.
This tutorial explains the steps involved in building a conditional selectbox using UiPath forms.

  1. Open a workflow file and create the below variables
    parentDropdown – List of String
  • parentValueSelected – String*
  • childSelectboxes – List of String*
  • selectedOption - String*

  1. Create an excel sheet containing two columns which will provide the values for parent dropdown and child select boxes.
    formDesign

  2. Read the excel sheet using ‘Read Range’ activity and store it in a datatable.

  3. Using assign activity assign the values for below variables created in Step 1
    parentDropdown – Unique values in Column A of datatable
    parentValueSelected – First value in parentDropdown
    childSelectboxes – Filter Column2 in datatable using parentValueSelected and convert it into list

  4. Add ‘Create Form’ activity and pass the input parameters as shown below
    formDesign

  5. Open the form designer and add a dropdown and select box components. The field key should match with the form fields collections parameter name.
    formDesign

  6. Now we need to execute the do block when the dropdown value is changed to update the select boxes. Edit the parent dropdown and type the below code under ‘Custom Default Value’ option in Data tab.

const updateOnChange = instance.updateOnChange;
    instance.updateOnChange = function(flags, changed) {
          if (flags.modified) {
           instance.emit('execute', instance.component.key , {});
          }
    return updateOnChange.call(instance, flags, changed);
}

  1. Save and exit the form designer.

  2. Assigned the ‘selectedOption’ variable created in step 1 to the SelectedButton field in form activity. This field will contain the details about the button which triggered do block. We will use this make sure we are updating the select boxes only when the dropdown is changed.

  3. Add an if condition under the Do block and add the below condition
    selectedOption.Equals(“parent”)

  4. Filter the Column2 in input datatable based on the dropdown value selected and assign it to childSelectboxes variable. This can be accessed using parentValueSelected variable

  5. Save and execute the workflow.

Same project can be found here
Sample Project.zip (14.1 KB)

4 Likes