Caption box

Contains a single view and gives you more options to position the view's label.

Appearance

Width:	Width of the view (%, px)	`String`
Label placement:	Label placement {Top \| Left \| Bottom \| Right}	`CaptionPlacement`
Label width:	The width of the label in px, % or em.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed.	`String`
Label horizontal alignment:	Horizontal alignment to be used (left, center, right) {Left \| Center \| Right}	`TooltipHorizontalAlignment`
Label vertical alignment:	Vertical alignment to be used (Top, Middle, Bottom) {Top \| Middle \| Bottom}	`VerticalAlignment`
Shrink to content:		`Boolean`
Color style:	Button color {Default \| Normal \| Muted \| Light-gray \| Primary \| Info \| Success \| Warning \| Danger}	`ParagraphColorStyle`
Label size:	The size of the label. {Default \| Super-Large \| Extra-Large \| Larger \| Large \| Small \| Smaller}	`OutputTextSizeStyle`
Label weight style:	The weight of the label text. {Default \| Slim \| Normal \| Semi-bold \| Bold}	`OutputTextWeightStyle`

Formula

Label formula: The formula or expression to calculate the caption value. String

Events

On Load:

Description:	Triggers whenever the view is loaded.
Example:	`console.log("Button loaded")`

Articles

Extends:

com.ibm.bpm.coach.CoachView

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");

Inherited getData() Returns: {Object}

Retrieve bound data associated this view/control. Only works for views/controls with bound data.

Example

var dec1 = MyDecimal.getData();

getLabel() Returns: {string}

Get label associated with control

getLabelColorStyle() Returns: {string}

Gets color style of label/caption

getLabelPlacement() Returns: {string}

Get label/caption placement for the control

getLabelSizeStyle() Returns: {string}

Gets color style of label/caption

getLabelWeightStyle() Returns: {string}

Gets color style of label/caption

getLabelWidth() Returns: {string}

Get label width of CaptionBox control (e.g. 50px, 20%, 2em - omitting the unit assumes px)

getType() Returns: {string}

Get descriptive string representing the type of control

getWidth() Returns: {string}

Get configured width for text control (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 isLabelVisible() Returns: {boolean}

Checks if control label is visible

Example

var labelVisible = MyView.isLabelVisible();

Inherited isValid() Returns: {boolean}

Returns the valid status as last set by the setValid() method.

Example

var valid = MyView.isValid();

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);

Inherited recalculate()

Only for formula-enabled views!
Explicitly triggers the re-evaluation of the formula
for this view (if a formula has been specified). If the view is not formula-enabled, recalculate() does nothing.

Example

Text1.recalculate();
//If the formula for Text1 is: new Date().toString(), Text1 is updated to the current date/time

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

setLabel(label)

Set label for control

Name	Type	Default	Description
label	`{string}`		label text for the control

setLabelColorStyle(style)

Sets color style of label/caption

Name	Type	Default	Description
style	`{string}`		"D"=Default \| "M"=Muted \| "L"=Light-gray \| "P"=Primary \| "I"=Info \| "S"=Success \| "W"=Warning \| "G"=Danger

setLabelHorizontalAlignment() Returns: {string}

Set the horizontal alignment for the label/caption

setLabelPlacement(placement)

Set label placement for caption box

Name	Type	Default	Description
placement	`{string}`		"T","TOP"=Top \| "L","LEFT"=Left \| "B","BOTTOM"=Bottom \| "R","RIGHT"=Right

setLabelSizeStyle(style)

Sets color style of label/caption

Name	Type	Default	Description
style	`{string}`		"R","SUPER"=Super large \| "X","EXTRA-LARGE"=Extra large \| "G","LARGER"=Larger \| "L","LARGE"=Large \| "S","SMALL"=Small \| "M","SMALLER"=Smaller \| "D","DEFAULT"=Default

setLabelVerticalAlignment() Returns: {string}

Set the veritical alignment for the label/caption

Inherited setLabelVisible(visible)

Show/hide the label of this view/control

Name	Type	Default	Description
visible	`{boolean}`		Label visibility flag (`true` to show view label, `false` to hide)

Example

MyView.setLabelVisible(false);

setLabelWeightStyle(style)

Sets color style of label/caption

Name	Type	Default	Description
style	`{string}`		"D"=Default \| "N"=Normal \| "S"=Slim \| "M"=Semi-bold \| "B"=Bold

setLabelWidth(labelWidth)

Set label width of CaptionBox control (e.g. 50px, 20%, 2em - omitting the unit assumes px)

Name	Type	Default	Description
labelWidth	`{string}`		Control's label width

Inherited setValid(valid, errorText)

Flag this view/control as valid or invalid

Name	Type	Default	Description
valid	`{boolean}`		Valid/invalid flag (`true` to set view valid, `false` to make it invalid - which typically shows the view with "invalid" styling and indicator)
errorText	`{string}`		Validation error text to show on the invalid-styled view

Example

MyView.setValid(false, "Please fix your data entry"); //Make MyView invalid

Inherited setViewData(data, createPseudoBinding)

Set/update bound data associated this view/control. Only works for views/controls with bound data.

Note: Should only be used with simple type bindings, or complex type bindings with simple type properties.
Should not be used with bindings that have properties that are lists or compext types. For complex types, set bindings using
the binding.set pattern detailed in the Knowlege Center section Binding Data and Configuration Options

Name	Type	Default	Description
data	`{Object}`		Value of bound data. The type of this parameter must match the type of the bound data.
createPseudoBinding	`{boolean}`		If set to true, creates a pseudo binding if there is no current binding.

Example

MyView.setViewData("TEST"); //Updates bound data to the string 'TEST'

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 text control (e.g. 50px, 20%, 2em - omitting the unit assumes px)

Name	Type	Default	Description
width	`{string}`		width of the input group

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();

Methods

Parent

Helpers