Input Group

Overview

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.

Get Started

Input Group demo

Add an Input Group to a form

In the Form Editor, drag the Input Group component from the Pallet onto the form, then select a dataprovider.

Create Input Group

If the component does not appear in the pallet, it means you do not have the Bootstrap Extra Components package installed. Click "Get more components" at the top of the pallet to open the Servoy Package Manager and install it.

Modifying an Input Group at Design-Time

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.

See the reference docs for Input Group for a complete list of its properties.

Setting the data-provider

Input Group's dataprovider can be set after the component has been added to the form or by setting it in dataprovider property, found in the Component Properties Editor.

AddOn

Input Group - addOn

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

Here are the steps to add an addOn to an Input Group:

1. Select the component in the Form Editor

2. Select the addOns property and click the + button in order to add one

3. Expand the addOns property to see the list of addOns.

4. In order to edit each addOn, expand it set its properties

AddOnButton

Input Group - addOnButton

AddOnButtons are buttons that can be added either to the left or right of a text field within an inputgroup.

AddOnButton properties can be found here.

Here are the steps to add an addOnButton to an Input Group:

1. Select the component in the Form Editor

2. Select the addOnButtons property and click the + button in order to add one

3. Expand the addOnButtons property to see the list of addOnButtons.

4. In order to edit each addOnButton, expand it set its properties

Using a format

Input Group's Format can be set in Format property. Depending on the type of each dataprovider, this will be done via the format editors for date, text, integer/number.

Setting the input type

Input Group's input type can be set in inputType property, found in the Component Properties Editor. It can be text, password or number.

Handling Click Events

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.

To Handle the event, double-click the value for the onDataChange 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.

Create method to handle the onDataChange event

/**
 *
 * @param oldValue
 * @param newValue
 * @param {JSEvent} event
 *
 * @return {Boolean}
 *
 * @private
 *
 * @properties={typeid:24,uuid:"28F84381-D7B4-44B3-8A5E-771C82C1A1D6"}
 */
function onDataChange(oldValue, newValue, event) {
	if(newValue.includes('USA')){
	    elements.info_usa.visible = true;
	}else {elements.info_usa.visible = false;}
	return true;
}

See the Input Group reference for a comprehensive list of all events

Modifying an Input Group at Runtime

Input Groups, like many components, can be modified at runtime through code. Below are a few examples of controlling a Input Group from code.

Enabling / Disabling an Input Group

You can easily change the enabled state of an Input Group at runtime.

Example:

function disableInputGroup(){
	elements.myInputGroup.enabled = false;
}

Hiding/Showing an Input Group

You can easily change the visible state of a Input Group at runtime.

Example:

function hideInputGroup(){
	elements.myInputGroup.visible = false;
}

Calling Input Group API Methods

Like most components, an Input Group has API methods which can be called from code. Below is an example of common API calls.

Add an AddOn

You can easily add an AddOn to an Input Group using the addAddOn method.

Example:

function AddAddOnInputGroup(){
	elements.myInputGroup.addAddOn({text:"new addOn", position:'LEFT'});
}

Add an AddOnButton

You can easily add an AddOnButton to an Input Group using the addAddOnButton method.

Example:

function AddAddOnButtonInputGroup(){
	elements.myInputGroup.addAddOnButton({text:'new btn', position:'RIGHT', onAction:onAction});
}

Remove AddOns

You can easily remove all AddOns of an Input Group using the clearAddOns method.

Example:

function removeAllAddOns(){
	elements.myInputGroup.clearAddOns();
}

Remove AddOnButtons

You can easily remove all AddOnButtons of an Input Group using the clearAddOnButtons method.

Example:

function removeAllAddOnButtons(){
	elements.myInputGroup.clearAddOnButtons();
}

Add CSS Style Class

You can easily add a style class to an Input Group using the addStyleClass method.

Example:

function AddStyleClassInputGroup(){
	elements.myInputGroup.addStyleClass('mycssclass');
}

See the Input Group reference for a complete list of programmable properties and methods.

Related Articles

The following articles are recommended for additional reading

• Inputgroup Reference Documentation

• Styling and Themes

• Scripting the UI