Advanced Controls for Drop-downs

The tutorials on this page demonstrate using drop-down lists with the UiPath Form Designer, inside the Create Form Task activity. The most used property for achieving the results in the tutorials is the FormData(Collection).

Creating dynamic drop-downs

Use them in workflows where you want to send dynamic data to populate a drop-down control inside a Form Action.

With this method, a variable of the type List of Strings holds the values of the drop-down list instead of adding static values on the Data tab in the UiPath Form Designer.

In the following example, we create a dynamic drop-down of countries, initialize a variable with the list of countries, and create an additional variable to capture the country selected by users.

To create a dynamic drop-down:

1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.
2. Add an argument for the dynamic drop-down as follows:

   • Name: countryList_dropdown

   • Direction: In

   • Type: List of Strings (List<String>)

   • Value: Press Ctrl + K and enter listOfCountries as the variable name.

     The listOfCountries variable contains the items in the drop-down list.

     note

     Array of Strings is also supported, but you must manually add the drop-down component in Form Designer and add the Field Key value.

3. If you want to get the user selection back to the workflow, add another argument to capture the selected value:
   • Name: country (the Field Key of the drop-down component)
   • Direction: In/Out or Out
   • Type: String
   • Value: Press Ctrl + K and enter selectedCountry as the variable name.
4. Click OK to close Form Data.
5. Open the Variables panel and initialize listOfCountries with the default value new List(of string) from { "India", "Romania", "US" }.
   tip

   You can also choose to populate listOfCountries through other activities instead of initializing it.

Creating cascaded drop-downs

Use them in task-based forms when you want the selection in one drop-down (parent) to populate the values in the second drop-down (child).

To create a cascaded drop-down:

1. In the Create Form Task activity, click the ellipsis (...) to the right of FormData.

2. Bind the parent dropdown to the workflow.

   For this example, create an argument that passes the listOfCountries List<String> variable to the workflow as a dropdown list.

   note

   The listOfCountries variable contains the items in the parent drop-down list, meaning the list of countries.

   1. Name the argument CountryList_dropdown. The Field Key property name for this argument is CountryList.
   2. Set the Direction as In
   3. Set the Type as System.Collections.Generic.List<System.String>
   4. Set the Value as the listOfCountries List<String> variable.

3. Bind the child dropdown to the workflow.

   For this example, create an argument that passes the stateDictionaryList Dictionary<String, List<String>> variable to the workflow as a dropdown list.

   note

   The stateDictionaryList variable contains the items in the child drop-down list, meaning the states for each country.

   1. Name the argument stateDictList_dropdown. The Field Key property name for this argument is stateDictList.
   2. Set the Direction as In
   3. Set the Type as System.Collections.Generic.Dictionary<System.String, System.Collections.Generic.List<System.String>
   4. Set the Value as the stateDictionaryList Dictionary<String, List<String> variable

4. Bind the child dropdown to the parent dropdown.

   Create an argument with the name of the child dropdown and add the _parent suffix. Then set the Value of the argument to the name of the parent dropdown, like this: ”ParentDropdownVariableName”.

   For this example, create an argument named stateDictList_parent. The child dropdown is stateDictList and you add the _parent suffix to it.

   1. Set the Direction as In.
   2. Set the Type as String.
   3. Set the Value as the ”CountryList”.

   When populating the stateDictList Dictionary variable, take note that the dictionary Key is a value from the parent drop-down list and its corresponding Value is a list of options to be shown on the form if the parent is set to the key.

   tip

   You can pass the values to be pre-filled (for example, with country and state fields) in the FormData collection. If you are passing child values, make sure you also include the parent value to prevent unexpected behavior.

5. Map each value from the parent drop-down to a List of Strings variable. You can populate the list (dictionary) for the parent drop-down in any way, but for this example, we use an Add to Dictionary activity for each value.

   • Dictionary: the dictionary of the child drop-down, stateDictList.
   • Key: a value from the list of strings for the parent drop-down, CountryList - in this example, "US", "India", and "Romania".
   • Value: Press Ctrl + K and enter a name for the List of Strings variable which holds the values to show in the child drop-down when the Key value is selected in the parent - usaStatesList, indianStatesList, and romanianCountyList, respectively.

6. Make sure you place the activity or activities for the above step before the Create Form Task activity.

7. Click OK to close Form Data.

8. Open the Variables panel and initialize the new List of String variables you created with the following default values:

   • for indianStatesList: new List(of string) from { "Odisha", "Rajasthan", "Karnataka" }
   • for usaStatesList: new List(of string) from {"Florida", "Georgia", "Washington"}
   • for romanianCountyList: new List(of string) from {"Cluj", "Prahova", "Constanta"}.

Download these examples here

Creating cascaded drop-downs in Edit Grid and Data Grid components

To use cascaded drop-downs inside a Edit Grid or Data Grid component:

1. Create the drop-down fields following the steps above (using the FormData wizard).

2. Open the Form Designer.

3. If the drop-down fields are not created inside your form, verify that:

   • The <dropdownKey> , <dropdownKey>_dropdown, and <dropdownKey>_parent arguments are correctly added in the FormData collection.
   • The GenerateInputFields box is checked.

4. Drag and drop the Edit Grid or Data Grid component.

5. Drag and drop the drop-downs created at Step 1 into the Edit Grid or Data Grid component.

6. Open the configuration menu for the child drop-down (click ).

7. In the Logic tab, notice the preconfigured advanced logic.

   

8. Navigate to the Actions > Schema Definition field.

9. Replace [data.<parent_dropdown_key>] with [row.<parent_dropdown_key>] in the schema expression.

   

   note

   The row keyword instructs the form to use the parent value from the grid row.

10. Save the form.

Setting the number of search results for drop-downs

Drop-downs show at most four search results by default. You can change this limit by setting a property in the form design.

To set the number of search results for a drop-down:

1. In the UiPath Form Designer, click Edit to open settings for the drop-down list and then select the Data tab.
2. Under Choices.js options, add { "searchResultLimit" : x }, where x is the maximum number of results you want to show.

Displaying all options inside drop-downs

If the strings in the drop-down menu have more than 50 characters, they may be omitted from displaying.

To display all options matching your search term:

1. Click Edit JSON for the Drop-down List component you want to edit.
2. In the Component JSON field, add the following properties:

   ...
     "fuseOptions": {
       "distance": 800,
       },
     "threshold": 1,
     "useExactSearch": false,
   ...

note

The threshold property dictates at what point the algorithm stops the search operation for the given search term. For example, a threshold of 0 requires an exact match of letters and location. A threshold of 1 can match anything, even spelling mistakes. Adjust the threshold value based on your use case.