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: