When a form is created, you need to select the root container it will be using. All the other containers and widgets can only be placed inside the root container. The choice of the root container influences the resizing and layout possibilities for the form at runtime.
In BorderPanel, elements are placed alongside the panel borders or in its center. BorderPanel can incorporate up to 5 elements (containers or widgets) - 1 for each side and 1 in the center. When an element is placed in a BorderPanel, it takes all available space along the selected border. The size of an element placed into a BorderPanel can be defined in form, SystemTheme, or user theme. The position of an element inside a BorderPanel is defined using the borderPanelItemLocation property.
Container specific properties: borderPanelItemLocation
The CoordPanel is the most commonly used container for legacy compatible forms since it fully supports the legacy DISPLAY ... AT statement. Any element placed within CoordPanel will be positioned in classic 4GL rows and columns. The position of elements within the CoordPanel is specified using the location property, which specifies the element's top left corner on the horizontal and vertical axis respectively.
Container specific properties: location
GridPanel is a form container where the objects are placed within grid cells. Each element must occupy at least one grid cell. Two elements cannot occupy the same grid cell.
Grid lines are only visible during panel manipulations in the Form Designer, and are not visible at runtime. You can define the number of rows, columns, and their size (pixel, auto, percent) in the Structure View.
Container specific properties: gridLength (GridLengthType, GridLengthValue, GridMaxLength, GridMinLength), gridItemLocation (for child elements)
GroupBox container stores only one element (a widget or any container with its own children) inside a visible border with an optional titled frame at the top. Although GroupBox can have a widget as a child element, typically a GroupBox includes a container first.
Container specific properties: title, titleJustification
StackPanel is used to arrange elements in horizontal or vertical stacks. Elements in a StackPanel are automatically aligned and placed under each other or next to each other, depending on the panel orientation. The default stack panel orientation is Horizontal, and you can insert a new element at the top of the stack, at the bottom of the stack, or between the existing elements. At runtime the contents of the stack panel can be resized only in the direction opposite to the orientation of the container.
StackPanel can nest containers and widgets.
StackPanel child elements should have their width or height (depending on the StackPanel orientation) defined in form, theme, or CSS.
Container specific properties: Orientation
Tab container is used for storing only TabPage containers. Tab container does not create any TabPages, but allocates space for them. You can bring any TabPage forward by clicking on its title.
Container specific properties: TabPagePlacement
TabPage is a container that can only be placed inside the Tab container. A TabPage can contain one element (widget or container with its child elements). Each tab page has a title which is used to bring it to front at runtime or during form modification.
Container specific properties: Image, OnSelectTabPage
ScrollViewer container allows to store content with dimensions larger than the ScrollViewer itself. Horizontal and vertical scroll bars allow to view the hidden content. ScrollViewer can store only one child, which may be represented by a widget or another container.
Container specific properties: HorizontalScrollbarVisibility, VerticalScrollbarVisibility
Table container allows to create tables for data input and display.
A form table has a hierarchical structure, in which the Table container is the main Parent object.
Each widget placed inside a Table container will appear under a separate Table column in the Structure view.
Table identifier is linked to the identifier of the screen record nesting the table column fields. Therefore, editing one of these IDs automatically changes the other.
Container specific properties: GridColor, IsMultiselect, RowCount, RowHeight,
The TreeTable container allows to create tree tables without having to specify additional theme properties and settings.
As well as a standard table, the Tree table consists of columns, each having a field in it. A TreeTable has all the properties the standard table has and acquires some specific ones. Unlike the Table container, TreeTable includes the columns that are displayed, the columns that regulate the parent-child relations between the nodes, and the columns which specify additional settings - e.g., identify, whether the parent node is expanded or collapsed by default.
Container specific properties: GridColor, ColumnEdit, ColumnID, ColumnIsNode ,ColumnParentId, ColumnExpanded, ColumnImage