Drop-down (data entry)

The Drop-down (data entry) widget is responsible for rendering drop-down lists.

This widget renders data supplied by the following components:
The following figure shows how a data entry drop-down list widget appears on a transformation, using the data from the Input field with hints component example as input:
Figure 1. Data entry drop-down list widget example
Example of data entry drop-down list widget
  1. Caption (from component)
  2. Number of columns per row (1)
  3. Fill (from hints)
The following settings can be configured for this widget:
Fill from global variable
If selected, fill the drop-down list from the specified global variables.
Global variable containing list values
Specifies the name of the indexed global variable containing the set of values. An item for each index in the global variable will be created in the drop-down list.
Shared
ZIETrans local and shared global variables can have the same name. Select this box if you want to use the shared global variable to populate the list items. When this box is cleared, the local global variable is used.
Global variable containing list captions
Optional. Specifies the name of the indexed global variable containing the set of captions. The size of the global variable specified by this value should be greater than or equal to the size specified in the preceding setting. The indexes in this indexed global variable should also match up with the indexes in the values global variable (so that the actual value and caption shown to the user are in sync). If this value is not specified, the caption for each item in the drop-down list will be its value.
Fill from string
If selected, fill the drop-down list from the specified string.
List items
Optional. Specifies the string of items to include in the drop-down list. Items should be separated with a semicolon (;). To have the list item caption be different than the list item value, enter both separated by an equal sign (=). For example, a value of Apple=A;Grape=G renders a drop-down list with two items: Apple and Grape. Selecting the first item causes an A to be inserted in the associated host screen input field.

If you want both the item in the drop-down list and the value inserted in the host screen to be the same, you only need to enter the item. For example, Apple=A;G. In this example, a G appears in the drop-down list and in the host screen input field.

Fill from hints
If selected, fill the drop-down list from hints recognized by the component (only applicable when the Input Field with Hints component is used).
Caption source
Specifies how the caption for the generated drop-down list is determined. Options: From component (use the extracted caption from the component) or Custom (use the specified caption).
Custom caption
Optional. Specifies the caption for the drop-down list.
Note: Leave this setting blank to not generate a caption for the drop-down list.
Number of displayable rows
The number of rows in the drop-down list that are visible to the user. If more than this number of items are in the list, scroll bars appear so the user can scroll through the entire list. The default is 1.
Number of columns per row
The number of drop-down lists to display horizontally before wrapping to the next line.
Note:
  1. This setting is not applicable in default rendering.
  2. The widget preview does not always match the full page preview. This happens because the widget preview simply renders the component's output. It does not try to preserve the alignment of the screen when it renders, as is done in the full page preview.
Auto submit on select
If selected, once a selection is made in the drop-down list, it is submitted.
Show submit button
If selected, a submit button is rendered next to the drop-down list.
Submit button caption
Optional. Specifies the caption of the submit button.
Drop-down style class
Optional. The CSS style class associated with the generated drop-down list. The value of the class attribute of the HTML drop-down tag will be set to this value. The default value is HATSDROPDOWN. See Using style sheets for more information.
List option style class
Optional. The CSS style class associated with each option in the drop-down list. The default value is HATSOPTION. See Using style sheets for more information.
Caption style class
Optional. The CSS style class associated with the caption of the generated drop-down list. The default value is HATSCAPTION. See Using style sheets for more information.
Table style class
Optional. The CSS style class associated with the generated table. If more than one drop-down list is rendered, an HTML table will be generated to enclose these drop-down lists. The value of the class attribute of the HTML table tag will be set to this value. The default value is HATSTABLE. See Using style sheets for more information.
Style
Optional. Any CSS properties that you want to override. For example, you can specify font-color: red; font-size: 18pt; in this field to change the font color and size for this widget. The properties you enter apply to each element of this widget. Use the launcher button next to this field to open a style properties dialog. This dialog frees you from the need to understand CSS to change the font, color, or other style settings for the widget. See Using style sheets for more information.