Input group

Allows users to add an icon, text, or menu to input views such as date, time, text, and so on. It adjusts its size to the size of the contained form view.

Configuration properties

Under Configuration, set or modify the configuration properties for the view.

Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for the Input group view are listed in the following table:
Table 1. Appearance configuration properties for Input group
Appearance configuration property Description Data type
Width The Screen Sizes icon The width of the view. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. String
Label placement The Screen Sizes icon The label placement for this view. A left placement of the label changes the specified width of the view. String
Label width Large screen icon The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. String
Color style The color style for the view. The colors correspond to variables in the specified theme. String
Button location The button location relative to the field. String
Button type You can create the view as a clickable icon, a text field, or a menu. Use the Menu option with a Pop-up Menu view. For more information about this view, see Pop-up menu. String
Button info The name of the icon.

See Font Awesome V4.7.0 for a complete list of icons.

String

Example

To create an Input group with a calculator icon next to an Integer input field Image of an Integer view, drop an Integer view into an Input group view and set the Input group options as follows:

  • Leave Width blank.
  • Set Label placement to Top.
  • Set Color style to Primary.
  • Set Button location to Left.
  • Set Button type to Icon.
  • Set Button info to calculator.

Configuring the Input group in a read-only section

If the input group is nested within a section that is set to read only, such as a horizontal layout or vertical layout, the icon becomes slightly dimmer.
Image of a dim Integer view
A dim icon can be inconvenient if other icon views outside the read-only section are set to the same color. To ensure that the color of the icon does not change when it is nested in a read-only section, you can set the on load event handler to use the setEnabled method.
me.setEnabled(true)

Events

Set or modify the event handlers for the view in the Events tab. You can set events to be triggered programmatically or when a user interacts with the view. For information on how to define and code events, see User-defined events.
You can use JavaScript logic to modify the effects of the view. For the Input group view, you can activate the following event handlers:
  • On load when the page loads, for example me.setIcon("rocket");
  • On button click when an icon used as a button is clicked, for example ${PopupMenu1}.setMenuVisible(!${PopupMenu1}.isMenuVisible())

Methods

For more information about the available methods, see the Input group JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.

For more information about input views, see Plain text, Text area, Date/time picker, Integer.