Input Group
Last updated
Was this helpful?
Last updated
Was this helpful?
An Input Group is a component that consists of input fields with text or button add-ons grouped into one element. It allows for a more structured and visually appealing way to display input fields along with additional elements like buttons or text add-ons.
In the Form Editor, drag the Input Group component from the Pallet onto the form, then select a dataprovider.
Input Groups, like all components, have properties that can be modified at design time to set the appearance and behavior of the component. Select the component in the Form Editor to see a list of properties in the Component Properties Editor. Below are some common properties and how to set them at design time.
Here are the steps to add an addOn to an Input Group:
Select the component in the Form Editor
AddOnButtons are buttons that can be added either to the left or right of a text field within an inputgroup.
Here are the steps to add an addOnButton to an Input Group:
Select the component in the Form Editor
Like most components, Input Groups have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Input Group is the onDataChange
event, which is triggered when the component is clicked and the value is changed.
Input Groups, like many components, can be modified at runtime through code. Below are a few examples of controlling a Input Group from code.
You can easily change the enabled
state of an Input Group at runtime.
Example:
You can easily change the visible
state of a Input Group at runtime.
Example:
Like most components, an Input Group has API methods which can be called from code. Below is an example of common API calls.
Example:
Example:
Example:
Example:
Example:
The following articles are recommended for additional reading
See the reference docs for Input Group for a complete list of its .
Input Group's dataprovider can be set after the component has been added to the form or by setting it in property, found in the Component Properties Editor.
AddOns are text add-ons that can be added either to the left or right of a text field within an inputgroup. AddOn properties can be found .
Select the property and click the +
button in order to add one
Expand the property to see the list of addOns.
In order to edit each addOn, expand it set its
AddOnButton properties can be found .
Select the property and click the +
button in order to add one
Expand the property to see the list of addOnButtons.
In order to edit each addOnButton, expand it set its
Input Group's Format can be set in property. Depending on the type of each dataprovider, this will be done via the format editors for date, text, integer/number.
Input Group's input type can be set in property, found in the Component Properties Editor. It can be text
, password
or number
.
To Handle the event, double-click the value for the property in the Properties Editor. You will see the Method Selection Wizard. You'll have the option to select an existing Method or create a new Method. The method will be called when the Input Group's onDataChange
event is fired and the Event object will be passed to it.
See the Input Group reference for a comprehensive list of
You can easily add an AddOn to an Input Group using the method.
You can easily add an AddOnButton to an Input Group using the method.
You can easily remove all AddOns of an Input Group using the method.
You can easily remove all AddOnButtons of an Input Group using the method.
You can easily add a style class to an Input Group using the method.
See the Input Group reference for a complete list of programmable and .