Dropdown menu

A dropdown menu provides the user with a finite number of items from which to choose, and depending on the configuration, may allow for either single or multiple selections.

The dropdown menu is populated using a 1010data query. The 1010data query associated with the widget should generate one or two columns (i.e., either values or values and labels).

Label
The text that is displayed preceding the dropdown menu.
Width of label
The number of pixels allocated for the text preceding the dropdown menu.

If the text of the label is greater than the width specified, the label is truncated.

Width of input
The number of pixels allocated for the dropdown menu.

If the values in the input field are greater than the width specified, the values in the field are truncated.

The default is 240px.

Dropdown color
The color of the dropdown menu.
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Text color
The color of the text in the dropdown menu.
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Text style
The appearance of the text in the dropdown menu.

When this field gets focus, a dialog is presented that allows the user to select the family, style, size, and other characteristics of the text such as letter spacing and underlining.

Allow multiple selections?
The user is able to select more than one item from the dropdown menu, and the results are stored as a comma-separated list in the variable associated with the dropdown. If this option is not selected, the user may only select single values.

The following is an example of a dropdown menu that allows multiple selections:

Show radio buttons?
When using QuickApps version 1, items in the dropdown list are preceded by radio buttons when this option is selected.

Note: This option has been removed from QuickApps version 2, since radio buttons will automatically appear before items in a dropdown menu that allows multiple selections.
Variable for value
The variable to hold the selections from the input field.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Default value
The value associated with the default option in the dropdown menu if the data does not contain the current value of the variable associated with the dropdown.

The default value is assigned to the variable associated with the dropdown menu (Variable for value) when the default option is selected from the dropdown menu.

Default label
The text for the default option in the dropdown menu.

When the default option is selected from the dropdown menu, the Default value is assigned to the variable associated with the dropdown menu (Variable for value).

Placeholder text
The text that is displayed when no items have yet been selected.

For instance, when the dropdown menu is first rendered, this may be text indicating that a selection must be made:

If a Default label is specified, the placeholder text will not be displayed.

Maximum dropdown height
The maximum height of the dropdown menu in pixels.

The default is 200px.

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic dropdown_multiple="">
  <widget base_="pub.demo.retail.item" class_="dropdown" color_="#92cddc" 
emptytext_="Select a value..." inputwidth_="250" label_="Select accounts:" 
labelwidth_="150" maxheight_="50" multi_="1" name="hmadded__1" relpos_="76,129" 
textstyle_="font-weight:bold;letter-spacing:0;" value_="@dropdown_multiple">
    <tabu label="Tabulation on Sales Item Detail" breaks="account">
      <break col="account" sort="up"/>
      <tcol source="account" fun="cnt" label="Count"/>
    </tabu>
    <colord cols="account"/>
  </widget>
  <widget class_="text" name="hmadded__2" relpos_="561,134" 
text_="Dropdown multiple: {@dropdown_multiple}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic dropdown_single="">
  <widget base_="pub.demo.retail.item" class_="dropdown" color_="#92cddc" 
deflabel_="Default" defval_="500" emptytext_="Select a value..." inputwidth_="250" 
label_="Select account:" labelwidth_="150" name="hmadded__3" relpos_="96,144" 
textstyle_="font-weight:bold;letter-spacing:0;" value_="@dropdown_single">
    <tabu label="Tabulation on Sales Item Detail" breaks="account">
      <break col="account" sort="up"/>
      <tcol source="account" fun="cnt" label="Count"/>
    </tabu>
    <colord cols="account"/>
  </widget>
  <widget class_="text" name="hmadded__4" relpos_="596,149" 
text_="Dropdown single: {@dropdown_single}"/>
</dynamic>