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.
Get Started

Add a Group Buttons to a form
In the Form Editor, drag the Group Buttons component from the Pallet onto the form, then select a dataprovider and a valuelist.

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 to see a list of properties in the Component Properties Editor. Below are some common properties and how to set them at design time.
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 property, found in the Component Properties Editor.
Setting the input type
Group Buttons input type can be set in inputType property, found in the Component Properties Editor. It can be single select (RADIO
) or multi select (CHECKBOX
).
IMPORTANT!
When the Group Buttons inputType property is set to CHECKBOX
, then dataprovider property must be a variable that can contain multiples values, such as form or scope variable.
Example:
/**
* @type {String}
*
* @properties={typeid:35,uuid:"FA8EF7B3-5A1C-43E6-A5A3-36E99197E38F"}
*/
var choice;
dataprovider
is set as choice
Setting the valuelist
Group Buttons valuelist can be set it in valuelist property, found in the Component Properties Editor and it should match the set dataprovider.
Example:
In order to get a group buttons with orders' ship countries, the followings settings should be made:
set the Group Buttons dataprovider:
if inputType is
RADIO
, then dataprovider can be either a table column (shipcountry
) or another type of dataproviderif inputType is
CHECKBOX
, then dataprovider must be a variable that can contain multiples values, such as form or scope variable
in case it doesn't exist, create a valuelist using Table values and
shipcountry
column as dataproviderset the countries list in valuelist 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 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 Group Buttons's onDataChange
event is fired and the Event object will be passed to it.

/**
*
* @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;
}
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:
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:
function hideGroupButtons(){
elements.myGroupButtons.visible = false;
}
Changing the valuelist
You can easily change the valuelist
of a Group Buttons at runtime.
Example:
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
method.
Example:
function AddStyleClassGroupButtons(){
elements.myGroupButtons.addStyleClass('mycssclass');
}
Related Articles
The following articles are recommended for additional reading
Last updated
Was this helpful?