Input field

An input field allows the user to enter values, optionally with autocomplete suggestions or a combobox containing a list of possible values. The input field may also be constrained to numeric values.

Type
Plain
Provide an input field that allows the user to enter any value.
Autocomplete
Provide an input field that uses the results of a query as suggestions for autocompletion.

As the user enters values in the input field, a dropdown will dynamically display suggestions from the query results that match the substring the user has entered thus far. Matching is based on the setting of the autocomplete filter (see Type below) and can either display suggestions from the query results that contain the substring entered or begin with the substring entered.

The autocompletion suggestions dropdown 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).

Combobox
Provide an input field that contains the results of a query as the choices in the combobox.

The combobox 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).

Numeric
Provide an input field that is restricted to only numeric values.

The numeric value is constrained by the Minimum numeric value and Maximum numeric value. If an out-of-bounds value is manually entered into the field, the value will default to either the minimum or maximum value (i.e., if a value larger than the maximum is manually entered, it will be set to the maximum).

The input field also provides spin buttons that increase or decrease the value by the amount specified in Step for numeric value.

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

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 input field.

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

Height of dropdown
The maximum height (in pixels) of the dropdown menu used by the combobox and autocomplete input fields.

The default is 200px.

Number of hints for autocomplete
The autocomplete dropdown will only be displayed if the number of matches is less than this value.

The default is 200.

Type
Specifies whether the autocomplete dropdown dynamically displays suggestions from the query results that contain the substring the user has entered thus far in the input field or begin with the substring entered.
Contains
The autocomplete dropdown will dynamically display suggestions from the query results that contain the substring the user has entered thus far in the input field.
Begins With
The autocomplete dropdown will dynamically display suggestions from the query results that begin with the substring the user has entered thus far in the input field.
Field color
The color of the input field.
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 input field.
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 input field.

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.

Variable for value
The variable to hold the value 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.

Minimum numeric value
When the type of the input field is numeric, this is the smallest allowed value.
Maximum numeric value
When the type of the input field is numeric, this is the largest allowed value.
Step for numeric value
When the type of the input field is numeric, this is the value by which to increase or decrease the value in the input field when the spin buttons are clicked.

If no value is specified, the default step is 1.

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic first_numeric_input="" second_numeric_input="">
  <widget class_="field" inputwidth_="100" label_="First numeric input field" 
labelwidth_="150" max_="100" min_="0" name="hmadded__1" relpos_="294,87" 
step_="5" type_="numeric" value_="@first_numeric_input"/>
  <widget class_="field" inputwidth_="100" label_="Second numeric input field" 
labelwidth_="150" max_="100" min_="0" name="hmadded__2" relpos_="294,147" 
type_="numeric" value_="@second_numeric_input"/>
  <widget class_="text" name="hmadded__3" relpos_="670,90" 
text_="First numeric value: {@first_numeric_input}"/>
  <widget class_="text" name="hmadded__4" relpos_="670,150" 
text_="Second numeric value: {@second_numeric_input}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic plain_input="">
  <widget class_="field" inputwidth_="100" label_="Plain input field" 
labelwidth_="150" name="hmadded__5" relpos_="170,129" value_="@plain_input"/>
  <widget class_="text" name="hmadded__6" relpos_="515,134" 
text_="Plain input value: {@plain_input}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic combobox_input="">
  <widget base_="pub.demo.retail.item" class_="field" inputwidth_="100" 
label_="Combobox input field" labelwidth_="150" name="hmadded__7" 
relpos_="137,129" type_="combo" value_="@combobox_input">
    <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"/>
    <sort col="account" dir="up"/>
  </widget>
  <widget class_="text" name="hmadded__8" relpos_="492,134" 
text_="Combobox input value: {@combobox_input}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic autocomplete_input="">
  <widget base_="pub.demo.retail.prod" class_="field" inputwidth_="150" 
label_="Autocomplete input field" labelwidth_="150" name="hmadded__9" 
relpos_="112,109" type_="auto" value_="@autocomplete_input">
    <tabu label="Tabulation on Product Master" breaks="deptdesc">
      <tcol source="deptdesc" fun="cnt" label="Count"/>
    </tabu>
    <colord cols="deptdesc"/>
    <sort col="deptdesc" dir="up"/>
  </widget>
  <widget class_="text" name="hmadded__10" relpos_="517,114" 
text_="Autocomplete input value: {@autocomplete_input}"/>
</dynamic>