• Type
• Multi-state Settings
• Keep pressed
• Data variable
• Initial state
• Show expression
• Disabled expression
• Auto-hide disclosure

Multi-state Settings

Description

Multi-state Toggles can be defined by setting the type to Multi-state and then click the smart field for the builder.

Clicking the button next to the 'Multi-state settings' property opens the multi-state builder. This builder allows you to define as many states as you want. For each state you define the HTML and the Icon. The HTML is used if the Button Layout property is set to a button layout type that includes text. The icon is used if the Button Layout property is set to a button layout type that includes an icon. You can specify the names of the data properties that are added to the ControlBar's Data object to define the multi-state toggle button.

For example, in the image shown above, we specify that a root variable called myMultistateButton should be added to the Data object and that the root variable will have two sub-properties (called value and data) that will hold the current state of the button-toggle and the definition of the various button states.

Here is the Data definition that would be automatically added to the ControlBar's data for the above multi-state button definition:

"myMultiStateButton": {
    "value": 1,
    "data": [
        {"html": "State1","icon": ""},
        {"html": "State2","icon": ""},
        {"html": "State3","icon": ""]
    }

If you prefer to add the above data structure to the ControlBar data yourself (on the Data tab of the builder), then you can point the button-toggle to use your hand-coded button-toggle definition by selecting the Point to existing definition in ControlBar data property in the builder.