# Group Buttons

The Group Buttons component allows grouping a series of buttons on a single line.

To see a live sample of the component you can go [here](https://samples-prod.demo.servoy-cloud.eu/solution/components?a=groupButtons).

## Get Started

<div align="left"><figure><img src="/files/MXzUvWXo12pj9n2ezaVl" alt=""><figcaption><p>Group Buttons demo - single select</p></figcaption></figure></div>

### Add a Group Buttons to a form

In the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md), drag the Group Buttons component from the Pallet onto the form, then select a dataprovider and a valuelist.

<div align="left"><figure><img src="/files/eCNqFdHZSpac1zakL9r5" alt=""><figcaption><p>Create Group Buttons</p></figcaption></figure></div>

{% hint style="info" %}
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](/reference/servoy-developer/package-manager.md) and install it.
{% endhint %}

## Modifying a Group Buttons at Design-Time

Group Buttons, 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](/reference/servoy-developer/object-editors/form-editor.md) to see a list of properties in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties). Below are some common properties and how to set them at design time.

{% hint style="info" %}
See the reference docs for [Group Buttons](/reference/servoyextensions/ui-components/input-control/group-buttons.md) for a complete list of its [properties](/reference/servoyextensions/ui-components/input-control/group-buttons.md#properties).
{% endhint %}

### Setting the data-provider

Group Buttons dataprovider can be set after the component has been added to the form or by setting it in [dataprovider](/reference/servoyextensions/ui-components/input-control/group-buttons.md#dataproviderid) property, found in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties).

### Setting the input type

Group Buttons input type can be set in [inputType](/reference/servoyextensions/ui-components/input-control/group-buttons.md#inputtype) property, found in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties). It can be single select (`RADIO`) or multi select (`CHECKBOX`).

{% hint style="danger" %}
**IMPORTANT!**\
When the Group Buttons [inputType](/reference/servoyextensions/ui-components/input-control/group-buttons.md#inputtype) property is set to `CHECKBOX`, then [dataprovider](/reference/servoyextensions/ui-components/input-control/group-buttons.md#dataproviderid) property must be a variable that can contain multiples values, such as form or scope variable.\
Example:

```javascript
/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"FA8EF7B3-5A1C-43E6-A5A3-36E99197E38F"}
 */
var choice;
```

`dataprovider` is set as `choice`
{% endhint %}

### Setting the valuelist

Group Buttons [valuelist](/guides/develop/application-design/data-modeling/value-lists.md#overview) can be set it in [valuelist](/reference/servoyextensions/ui-components/input-control/group-buttons.md#valuelistid) property, found in the [Component Properties Editor](/reference/servoy-developer/views/properties.md#properties) and it should match the set [dataprovider](/reference/servoyextensions/ui-components/input-control/group-buttons.md#dataproviderid).

Example:

In order to get a group buttons with orders' ship countries, the followings settings should be made:

1. set the Group Buttons [dataprovider](/reference/servoyextensions/ui-components/input-control/group-buttons.md#dataproviderid):
   * if [inputType](/reference/servoyextensions/ui-components/input-control/group-buttons.md#inputtype) is `RADIO`, then [dataprovider](/reference/servoyextensions/ui-components/input-control/group-buttons.md#dataproviderid) can be either a table column (`shipcountry`) or another type of dataprovider
   * if [inputType](/reference/servoyextensions/ui-components/input-control/group-buttons.md#inputtype) is `CHECKBOX`, then [dataprovider](/reference/servoyextensions/ui-components/input-control/group-buttons.md#dataproviderid) must be a variable that can contain multiples values, such as form or scope variable
2. in case it doesn't exist, create a [valuelist](/guides/develop/application-design/data-modeling/value-lists.md#overview) using Table values and `shipcountry` column as dataprovider
3. set the countries list in [valuelist](/reference/servoyextensions/ui-components/input-control/group-buttons.md#valuelistid) property of the Group Buttons

## Handling Click Events

Like most components, Group Buttons have events, which allow you to execute some logic when something happens in the UI. Of course, the most common event for a Group Buttons 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](/reference/servoyextensions/ui-components/input-control/group-buttons.md#ondatachangemethodid) property in the [Properties Editor](https://github.com/Servoy/gitbook/blob/master/reference/servoy-developer/views/component-properties-editor.md). You will see the [Method Selection Wizard](/reference/servoy-developer/object-editors/method-selection-wizard.md). You'll have the option to select an existing Method or create a new Method. The method will be called when the Group Buttons's `onDataChange` event is fired and the [Event](/reference/servoycore/dev-api/application/jsevent.md) object will be passed to it.

<div align="left"><figure><img src="/files/1REPGdnOnofFmnNyHZf2" alt=""><figcaption><p>Create method to handle the onDataChange event</p></figcaption></figure></div>

```javascript
/**
 *
 * @param oldValue
 * @param newValue
 * @param {JSEvent} event
 *
 * @return {Boolean}
 *
 * @private
 *
 * @properties={typeid:24,uuid:"D2499C52-AC5E-4C9E-9B51-1415F0E83D04"}
 */
function onDataChange(oldValue, newValue, event) {
    //show and hide other page elements according to the selected value
    showOptions(newValue);
	return true;
}
```

{% hint style="info" %}
See the [Group Buttons reference](/reference/servoyextensions/ui-components/input-control/group-buttons.md) for a comprehensive list of [all events](/reference/servoyextensions/ui-components/input-control/group-buttons.md#events)
{% endhint %}

## Modifying a Group Buttons at Runtime

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

### Enabling / Disabling a Group Buttons

You can easily change the `enabled` state of a Group Buttons at runtime.

Example:

```javascript
function disableGroupButtons(){
	elements.myGroupButtons.enabled = false;
}
```

### Hiding/Showing a Group Buttons

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

Example:

```javascript
function hideGroupButtons(){
	elements.myGroupButtons.visible = false;
}
```

### Changing the valuelist

You can easily change the `valuelist` of a Group Buttons at runtime.

Example:

```javascript
function changeValuelist(){
	elements.myGroupButtons.valuelist = "myOtherValuelist";
}
```

## Calling Group Buttons API Methods

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

### Add CSS Style Class

You can easily add a style class to a Group Buttons using the [`addStyleClass`](/reference/servoyextensions/ui-components/input-control/group-buttons.md#api) method.

Example:

```javascript
function AddStyleClassGroupButtons(){
	elements.myGroupButtons.addStyleClass('mycssclass');
}
```

{% hint style="info" %}
See the [Group Buttons reference](/reference/servoyextensions/ui-components/input-control/group-buttons.md) for a complete list of programmable [properties](/reference/servoyextensions/ui-components/input-control/group-buttons.md#properties) and [methods](/reference/servoyextensions/ui-components/input-control/group-buttons.md#api).
{% endhint %}

## Related Articles

The following articles are recommended for additional reading

* [Button group Reference Documentation](/reference/servoyextensions/ui-components/input-control/group-buttons.md)
* [Styling and Themes](/guides/develop/application-design/styling-and-themes.md)
* [Scripting the UI](/guides/develop/programming-guide/scripting-the-ui.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/group-buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.