ServoyCloudSupportSamplesOpen SourceCommunity

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:

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:

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:

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:

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:

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

PreviousHtml AreaNextRating

Last updated

Was this helpful?