Collapsible Panel

The Collapsible Panel is a section that comes with many easy to configure behavior and appearance options.

Appearance

Color style:	Color-based styling for this control (default, info, success, warning, danger) {Default \| Primary \| Success \| Info \| Warning \| Danger}	`CollapsiblePanelColorStyle`
Width:	The width in px, % or em.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed.	`String`
Body height:	Height in px, em\r\nFor example\: 50px, 0.4em. If no unit is specified, px is assumed	`String`

Behavior

Initially collapsed:	Set to true to keep section collapsed on load.	`Boolean`
Panel group name:	If a panel is in a group, only one panel in the same group can be open at any time - the others collapse automatically	`String`

Formula

Title formula: The formula or expression to calculate the section title. String

Events

On Load:

Description:	Triggers whenever the view is loaded.
Example:	`if(me.isExpand()){me.collapse();}`

On Expand:

Description:	Triggers when the control expands.
Example:	`me.setColorStyle("S")`

On Collapse:

Description:	Triggers when the control collapses.
Example:	`me.setColorStyle("");${CollapsiblePanel1}.expand()`

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

collapse()

Collapse the panel programmatically

expand()

Expand the panel programmatically

getTitle() Returns: {string}

Get title for section

getType() Returns: {string}

Get descriptive string representing the type of control

getWidth() Returns: {string}

Get configured width for section (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();

isExpanded() Returns: {boolean}

Returns whether or not the panel is expanded

Inherited isLabelVisible() Returns: {boolean}

Checks if control label is visible

Example

var labelVisible = MyView.isLabelVisible();

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)

Set the color style of the panel. NOTE: to avoid ambiguity always set the color using "D"|"I"|"P"|"S"|"W"|"G"

Name	Type	Default	Description
style	`{string}`		"DEFAULT"\|"DEF"\|"D"=Default \| "INFO"\|INF"\|"I"=Info \| "PRIMARY"\|"P"=Primary \| "SUCCESS"\|"S"=Success \| "WARNING"\|"WARN"\|"W"=Warning \| "DANGER"\|"ERROR"\|"ERR"\|"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

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

setTitle(title)

Set title of section

Name	Type	Default	Description
title	`{string}`		Section title

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

Name	Type	Default	Description
width	`{string}`		the width of the panel

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