Class: VerticalLayout

VerticalLayout

The Vertical Layout control is used to hold content inside it vertically (stacked on-top of one another). A VerticalLayout control provides the following configuration properties in Process Designer:

Appearance

Layout Flow: Horizontal/vertical layout of child controls. Note: "Justified" is not a valid horizontal alignment option for the Inline Scroll and Auto-wrap layout options. Combining these options may result in unexpected layout behaviors
{Vertical | Vertical Tight | Horizontal | Horizontal Inline Scroll | Horizontal Tight | Horizontal Auto-wrap}
string
Horizontal Alignment: Horizontal alignment of child controls. Note: "Justified" is not a valid horizontal alignment option for the Inline Scroll and Auto-wrap layout options. Combining these options may result in unexpected layout behaviors
{Justified | Left | Center | Right}
string
Vertical Alignment: Controls the vertical alignment of the elements displayed in the layout. Only applies to horizontal layout flows.
{Top | Middle | Bottom}
string
Width: Width in px, %, em For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed string
Height: Height in px, %, em For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed string

Responsive

Sensor: (Optional) Id of the Responsive Sensor control containing this Layout. If ommitted, the nearest sensor in the parent chain is used. string
Behaviors: Specifies how the section should behave based on box factors defined in a responsive sensor ResponsiveBehavior[]
Box factor name Name of responsive sensor box factor to apply these attributes to string
Child layout Layout to use with specified box factor
{Vertical | Vertical Tight | Horizontal | Horizontal Inline Scroll | Horizontal Tight | Horizontal Auto-wrap}
string
Child align Alignment to use with specified box factor
{Justified | Left | Center | Right}
string
Child width Child widths to use with this box factor (e.g. 60%) Note that several (space-delimited) widths can be specified for the various controls contained in the layout - e.g. 80% 20% string
Visibility Visibility settings to use with this box factor
{Visible | None | Hidden}
string
Width Section width to use with this box factor string
Height Section height to use at this box factor string
Css style CSS styles to apply at this box factors string
Css class CSS classes to add at this box factor string

Performance

Async Loading: Provides a better UI experience for large data sets (at the expense of slower overall row-loading time once the section starts loading). Only used if this section is bound to a list. boolean
Async Batch Size: Defines how many rows are loaded synchronously in an asynchronous batch. This can help tune/optimize synchronous vs. asynchronous loading performance. Only used if this section is bound to a list. integer

Events

On Load:
me.setWidth("100%");
Javascript expression
On Responsive Update: string
Articles
Horizontal Layout
Vertical Layout

new VerticalLayout()

This constructor is never used explicitly.

Extends

Members

Methods

Add/replace CSS class(es) for this control
Name Type 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 optional 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");

appendElement(obj)

Adds the specified layout element (created by createListElement) to the table
Name Type Description
obj object The layout element to be added

getActiveBoxFactor(){object}

Returns "Behaviors" attributes, the vertical layout must be nested within Responsive Sensor control in order for it to work, and set the responsive sensor in the vertical layout.
Returns:
Type Description
object
JSON Structure of the Object
{
    "name" : activeBoxFactorName
    "lowerBound" : boxFactorLowerBound
    "upperBound" : boxFactorUpperBound
}

getHelpText(){string}

Get help text for section
Returns:
Type Description
string

getType(){string}

Get descriptive string representing the type of control
Returns:
Type Description
string

getWidth(){string}

Get configured width for section (including unit)
Returns:
Type Description
string
Hide this view/control
Name Type Description
collapseFlag boolean Set to true to collapse the view (equivalent to a view setting of "NONE")
Example
MyView.hide();
Indicates bound status of control.
Returns:
Type Description
boolean True if the control is bound to coach data.
Checks if the view is enabled or not
Returns:
Type Description
boolean Enabled status
Example
var enabled = MyView.isEnabled();
Checks if control label is visible
Returns:
Type Description
boolean Label visibility status
Example
var labelVisible = MyView.isLabelVisible();
Checks whether or not view is visible
Returns:
Type Description
boolean Visibility status
Example
var visible = MyView.isVisible();
Propagates value change of control up through parent views
Name Type Description
event Event Value change event (usually an onchange event)
Returns:
Type Description
boolean True if a formula update was triggered on the control's parent, otherwise false
Example
MyView.propagateUp(event);

removeElement(index)

Remove the specified layout element
Name Type Description
index integer The index of the layout element to be removed
Enable/disable this view/control
Name Type 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 section
Name Type Description
text string sets the help text for the section
Show/hide the label of this view/control
Name Type Description
visible boolean Label visibility flag (true to show view label, false to hide)
Example
MyView.setLabelVisible(false);

setSelected(obj, flag)

Sets whether or not an object is selected
Name Type Description
obj object Object to modify selection of
flag boolean Set whether object is selected or not {true | false}
Show/hide this view/control
Name Type 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 Description
width string sets the width of the section
Show this view/control
Example
MyView.show();
Broadcasts the expression trigger for the specified view
Name Type Default Description
phase int bpmext.ui.PHASE_NORMAL optional The phase we are currently in
Example
MyView.triggerFormulaUpdates();