Input Group
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package '') Extends designtime/SolutionModel: Extends runtime:
A component that combines an input field with optional add-ons and add-on buttons.
This is a reference page; many components have detailed usage guides .
An array of add-on button objects attached to the input group. Each add-on button may have its own action handlers and styling. Type:
An array of add-on objects attached to the input group. Each add-on provides additional content (such as icons or text) adjacent to the input field. Type:
Bound data provider identifier for the input group's value. Type:
Flag indicating whether the input group is editable. Type: Default Value: true
Fired when the input group is activated.
Parameters:
Handle changed data, return false if the value should not be accepted. JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope) - present since 2021.06 release
Parameters:
Fired when the input group gains focus.
Parameters:
Fired when the input group loses focus.
Parameters:
Fired when the input group is right-clicked.
Parameters:
Adds an addOn to this input group
AddOn has the following properties:
text - the text of the item position - LEFT or RIGHT (defaults to LEFT)
Parameters:
Adds an addOnButton to this input group
AddOnButton has the following properties:
text - the button text position - LEFT or RIGHT (defaults to RIGHT) onAction - function to be called on button click onDoubleClick - function to be called on button double click onRightClick - function to be called on button right click styleClass - the style class of the button (e.g. btn-danger) imageStyleClass - image style class of the button
Parameters:
Removes all addOnButtons from this input group
Removes all addOns from this input group
Request the focus to this text field.
Example:
Sets all addOnButtons of this input group
AddOnButton has the following properties:
text - the button text position - LEFT or RIGHT (defaults to RIGHT) onAction - function to be called on button click onDoubleClick - function to be called on button double click onRightClick - function to be called on button right click styleClass - the style class of the button (e.g. btn-danger) imageStyleClass - image style class of the button
Parameters:
Sets all addOns of this input group
AddOn has the following properties:
text - the text of the item position - LEFT or RIGHT (defaults to LEFT)
Parameters:
Represents an add-on element attached to the input group. scripting type: CustomType<bootstrapextracomponents-input-group.AddOn>
attributes
Additional attributes for the add-on element.
position
The position of the add-on relative to the input field (e.g. LEFT or RIGHT).
Default Value: "LEFT"
text
The text displayed on the add-on.
Represents an add-on button element attached to the input group. scripting type: CustomType<bootstrapextracomponents-input-group.AddOnButton>
attributes
Additional attributes for the add-on button element.
imageStyleClass
CSS style classes applied to the add-on button's image or icon.
name
The unique name identifier for the add-on button.
onAction
The function to be executed when the add-on button is clicked.
onDoubleClick
The function to be executed when the add-on button is double-clicked.
onRightClick
The function to be executed when the add-on button is right-clicked.
position
The position of the add-on button relative to the input field (e.g. LEFT or RIGHT).
Default Value: "RIGHT"
styleClass
CSS style classes applied to the add-on button.
Default Value: "btn-default"
text
The text displayed on the add-on button.
Flag indicating whether the input group is enabled for user interaction. Type: Default Value: true
Format string used to display and parse the input group's value. Type:
The input type for the text field within the input group (e.g. text, password, number). Type: Default Value: "text"
Placeholder text displayed when the input field is empty. Type:
Flag indicating whether the input group is read-only. Type: Default Value: false
CSS style classes applied to the input group. Type:
Tab sequence order for keyboard navigation. Type:
Tooltip text displayed when hovering over the input group. Type:
Flag indicating whether the input group is visible. Type:
{} event The event object containing details about the action event e.g. target element, mouse coordinates
{} oldValue The previous value from the data provider
{} newValue The new value to be set in the data provider
{} event The event object associated with the data change
Returns: {}
{} event The event object containing details about the focus gained event
{} event The event object containing details about the focus lost event
{} event The event object containing details about the right-click event
{} addOn - object with text, position (LEFT, RIGHT)
{} addOnButton AddButtonOnToAdd
{} addOnButtons An array of AddOnButton objects to configure the input group's buttons, each with properties such as text, position, event handlers, and styling.
{} addOns AddOns - Array of objects with text, position (LEFT, RIGHT)
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type:
Type: