Container

Used to group elements

Look&Feel Settings:

Name (mandatory) - name of component Direction (mandatory) - how elements are arranged inside the container, vertically or horizontally. Horizontall be default Wrap (mandatory) - wrapping content when it goes beyond the bounds of the container. Nowrap by default Alignment (mandatory) - alignment of elements in a container. Start by default. Sizes (mandatory) - container dimensions. In pixels or percentage. Width 100% by default Max Width (mandatory) - maximum container width in pixels or percentage. 100% by default Margin (mandatory) - outer indent. 0 by default Padding (mandatory) - inner indent. 0 by default Image, Gradient or Overlay (not mandatory) - for background Background color (not mandatory) - primary color for background Border (not mandatory) - component border settings Visible (mandatory) - makes the component visible if turned on. Enabled by default.

Workflow triggers:

• onCreate – fires when the element is created on the page;

• onShow – fires when the component changes its state to visible (displayed on the page);

• onHide – fires when the component changes its state to hidden (stops being displayed);

• onDestroy – fires when the component is destroyed;

• onClick - fires when the component is clicked.

Component Actions:

Container get properties

Gets the container's properties. Input parameters:

• Component Id [string] - container component's identifier.

Output parameters:

• Width [string] - components's width;

• Height [string] - components's height;

• Flex direction [enum] - components's direction;

• Wrap [enum] - components' wrap;

• Alignment horizontal [enum] - componet's alignment by horizontal;

• Alignment vertical [enum] - component's alignment by vertical;

• Margin [string] - component's margin;

• Padding [string] - component's padding;

• Border [string] - component's border;

• Background color [string] - component's background color;

• Visible [boolean] - component visibility state.

Container set properties

Sets all container's properties

Input parameters:

• Component Id [string] - container component's identifier;

• Width [string] - components's width;

• Height [string] - components's height;

• Flex direction [enum] - components's direction;

• Wrap [enum] - component's wrap;

• Alignment horizontal [enum] - componet's alignment by horizontal;

• Alignment vertical [enum] - component's alignment by vertical;

• Margin [string] - component's margin;

• Padding [string] - component's padding;

• Border [string] - component's border;

• Border radius [string] - component's border radius;

• Background color [string] - component's background color;

• Visible [boolean] - component visibility state.

Container update properties

Update container's properties

Input parameters:

• Component Id [string] - container component's identifier;

• Width [string] - components's width;

• Height [string] - components's height;

• Flex direction [enum] - components's direction;

• Wrap [enum] - components' wrap;

• Alignment horizontal [enum] - componet's alignment by horizontal;

• Alignment vertical [enum] - component's alignment by vertical;

• Margin [string] - component's margin;

• Padding [string] - component's padding;

• Border [string] - component's border;

• Border radius [string] - component's border radius;

• Background color [string] - component's background color;

• Visible [boolean] - component visibility state.

Usage example

A container can be used to group elements. For example, to assemble a form from several different input fields: