The Related Drop-down menu special field features two linked drop-down lists. When the user selects an item in the first drop down, there is a corresponding change in the second drop-down. Here are the basic steps for configuring this element:
Insert the element into the form.
Click the element and then view the properties in the Element Properties Panel.
This element actually contains two drop-down menus, so there are several pairs of properties such as Field Name 1 and Field Name 2, Empty Text and Empty Text 2, Caption 1 and Caption 2, and Tooltip 1 and Tooltip 2.
To populate each of the drop-downs, you'll need to click the button in the Field Values property and then edit the two rows of Drop Down Values.
Each row in Related Drop Down Values corresponds to an item in the first drop-down menu. (Take note of the Display Values, then preview the form to see these as the items in the first drop-down).
Click the button for each Related Data Value (far-right) to populate the values that will appear in the drop downs.
Let's bring it all together: for any particular row in Related Drop Down Values, the items in Related Data will populate the second drop-down when you choose (from the first drop-down) the item having the text shown in Display Value.
You also can edit the Data Value, Display Value and Bind Value for each item.
Click Save to close the Related Data window and, when you are satisfied, click Save to close the Related Drop Down Values window.
Below we cover all of the general properties for this element. Learn about other properties in the Introduction to Validation and Layout Basics.
|Field Name 1||This is the name used to reference the first field and is also the name of the column heading in the submission bin.|
|Field Name 2||This is the name used to reference the second field and is also the name of the column heading in the submission bin.|
|Style||Select one of the predefined style options. Note: Styles only apply when the use Basic property is set to false.|
|Basic Mode||The native browser selection elements lack the styling enhancements of the logiforms selection elements, but in some cases you may find it more practical to use the native select element. Set this to true to use the default, native browser select element. If you are unsure, leave the default setting (false).
Performance Tip: We recommend setting this property to TRUE to improve performance on forms that contain more than 20-30 of this field type. This can improve performance.
|Start Empty||Start with no value selected in the first and second drop down. When this is false, the first item in the drop down is selected by default.|
|Stack Vertically||Set this value to false if you don't want the drop-downs to stack vertically. If you set the value to false, then consider changing the Child Element Width, decreasing the caption width, or increase the form width (Introduction to Themes & Styles).|
|Empty Text||Specify the text to be shown in the first drop-down when its list is empty.|
|Empty Text 2||Specify the text to be shown in the second drop-down when its list is empty.|
|Field Values||Click the button to display the Field Values window, in which you can add one or more Data Values for each drop-down. A Data Value is a unique internal name for an item in a form. In the Display Value column, you can enter a user-friendly label for each item. Learn more about the Bind Value in Bindings. Click the Related Databuttons to change the data values.
|Child Element Width||Specify a different width for the second drop-down.|
|Caption 1||Enter the caption text for the first drop-down, which appears either beside or above the element.|
|Caption 2||Enter the caption text, which appears either beside or above the element.|
|Tooltip 1||Enter a short help comment for the first drop-down, which will display nearby when the user hovers over the element.|
|Tooltip 2||Enter a short help comment for the first drop-down, which will display nearby when the user hovers over the element.|
|Theme||Set this property to Inherit to use the Field SubTheme defined by the master theme for this form. Or, select a subTheme which will apply directly to this element. Once a subTheme is applied, you can edit it within the ThemeEditor. Learn more in Themes & Styles.|
|Dependency||Create a dependency to hide or show this element based on a rule. The field becomes "dependent" on other values entered on the form. Learn more in Dependencies.|
|Hidden||Set this property to true if you want this element to be hidden.|
|Hide Mode||This property determines how the element is hidden and if it will collapse within the space it would otherwise occupy.|