Dynamic Dropdowns

You can add dynamic dropdown lists in your form, using the Drop-down List component in the Form Designer. These tutorials describe how to create a dynamic dropdown list with elements that represent countries.

Tutorial

To create a dynamic dropdown list:

1. Drag and drop a Sequence activity into your workflow. For this example, name it DynamicDropdowns.

2. Create two variables:

   2.1. Create a String variable type and set the scope as the Sequence activity. For this example, name the variable country and set the scope to DynamicDropdowns.
   2.2. Create a List<String> variable type and set the scope as the Sequence activity. For this example, name the variable countryList and set the scope to DynamicDropdowns.
3. Inside the Default field of the List<String> variable, create a new List of type String, that holds the names of the countries. For example, inside the Default field of the countryList variable, type in the following expression:

   New List (Of String) From {
   "US",
   "India",
   "Romania"
   }

4. Drag and drop a Create Form activity in your Sequence.

5. In the FormFieldsCollection property menu bind the variables to your form:

   5.1. Create an argument of Type String with the Direction In/Out and set the value as the String variable. For this example, set the value as the country variable. Name the argument country 5.2. Create an argument of Type List<String> with the Direction In and set the value as the List<String> variable. For this example, set the value as the countryList variable. Name the argument country_dropdown.

Note: The country_dropdown argument makes the dropdown list dynamic and populates it with the elements from the List<String> variable.

6. Open the Form Designer.

6.1. Drag and drop a Drop-down List component in the Form Designer.

6.2. In the Field Key tab, input the name of the String argument in the Property Name field. For this example, input country.

6.3. Save the component.

7. Save the form.

Result: The Drop-down List component shows as options the list of Strings created at step 3.

Creating a dynamic dropdown inside a Data Grid

This tutorial demonstrates how to create a dynamic dropdown inside a Data Grid. The Data Grid component displays, inside the form, data that comes from a Data Table previously created. To create a dynamic dropdown inside a Data Grid:

1. Create a Data Table using the Build Data Table activity. For this example, save the data table as a variable named sampleDataTable.
   
   

   

   
   

2. Add a Invoke Code activity into your workflow and set the Language to CSharp.

   2.1. Select Edit Code and create a list of Strings, where you add the options that you want to display dynamically in the dropdown list. For example, add the code below inside the Code Editor:

   countryListInitialized = new List<string>();
   countryListInitialized.Add("USA");
   countryListInitialized.Add("India");
   countryListInitialized.Add("Romania");
   countryListInitialized.Add("Dubai");

   2.2. Select Edit arguments and create an argument that will store the list of Strings created inside a variable that you can later use inside your workflow. The name of the argument must have the same name as the list created in the Code Editor. For this example, create an argument named countryListInitialized, with the direction In/Out, the type List<String>, that has the value set as a List<String> variable. For this example, name the variable countryListVariable.

3. Add a Create Form activity into your workflow.

   3.1. Add a Data Grid component.

   3.2. Add a Text Field component inside the Data Grid.

   3.3. Add a Drop-down List component inside the Data Grid.

4. Open the FormFieldsCollection and create the following arguments, to bind data to the form:

   Name	Direction	Type	Value	Description
   dataGridSample	In/Out	DataTable	sampleDataTable	This argument binds the data from the Data Table to the Data Grid component inside the form. For this example, the Data Table is stored inside the sampleDataTable variable.
   countryList_dropdown	In/Out	List<String>	countryListVariable	This argument binds the data from the list of Strings to the Drop-down List* component inside the form. The _dropdown suffix makes the dropdown dynamic. For this example, the list of Strings is stored inside the countryListVariable variable.
   countryList_parent	In	String	"dataGridSample"	This argument binds the dynamic dropdown to the Data Grid component, through the _parent suffix, and through inputting the Field Key of the Data Grid component inside the Value column. For this example, the dataGridSample is the Field Key of the Data Grid component.

5. Open the Form Designer.

   5.1. Set the Field Key of the Data Grid component as the argument that binds the Data Table to the form. For this example, set the Field Key of the Data Grid component as dataGridSample.
   5.2. Set the Field Key of the Text Field component as the name of the Data Table column that represents text. For this example, set it as name.
   5.3. Set the Field Key of the Drop-down List component as the name of the argument that binds the list of Strings to the form. For this example, set it as countryList.
6. Save each component and the form.

Result: The Drop-down List component shows as options the list of Strings created at step 2, inside the column of a Data Grid.

Sample workflow

To check the complete workflow or to have a future reference, download the XAML example