Input Group

(part of package 'Bootstrap Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

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 here.

Properties

addOnButtons

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: Array<CustomType<bootstrapextracomponents-input-group.AddOnButton>>

---

addOns

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: Array<CustomType<bootstrapextracomponents-input-group.AddOn>>

---

dataProvider

Bound data provider identifier for the input group's value. Type: Dataprovider

---

editable

Flag indicating whether the input group is editable. Type: Protected Default Value: true

---

enabled

Flag indicating whether the input group is enabled for user interaction. Type: Enabled Default Value: true

---

format

Format string used to display and parse the input group's value. Type: Format

---

inputType

The input type for the text field within the input group (e.g. text, password, number). Type: String Default Value: "text"

---

placeholderText

Placeholder text displayed when the input field is empty. Type: Tagstring

---

readOnly

Flag indicating whether the input group is read-only. Type: Protected Default Value: false

---

styleClass

CSS style classes applied to the input group. Type: Styleclass

---

tabSeq

Tab sequence order for keyboard navigation. Type: Tabseq

---

toolTipText

Tooltip text displayed when hovering over the input group. Type: Tagstring

---

visible

Flag indicating whether the input group is visible. Type: Visible

---

Events

onAction(event)

Fired when the input group is activated.

Parameters:

• {JSEvent} event The event object containing details about the action event e.g. target element, mouse coordinates

---

onDataChangeMethodID(oldValue,newValue,event)

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:

• {${dataproviderType}} oldValue The previous value from the data provider
• {${dataproviderType}} newValue The new value to be set in the data provider
• {JSEvent} event The event object associated with the data change

Returns: {Boolean}

---

onFocusGainedMethodID(event)

Fired when the input group gains focus.

Parameters:

• {JSEvent} event The event object containing details about the focus gained event

---

onFocusLostMethodID(event)

Fired when the input group loses focus.

Parameters:

• {JSEvent} event The event object containing details about the focus lost event

---

onRightClick(event)

Fired when the input group is right-clicked.

Parameters:

• {JSEvent} event The event object containing details about the right-click event

---

API

addAddOn(addOn)

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:

• {CustomType<bootstrapextracomponents-input-group.AddOn>} addOn - object with text, position (LEFT, RIGHT)

---

addAddOnButton(addOnButton)

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:

• {CustomType<bootstrapextracomponents-input-group.AddOnButton>} addOnButton AddButtonOnToAdd

---

clearAddOnButtons()

Removes all addOnButtons from this input group

---

clearAddOns()

Removes all addOns from this input group

---

requestFocus()

Request the focus to this text field.

Example:

myElement.requestFocus();

---

setAddOnButtons(addOnButtons)

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:

• {Array<CustomType<bootstrapextracomponents-input-group.AddOnButton>>} addOnButtons An array of AddOnButton objects to configure the input group's buttons, each with properties such as text, position, event handlers, and styling.

---

setAddOns(addOns)

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:

• {Array<CustomType<bootstrapextracomponents-input-group.AddOn>>} addOns AddOns - Array of objects with text, position (LEFT, RIGHT)

---

Types

AddOn

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.

  • Type: map
• position

  • The position of the add-on relative to the input field (e.g. LEFT or RIGHT).

  • Type: string

  • Default Value: "LEFT"

• text

  • The text displayed on the add-on.

  • Type: tagstring

AddOnButton

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.

  • Type: map
• imageStyleClass

  • CSS style classes applied to the add-on button's image or icon.

  • Type: styleclass
• name

  • The unique name identifier for the add-on button.

  • Type: string

• onAction

  • The function to be executed when the add-on button is clicked.

  • Type: function
• onDoubleClick

  • The function to be executed when the add-on button is double-clicked.

  • Type: function
• onRightClick

  • The function to be executed when the add-on button is right-clicked.

  • Type: function
• position

  • The position of the add-on button relative to the input field (e.g. LEFT or RIGHT).

  • Type: string

  • Default Value: "RIGHT"

• styleClass

  • CSS style classes applied to the add-on button.

  • Type: styleclass
  • Default Value: "btn-default"

• text

  • The text displayed on the add-on button.

  • Type: tagstring

---