Dropdown Form Field

About this article

A dropdown form field is a type of form field that gives you a limited and specific number of options dictated by a data source. The name is derived from the dialogue "dropping down" and presenting options. The options are presented as part of the document creation dialogue or document update dialogue. Below is an example of the result for an end-user.

Prerequisites

Creating a dropdown form field

In it's simplest form a dropdown consists of a name, label, datasource, and label column. The name is used for reference in the binding syntax, the label is used for the end-user and appears above the dropdown, the data source contains the options and the label column defines the column which appears in the dropdown. Therefore the simplest dropdown creation consists of the following steps:

1. If not already existing, create a data source in the Resource tab in the Admin Center with the desired schema, keep in mind you might want to have a label column that is different from the data you'd like to reference in bindings. A simple format would be to use the Name column for labeling and other columns for data.
2. Populate the rows of the data source with data you'd like to reference in templates
3. Go to the Form tab in Dynamics Designer
4. Click Add form field
5. Select Type Dropdown, fill in Name and Label fields, and set the desired options
6. In Datasource select the data source the form should be linked to 
7. In Label column select the column in the data source that should be displayed to the end-user
8. Click Save
   
   

   Below is an example of the above.

   

Additional Options

• Required: Check this box if you'd like to mandate the user select an option, an asterisk will indicate to them that it's required.
• Default Value: Prepopulate an option for the user. The default value can be a value present in the linked data source column.
• Filter options: Filter the options of this Dropdown according to a data source.
• Hide if no interaction: The dropdown becomes hidden if no action is required by the user. This is common in conjunction with filtering.
• Auto-select first option: Check this box to auto-select the first option, otherwise no option is selected by default.
• Spacing before: Add space above the form field.
• Spacing after: Add space below the form field.
• Helptext prefix: Add help text above the dropdown, this can be useful for guiding the user on filling out the form field.
• Helptext postfix: Add help text below the dropdown, this can be useful for guiding the user on filling out the form field.
• Share value: Allow the form field to be recognizable as shared by dynamic documents.

Example 1

Create a dropdown for the user to select the state of the document for use in a document property. First create a data source that has a name column with the state options.

Secondly, create the dropdown.

The user will now be presented with the options upon document creation or update.

The binding {{Form.DocumentState.Name}} can now be used in the document property.

Example 2

Use the Filter by option to show fruits or vegetables in the 'Product' dropdown, depending on the selected category in the 'Category' dropdown.

In this example these data sources are used. The column Category of the Products data source is a reference to the column Name of the Categories data source:

1. Create a dropdown form field named 'Category' and link it to the 'Name' column of the 'Categories' data source.
2. Create a dropdown form field named 'Product' and link it to the 'Name' column of the 'Products' data source. In the Filter by field select 'Category'. The result looks like this:
   
   
   
   
3. Now when a user selects 'Fruits' in the 'Category' dropdown, the 'Product' dropdown only shows fruit. When 'Vegetables' is selected then the 'Product' dropdown only shows vegetables:
   
   

Example 3

Use the options Hide if no interaction and Auto select first option to hide the 'Category' dropdown from example 2.

1. Open the properties of the 'Category' dropdown form field.
2. Select 'Vegetables' as Default Value and enable the checkboxes for Hide if no interaction and Auto select first option. The result looks like this:
   
   
   
   
3. Now only the 'Product' dropdown form field is presented to the user and there are only vegetables to choose from:
   
   

Related articles