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:
Description: Triggers whenever the view is loaded.
Example:
console.log("Button loaded")
On Click:
Description: Triggers when button is clicked, before navigating away from page. If evaluated expression returns false, the click will not fire a boundary event.
Example:
return ${Text1}.isValid();
On Boundary Event:
Description: Triggers upon reaching a Stay On Page event after a boundary event is fired through this control. For information on the status context variable see the context.trigger() method in the Knowledge Center.
Example:
alert("Stay on Page status '" + status + "'")
Context Variables status {string}
Extends:
com.ibm.bpm.coach.CoachView
Methods:

Inherited addClass(name, [replaced])
Add/replace CSS class(es) for this control
NameTypeDefaultDescription
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
NameTypeDefaultDescription
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
NameTypeDefaultDescription
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"
NameTypeDefaultDescription
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
NameTypeDefaultDescription
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
NameTypeDefaultDescription
text{string}Rollover text to be set

setIcon(icon)
Sets icon to display on the button
NameTypeDefaultDescription
icon{string}visit http://fontawesome.io/icons/ for icon options

setOutline(outline)
Sets outline style of button
NameTypeDefaultDescription
outline{boolean}{true | false}

setShapeStyle(style)
Sets shape style of button. NOTE: to avoid ambiguity always set the shape style using "D"|"R"|"F"
NameTypeDefaultDescription
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"
NameTypeDefaultDescription
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
NameTypeDefaultDescription
tabIndex{integer}Tab indices start at 1 and may be set sparsely

setText(text)
Set text of button
NameTypeDefaultDescription
text{string}Text to be set on the button

Inherited setVisible(visible, collapse)
Show/hide this view/control
NameTypeDefaultDescription
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)
NameTypeDefaultDescription
width{string}Button width

Inherited show()
Show this view/control
Example
MyView.show();

Inherited triggerFormulaUpdates([phase])
Broadcasts the expression trigger for the specified view
NameTypeDefaultDescription
phase{int}bpmext.ui.PHASE_NORMALThe phase we are currently in
Example
MyView.triggerFormulaUpdates();