Button
The button control is used to allow users to continue through a Coach with a 'next' button to another Coach, or to exit a Coach with an 'exit' button for example. The button control always shows a label, to show an Image or an Icon as a button use an Image or Icon control.
Appearance
| Color style: | The color style for this control. {Default | Primary | Info | Success | Warning | Danger} |
ButtonColorStyle |
| Shape style: | Rounded, flat or square (default) control shape. {Default | Rounded | Flat} |
ButtonShapeStyle |
| Size: | Size-based styling for this control (default, large, small, extra-small) {Default | Large | Small | Extra-Small} |
ButtonSizeStyle |
| Outline only: | Shows the color-based style of the control only when it is hovered over. | Boolean |
| Icon: | Icon name, for example\: calendar, clock-o, camera, cloud-upload, bell, info, file-text, etc... Check http\://fontawesome.io/icons for a comprehensive list. Note: that the "fa-" prefix is optional | String |
| Width: | The width in px, % or em.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed. | String |
Behavior
| Tab index: | The tabbing sequence index of the form control. Indices start at 1, and can be set sparsely. For example, you can use 1, 5, 10. | Integer |
| Prevent multiple clicks: | Prevents the user from clicking the button more than once. | Boolean |
Formula
| Label formula: | The formula or expression to set the button label. For example, "OK" or ${"Text1"}.getText(). | String |
| Events | ||||||||
| On Load: |
| |||||||
| On Click: |
| |||||||
| On Boundary Event: |
| |||||||
Extends:
Methods:
Inherited
addClass(name, [replaced])
Add/replace CSS class(es) for this control
| Name | Type | Default | Description |
| name | {string} | CSS class name(s) to add to the control. Separate class names by a space if more than one class. | |
| replaced | {string} | CSS class name(s) to be replaced by the first argument. Separate class names by a space if more than one class. |
Example
| Button.addClass("green"); |
click()
Programmatically click this button
focus()
Set focus on this control
getColorStyle()
Returns:
{string}
Gets color style of button. NOTE: This always returns the color as set, to avoid ambiguity always set the color using "D"|"P"|"I"|"S"|"W"|"E"
getHelpText()
Returns:
{string}
Get help text for button
getShapeStyle()
Returns:
{string}
Gets shape style of button. NOTE: This always returns the shape style as set, to avoid ambiguity always set the shape style using "D"|"R"|"F"
getSizeStyle()
Returns:
{string}
Gets size style of button. NOTE: This always returns the size style as set, to avoid ambiguity always set the size style using "D"|"S"|"L"|"X"
getTabIndex()
Returns:
{integer}
Get tab index for Button control
getText()
Returns:
{string}
Get text of button
getType()
Returns:
{string}
Get descriptive string representing the type of control
getWidth()
Returns:
{string}
Get configured width for button (including unit)
Inherited
hide(collapseFlag)
Hide this view/control
| Name | Type | Default | Description |
| collapseFlag | {boolean} | Set to true to collapse the view (equivalent to a view setting of "NONE") |
Example
| MyView.hide(); |
Inherited
isBound()
Returns:
{boolean}
Indicates bound status of control.
Inherited
isEnabled()
Returns:
{boolean}
Checks if the view is enabled or not
Example
| var enabled = MyView.isEnabled(); |
Inherited
isVisible()
Returns:
{boolean}
Checks whether or not view is visible
Example
| var visible = MyView.isVisible(); |
Inherited
propagateUpValueChange(event)
Returns:
{boolean}
Propagates value change of control up through parent views
| Name | Type | Default | Description |
| event | {Event} | Value change event (usually an onchange event) |
Example
| MyView.propagateUp(event); |
setColorStyle(style)
Sets color style of button. NOTE: to avoid ambiguity always set the color using "D"|"P"|"I"|"S"|"W"|"E"
| Name | Type | Default | Description |
| style | {string} | "DEFAULT"|"DEF"|"D"=Default | "PRIMARY"|"PRI"|"P"=Primary | "INFO"|INF"|"I"=Info | "SUCCESS"|"S"=Success | "WARNING"|"WARN"|"W"=Warning | "DANGER"|ERROR|ERR"|"E"|"G"=Danger |
Inherited
setEnabled(enabled, required)
Enable/disable this view/control
| Name | Type | Default | Description |
| enabled | {boolean} | Enabled/read-only flag (true to enable view, false to disable/make read-only) | |
| required | {boolean} | Enable/disable required field flag for control |
Example
| MyView.setEnabled(false); //Make MyView read-only |
setHelpText(text)
Set help text for button
| Name | Type | Default | Description |
| text | {string} | Rollover text to be set |
setIcon(icon)
Sets icon to display on the button
| Name | Type | Default | Description |
| icon | {string} | visit http://fontawesome.io/icons/ for icon options |
setOutline(outline)
Sets outline style of button
| Name | Type | Default | Description |
| outline | {boolean} | {true | false} |
setShapeStyle(style)
Sets shape style of button. NOTE: to avoid ambiguity always set the shape style using "D"|"R"|"F"
| Name | Type | Default | Description |
| style | {string} | "Default"|"D"=Default | "ROUNDED"|ROUND"|"R"=Rounded | "FLAT"|"F"=Flat |
setSizeStyle(style)
Sets size style of button. NOTE: to avoid ambiguity always set the size style using "D"|"S"|"L"|"X"
| Name | Type | Default | Description |
| style | {string} | "DEFAULT"|"DEF"|"NORMAL"|"D"=Default | "SMALL"|"S"=Small | "LARGE"|"L"=Large | "EXTRA-SMALL"|"X-SMALL"|"XS"|"X"=X-small |
setTabIndex(tabIndex)
Sets tab index of Button control
| Name | Type | Default | Description |
| tabIndex | {integer} | Tab indices start at 1 and may be set sparsely |
setText(text)
Set text of button
| Name | Type | Default | Description |
| text | {string} | Text to be set on the button |
Inherited
setVisible(visible, collapse)
Show/hide this view/control
| Name | Type | Default | Description |
| visible | {boolean} | Visibility flag (true to show view, false to hide) | |
| collapse | {boolean} | Set to true to collapse the control space when visible is set to false. |
Examples
| MyView.setVisible(false, false); //Equivalent to MyView.hide() |
| MyView.setVisible(false, true); // Sets visibility to "None" |
setWidth(width)
Set width of button (e.g. 50px, 20%, 2em - omitting the unit assumes px)
| Name | Type | Default | Description |
| width | {string} | Button width |
Inherited
show()
Show this view/control
Example
| MyView.show(); |
Inherited
triggerFormulaUpdates([phase])
Broadcasts the expression trigger for the specified view
| Name | Type | Default | Description |
| phase | {int} | bpmext.ui.PHASE_NORMAL | The phase we are currently in |
Example
| MyView.triggerFormulaUpdates(); |