Button List

Description

The Button List displays a series of buttons in either a vertical or horizontal orientation.

Name
Description
Dynamically Hide or Show and Enable or Disable Buttons in a Button-list

You can use Javascript to dynamically hide or show and enable or disable buttons in a Button List control. You can also dynamically add and remove buttons from the Button List.

Using a Button List Control to set Active Panes in a Tab Control

A common design in a tab control is to have a series of tabs along the border of the control. When the user clicks on a tab a corresponding pane opens. The Button list control can be used to replace the tabs on a tab control, such that clicking on a given button will open a corresponding pane.

Several Button List controls.

Depending on how the Button List is configured, either one button in the Button List or multiple buttons can be selected. When a button is 'selected' is is displayed as depressed. Buttons can be displayed as text only, image only or image and text. When displaying images and text, you can configure the image to be left, right, above or below the text.

Unlike a regular button, which has events, such as onClick, etc. the individual buttons in a Button List do not have events. Instead, you can define an onSelect or onClick event for the Button List as a whole. In the event handler you can refer to

this.value

to get the value of the button that was clicked on. The onSelect event is fired whenever the value in the Button List is changed (programmatically, using (say) the .setValue() method), or through the user interface (when the user clicks on a button). On the other hand, the onClick event is only fired when the user clicks on a button. When the onClick event fires, the onSelect event will also fire.

A common use case for Button Lists is to select the active pane in a Tab Control (much like you would see in an iOS application). In the image below, the Button List selects the active pane in a Tab Control (shown in the builder in the following image).

This image shows a Tab Control in a UX component. The method for selecting the active tab pane has been set to 'automatic' and the expression for each tab pane has been set to watch the value of the selected button in the Button List.

Another common use for a Button List is for radio button and checkbox controls in mobile applications.