The Input Group control allows you to add an icon, text or menu to input controls such as Text, Text Area, or Integer controls for example.
The Input Group control has many easy to configure appearance options.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This control is most commonly used when wanting to add a visual effect to input controls.
Input groups can be nested inside of each other, e.g., input group inside of input group. The control is intended to be used with input-like controls, such as text, integer, type-ahead text, date picker (to have a calendar button on the date picker), etc. The input group adapts its size to the size of the contained form control.
Appearance
Width Value in px, %, em For example: 50px, 20%, 0.4em, if no unit is specified px is assumed
Label Placement Top or Left
Color Style
Button Location Left or Right
Button Kind Icon, Text, or Menu (The menu option is intended to be used with a Popup Menu control)
Button Info* Allows you to type in a specific icon
* There are a variety of icons offered at Font Awesome
Example
These are the configuration option settings...
This is the result...
Configuring the Input Group in a "Read Only" section
If the input group is nested inside of a section that has been set to "read only" (for example a horizontal layout, vertical layout, coach view, etc), the color of the icon becomes slightly dim. This can be a problem if other input groups outside of the "read only" are set to the same color.
To ensure that the color of the icon does not change when being set to "read only", the setEnabled method can be used.
In the On Load event of the input group control, we can call the method as such: me.setEnabled(true)
Events
With the Input Group control, there are 2 types of event handlers:
- On Load When the page loads
- On Button Click When the input group button is clicked
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
For detailed information on the available methods for this control, access the JS Doc file.
Related Article(s)
- Author: Dan Abresch
- Date Created: June 8, 2015
- Date Modified: November 9, 2015 by Erick Quintanilla
Comments