Layout container components

This article describes components in Components Library > Layout Container.

Box, Card, and Section Panel are on the Basic tab, and other components in this article are on the Featured tab.

Box

The Box component is a flexbox-based layout container that arranges child elements vertically or horizontally. It provides controls for direction, alignment, justification, spacing, and width. In the App Designer, select a Box on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the layout and behavioural properties of the Box.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Direction	Radio group (Column | Row)	Column	Specifies the layout direction of child elements. Column arranges elements vertically (stacked top to bottom). Row arranges elements horizontally (left to right).
Justify	Radio group (icon-based)	center	Sets the alignment for child elements along the main axis (justify-content). The available options change visually based on the Direction setting, but the values are the same: flex-start, center, flex-end, space-between, space-around. See Justify options.
Align	Radio group (icon-based)	center	Sets the alignment for child elements along the cross axis (align-items). The available options change visually based on the Direction setting. Values: flex-start, center, flex-end, stretch, baseline. See Align options.
Width	Radio group (Auto | Fill)	-	Controls the horizontal dimension of the Box. Auto adjusts width based on content. Fill sets the width to 100%, filling the entire available width.
Spacing	Number input (step: 4)	-	Controls the spacing (in pixels) between child elements inside the Box. Increments in steps of 4.

note

The Justify and Align properties use icon-based selectors with tooltips. Hover over each icon to see a description of the alignment behavior.

Justify options

The Justify property controls alignment along the main axis. When Direction is set to Column, the main axis is vertical; when set to Row, the main axis is horizontal.

Value	Description
flex-start	Aligns child elements to the start of the main axis. Elements are positioned at the beginning of the container.
center	Centers child elements as a group along the main axis. Equal space is left on both sides of the group.
flex-end	Aligns child elements to the end of the main axis.
space-between	Evenly distributes child elements along the main axis, with the first element at the start edge and the last element at the end edge. Equal space between each pair of adjacent elements.
space-around	Evenly distributes child elements along the main axis, with equal space around each element. The space between adjacent elements is twice the space at the edges.

Align options

The Align property controls alignment along the cross axis. When Direction is set to Column, the cross axis is horizontal; when set to Row, the cross axis is vertical.

Value	Description
flex-start	Aligns child elements to the start of the cross axis.
center	Centers child elements along the cross axis.
flex-end	Aligns child elements to the end of the cross axis.
stretch	Stretches child elements to fill the entire cross-axis dimension of the container.
baseline	Aligns child elements such that their baselines are aligned.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Box is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Box without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Box's supported events:

   • onClick — Triggered when the Box is clicked
   • onMouseOver — Triggered when the mouse pointer moves over the Box

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Event Binding window

Click the settings (gear) icon on an existing event to open the Event Binding window. This window contains:

• Select event — A left panel with two tabs:

  • Built-in function — Built-in event handlers provided by the platform
  • Event — A searchable list of all available event handlers in the current page, including custom ones. Click New Event at the top to create a new handler. Select an existing handler to bind it to this event.

• Event name — A text input displaying the name of the selected handler. You can rename it here.

• Advanced params settings — A toggle switch (default: Disable). The extended parameters are appended as a separate input parameter in JSON format after the original transparent transmission parameters, such as: onClick(event,extParams). When enabled, a JSON code editor appears where you can define the extra parameters.

• Click Confirm to save the binding, or Cancel to discard changes.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle box click
}

The onMouseOver handler receives the mouse event:

onMouseOver(event) {
  // Handle mouse over
}

Advanced

For more information, refer to Advanced.

Accessibility

The Box component follows accessibility best practices:

• Source Order: The DOM order of child elements follows the visual layout direction (Column or Row), ensuring screen readers and keyboard navigation follow a logical reading sequence
• Semantic Structure: Renders as a standard HTML container element, preserving the document's semantic structure for assistive technologies
• Interactive Usage: When an onClick or onMouseOver event is bound, consider adding an appropriate ARIA role (e.g., role="button") and keyboard event handlers so the Box is accessible to keyboard-only users

Best practices

1. Choose the Right Direction

   • Use Column (default) for vertical stacking of elements such as form fields, content sections, or card layouts
   • Use Row for horizontal arrangements such as toolbars, navigation items, or side-by-side content

2. Use Justify and Align Together

   • Combine Justify (main axis) and Align (cross axis) to achieve precise two-dimensional positioning of child elements
   • For example, set justify: center and align: center to perfectly center content within the Box

3. Consistent Spacing

   • Use the Spacing property instead of adding margins to individual child elements for uniform gaps
   • Spacing increments in steps of 4 to maintain visual rhythm (0, 4, 8, 12, 16, etc.)

4. Width Management

   • Use Auto width when the Box should size based on its content
   • Use Fill width when the Box should expand to occupy the full width of its parent container

5. Nesting Boxes

   • Box components can be nested to create complex layouts
   • A common pattern is a Row Box containing multiple Column Boxes to create a multi-column layout

Card

The Card component is a layout container that groups related content and actions into a visually distinct, bordered panel. It supports a title, subtitle, media area, custom header content, and a configurable content area with adjustable height. In the App Designer, select a Card on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and structural properties of the Card.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Free mode	Toggle switch	On	Toggles padding around the card content. When enabled, removes the default inner padding so content fills the entire card area.
Show symbol	Toggle switch	Off	Specifies whether to show a bullet symbol next to the card title.
Show separator	Toggle switch	Off	Specifies whether to show a horizontal separator line between the card header and the content area.
Has border	Toggle switch	Off	Controls whether the card displays a border around its outer edge.
Title	Switch Setter (i18n setter / Slot setter / Variable input)	Card	Sets the title displayed in the card header. Supports internationalisation. Can also be configured as a slot for custom rendered content.
Subtitle	Switch Setter (i18n setter / Slot setter / Variable input)	-	Sets the subtitle displayed below the title in the card header. Supports internationalisation. Can also be configured as a slot for custom rendered content.
Custom content	Switch Setter (i18n setter / Slot setter / Variable input)	-	Sets user-defined content displayed in the title bar area (typically on the right side of the header). Supports internationalisation. Can also be configured as a slot for custom rendered content.
Media	Switch Setter (i18n setter / Slot setter / Variable input)	-	Sets a picture or video displayed on the card. Supports internationalisation. Can also be configured as a slot for custom rendered content.
Content height	Switch Setter (String setter / Number setter / Variable input)	-	Specifies the fixed height of the card's content area (in pixels). This property only takes effect when Free mode is set to false. Accepts a number or a string value. Values of 22 or below are automatically adjusted to a minimum of 23.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Card is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Card without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Card's supported events:

   • onClick — Triggered when the Card is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle card click
}

Advanced

For more information, refer to Advanced.

Accessibility

The Card component follows accessibility best practices:

• Content Grouping: The Card renders as a container element that logically groups its title, subtitle, media, and body content, helping screen readers convey the relationship between these elements
• Title as Label: When a Title is set, it serves as a visible heading for the card's content, providing context for assistive technologies
• Interactive Usage: When an onClick event is bound, consider adding an appropriate ARIA role (e.g., role="button") and keyboard event handlers so the Card is accessible to keyboard-only users

Best practices

1. Use Titles for Context

   • Always provide a Title so users can quickly identify the purpose of each Card
   • Use the Subtitle for supplementary context when the title alone is not sufficient

2. Custom Header Content

   • Use the Custom content area to place action links, status badges, or other contextual controls in the card header
   • Keep header content concise to avoid cluttering the title bar

3. Content Height

   • Set an appropriate Content height to maintain visual consistency when multiple Cards are displayed side by side
   • Use auto (via a string value) when content length varies and the Card should expand to fit

4. Free Mode

   • Enable Free mode when you need full control over the inner layout, such as embedding a table or chart that should span edge to edge without default padding

5. Visual Hierarchy with Borders and Separators

   • Enable Has border when Cards are placed on a white background to visually separate them from the surrounding content
   • Enable Show separator to clearly distinguish the header area from the content area, especially when both title and body content are text-heavy

Section Panel

The Section Panel component is a layout container that groups content under a titled header bar. It provides a colored title bar with configurable title text, title color, and background color, along with optional CSS class names for the title and body areas. In the App Designer, select a Section Panel on the canvas to configure it through the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the visual properties of the Section Panel.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Title	Switch Setter (i18n setter / Slot setter / Variable input)	Title	Sets the title text displayed in the section header bar. Supports internationalisation. Can also be configured as a slot for custom rendered content.
Title color	Color picker	#FFFFFF	Sets the text color of the title.
Title class name	Text input	-	Sets a custom CSS class name for the title element, allowing additional styling.
Title background color	Color picker	#044EB4	Sets the background color of the title bar.
Body class name	Text input	-	Sets a custom CSS class name for the body (content) area of the section panel, allowing additional styling.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Natural Layout

The Natural Layout component is a page-level layout container that organises content through a hierarchical structure of sections, blocks, and cells. It provides built-in header and footer regions, responsive content-width breakpoints, and configurable spacing between layout regions. When you create a new page, it contains a Natural Layout component initially. In the App Designer, select a Natural Layout on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, and Advanced.

note

The Natural Layout follows a strict parent-child hierarchy: Natural Layout > Section > Block > Cell. Child components are dropped into Cell containers, which are the innermost content holders. Refer to Add layout containers for details on this structure.

Props

The Props tab contains the structural and visual properties of the Natural Layout, organised into groups.

If a property displays the Variable Binding icon , that means it supports variable binding.

Page features

Property	UI Control	Default	Description
Open header	Toggle switch	Off	Enables a header region at the top of the layout. When toggled on, a header slot is created for placing navigation, titles, or other header content.
Open footer	Toggle switch	Off	Enables a footer region at the bottom of the layout. When toggled on, a footer slot is created for placing action buttons, copyright text, or other footer content.

Content width configuration

This section allows you to define responsive breakpoints that control how the layout adapts to different viewport widths. Supports variable input (in JSON format) and ArraySetter described in the following.

Property	UI Control	Default	Description
Width	Dropdown (Default matching | 1440 | 1200 | 750)	Default matching	Sets the viewport width at which this breakpoint activates.
Maximum width of content	Number input (step: 20)	1000	Specifies the maximum width (in pixels) of the content area within this breakpoint.
Number of grids	Dropdown (12 | 8 | 4 | 1)	12	Sets how many grid columns the layout is divided into at this breakpoint.

Style

Property	UI Control	Default	Description
Main background color	Color picker	rgba(255,255,255,0)	Sets the background color of the main content area.
Regional gap	Number input (step: 4)	16	Controls the vertical spacing (in pixels) between sections within the layout.
Segmental cleavages	Number input (step: 4)	16	Controls the spacing (in pixels) between blocks within a section.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Best practices

1. Use the Section-Block-Cell Hierarchy

   • Place Sections inside the Natural Layout to define top-level content regions
   • Use Blocks within Sections to create horizontal column arrangements
   • Drop UI components into Cells, which are the innermost content containers

2. Responsive Content Width

   • Configure multiple breakpoints in Content width configuration to ensure the layout adapts gracefully to different screen sizes
   • Use a 12-column grid for desktop and reduce to 4 or 1 column for smaller screens

3. Consistent Spacing

   • Use Regional gap and Segmental cleavages to maintain uniform spacing between layout regions instead of adding margins to individual components

4. Header and Footer Regions

   • Enable the header region for navigation bars, page titles, or breadcrumbs
   • Enable the footer region for action buttons or copyright information

Cell

The Cell component is a flexible content container within the Natural Layout hierarchy. It holds child components and provides flex-based layout controls for alignment, spacing, and sizing. Cells are the innermost containers where UI components are placed. In the App Designer, select a Cell on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the layout and sizing properties of the Cell, organised into groups.

If a property displays the Variable Binding icon , that means it supports variable binding.

Shortcut keys

The Props tab displays a reference panel of keyboard shortcuts for working with cells:

Shortcut	Action
ctrl+alt+w	Append a column
shift+w	Prepend a column
ctrl+alt+r	Append a row
shift+r	Prepend a row
ctrl+alt+f	Select parent
alt+c	Open component panel

Layout

Property	UI Control	Default	Description
Horizontal alignment	Radio group (icon-based)	flex-start	Sets the alignment for child elements along the main axis (justify-content). Values: flex-start, center, flex-end, space-between, space-around, space-evenly.
Vertical alignment	Radio group (icon-based)	flex-start	Sets the vertical alignment for child elements. Values: flex-start (top), center (middle), flex-end (bottom), stretch, space-between, baseline.
Spacing	Number input (step: 2)	0	Controls the spacing (in pixels) between child elements inside the Cell.
Display Block	Toggle switch	Off	Controls whether the Cell renders as a block-level element.

Width configuration

The Width configuration group controls the horizontal dimension of the Cell. This group is hidden when the Cell is a child of a Col component.

Property	UI Control	Default	Description
Width type	Radio group (Full width | Fixed)	Full width	Controls the width behaviour of the Cell. Full width makes the Cell fill the entire available width. Fixed allows you to set a specific width value.

Height configuration

The Height configuration group controls the vertical dimension of the Cell. This group is hidden when the Cell is a child of a Row component.

Property	UI Control	Default	Description
Height type	Radio group (Auto | Min-height)	Auto	Controls the height behaviour of the Cell. Auto adjusts the height based on content. Min-height allows you to set a minimum height value for the Cell.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Best practices

1. Use Alignment for Content Positioning

   • Combine Horizontal alignment and Vertical alignment to precisely position child elements within the Cell
   • Use space-between for evenly distributing elements with space between them

2. Consistent Spacing

   • Use the Spacing property to create uniform gaps between child elements instead of adding individual margins

3. Convert to Grid

   • Right-click a Cell and use the Change to Grid action to convert it into a grid container for more advanced multi-cell layouts

Free Node

The Free Node component is a layout container that supports absolute positioning, allowing child elements to be placed at specific coordinates on the canvas. It is helpful for creating overlays, floating elements, or custom visual arrangements that do not follow the standard document flow. In the App Designer, select a Free Node on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the positioning property of the Free Node.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Z-index	Number input (min: 0)	-	Determines the stacking order of the Free Node within the user interface. Higher values place the element in front of elements with lower values.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Free Node without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Free Node's supported events:

   • onClick — Triggered when the Free Node is clicked
   • onMouseOver — Triggered when the mouse pointer moves over the Free Node

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle Free Node click
}

The onMouseOver handler receives the mouse event:

onMouseOver(event) {
  // Handle mouse over
}

Advanced

For more information, refer to Advanced.

Best practices

1. Use Z-index for Layering

   • Set a Z-index value to control the stacking order when multiple Free Nodes or other elements overlap
   • Use higher z-index values for elements that should appear in front

2. Position via Styles

   • Use the Styles tab to set position, top, left, right, and bottom properties to place the Free Node at the desired location on the canvas

3. Avoid Overuse

   • Reserve Free Nodes for special cases such as floating action buttons, overlays, or tooltip-like elements
   • For standard page layouts, it is recommended to use Natural Layout or Box

1 Column

The 1 Column component (Col) is a responsive grid column container that occupies a configurable number of grid columns within a Row. It supports responsive breakpoints, vertical alignment, and offset positioning. When dragging a 1 Column from the Components Library, it creates a standalone column. For multi-column layouts, use 2 Columns, 3 Columns, or 4 Columns. In the App Designer, select a 1 Column on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

note

A 1 Column (Col) must be a direct child of a Row component. When components are dragged into a Row, they are automatically wrapped in a Col container.

Props

The Props tab contains the grid and responsive properties of the 1 Column.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Span	Switch Setter (String setter / Number setter / Variable input)	8	Sets the number of grid columns this column occupies. Values range from 1 to 24 in a 24-column grid system.
Fixed span	Switch Setter (String setter / Number setter / Variable input)	-	Sets a fixed column width where the width value equals 20 pixels multiplied by the specified number. Values range from 1 to 30.
Offset	Switch Setter (String setter / Number setter / Variable input)	-	Sets the number of grid columns by which this column is shifted horizontally from its default position. Values range from 1 to 24.
Fixed offset	Switch Setter (String setter / Number setter / Variable input)	-	Sets a fixed horizontal offset where the offset value equals 20 pixels multiplied by the specified number. Values range from 1 to 30.
Align	Dropdown (Top | Center | Bottom | Baseline | Stretch | None)	None	Controls the vertical alignment of this column, overriding the Row's align setting.

Responsive display configuration

This section controls the visibility of this column at different responsive breakpoints.

By default, it shows a "No content added yet" placeholder. Click "Add an item +" to add an entry, which appears as a text input. Enter true to hide at all breakpoints, false to show at all, a string like 'xs' to hide at a specific breakpoint, or an array like ['xxs', 'xs'] to hide at multiple breakpoints. You can delete an entry using the delete icon, or reorder entries by dragging.

Property	UI Control	Breakpoint	Description
XXS	Number input	>= 320px	Sets the number of grid columns this column spans at the XXS breakpoint.
XS	Number input	>= 480px	Sets the number of grid columns this column spans at the XS breakpoint.
S	Number input	>= 720px	Sets the number of grid columns this column spans at the S breakpoint.
M	Number input	>= 990px	Sets the number of grid columns this column spans at the M breakpoint.
L	Number input	>= 1200px	Sets the number of grid columns this column spans at the L breakpoint.
XL	Number input	>= 1500px	Sets the number of grid columns this column spans at the XL breakpoint.

Property	UI Control	Default	Description
Component	Switch Setter (String setter / Function Binding / Variable input)	-	Specifies the HTML element used to render this column. Defaults to div, but you can specify a different element such as ul or li.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Col is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the 1 Column without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the 1 Column's supported events:

   • onClick — Triggered when the column is clicked
   • onMouseOver — Triggered when the mouse pointer moves over the column

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle column click
}

The onMouseOver handler receives the mouse event:

onMouseOver(event) {
  // Handle mouse over
}

Advanced

For more information, refer to Advanced.

Best practices

1. Use Span for Proportional Widths

   • Set the Span property to control how much horizontal space each column occupies within the 24-column grid
   • For example, span: 12 creates a half-width column, span: 8 creates a one-third width column

2. Responsive Breakpoints

   • Use the responsive breakpoint properties (XXS through XL) to define different column widths at different screen sizes
   • This ensures the layout adapts gracefully to phones, tablets, and desktops

3. Use Offset for Spacing

   • Use Offset to push a column to the right without adding an empty column
   • This is helpful for centering content or creating asymmetric layouts

Page Header

The Page Header component displays a structured header area at the top of a page, typically containing a title, subtitle, breadcrumb navigation, avatar, and action buttons. It provides a consistent page identity and navigation context. In the App Designer, select a Page Header on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the visual and structural properties of the Page Header.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Title	i18n setter	This is a designer title	Sets the main title text displayed in the header. Supports internationalisation.
Subtitle	i18n setter	-	Sets the subtitle text displayed below the main title. Supports internationalisation.
Show avatar	Toggle switch	Off	Enables the display of an avatar icon in the header. When enabled, an Avatar configuration group appears with additional settings.
Show breadcrumb	Toggle switch	Off	Enables the display of breadcrumb navigation above the title. When enabled, a Breadcrumb configuration group appears.
Show actions	Toggle switch	Off	Enables the display of action buttons in the header. When enabled, an Action item configuration section appears.

Avatar (conditional)

When Show avatar is enabled, an Avatar configuration group appears:

Property	UI Control	Default	Description
Icon	Icon selector	-	Sets the icon displayed in the avatar.
Content	i18n setter	-	Sets the text content displayed inside the avatar (typically initials). Supports internationalisation.
Size	Radio group (Small | Medium | Large)	-	Controls the size of the avatar.
Shape	Radio group (Circle | Square)	-	Controls the shape of the avatar.
Src	Text input	-	Sets the URL of an image to display as the avatar.

Breadcrumb (Conditional)

When Show breadcrumb is enabled, an Breadcrumb configuration group appears.

It is an array editor that allows you to add, remove, and reorder breadcrumb items. Each item displays a Title field with an i18n setter. You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new breadcrumb item. Each item has:

Property	UI Control	Default	Description
Title	i18n setter	home page	Sets the display text of the breadcrumb item. Supports internationalisation.
Link	Text input	-	Sets the URL the breadcrumb item navigates to when clicked.
Target	Radio group (New window | Same window)	Same window	Controls whether the breadcrumb link opens in a new window or the same window.

Action item (conditional)

When Show actions is enabled, an Action item configuration group appears. It is an array editor that allows you to add, remove, and reorder action items. Each item displays an Action dropdown and a Type dropdown. You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new action item. Each item has:

Property	UI Control	Default	Description
Text	i18n setter	custom	Sets the display text of the action button. Supports internationalisation.
Action	Dropdown (Submit | Ok | Cancel | Reset | Custom)	Custom	Specifies the action type for the button.
Type	Dropdown (Primary | Secondary | Normal)	Secondary	Sets the visual style of the action button.

Each action item also has an Advanced settings section:

Property	UI Control	Default	Description
Event	Dropdown	onClick	Specifies the event that triggers the action.
Type	Segmented control (Dialog | Link | Alert | Tooltip)	Dialog	Specifies the type of interaction triggered by the event.
Bind popup	Dropdown	-	Binds a popup component to the action button. Available when Type is set to Dialog.
Click event	Function binding	-	Binds a custom function to the click event.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Page Header is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Best practices

1. Always Provide a Title

   • Set a descriptive Title so users can quickly identify the current page or section
   • Use the Subtitle for additional context, such as a description or status

2. Use Breadcrumbs for Navigation

   • Enable Show breadcrumb to help users understand their location within the application hierarchy
   • Configure breadcrumb items with meaningful titles and links

3. Avatar Usage

   • Use an avatar with an icon or image to visually associate the page with a specific entity, such as a user profile or a project

4. Action Buttons

   • Enable Show actions when the page header needs to include primary actions such as "Edit", "Save", or "Export"

Dialog

The Dialog component displays a modal popup window that overlays the page content. It supports normal and notice (tooltip) dialog types, configurable footer buttons, title tooltip, and background mask. Dialogs are used to prompt user action, display confirmations, or show detailed information. In the App Designer, select a Dialog on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

note

A Dialog can only be placed as a direct child of a Page component. In the Components Tree, it displays as a Modal View.

Props

The Props tab contains the visual and behavioural properties of the Dialog.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Popup type	Radio group (Tooltip | Normal)	Normal	Specifies the type of the dialog. Normal creates a standard modal dialog. Tooltip creates a notice-style dialog with a status indicator.
State	Dropdown (Notice | Warning | Help | Success | Error | Loading)	Success	Sets the status indicator displayed in the dialog. This property only takes effect when Popup type is set to Tooltip.
Show title	Toggle switch	On	Controls whether the dialog displays a title bar.
Title	i18n setter	Title	Sets the title text displayed in the dialog header. Only visible when Show title is enabled. Supports internationalisation.
Visible	Toggle switch	On	Controls whether the dialog is visible on the page.
Show tooltip	Toggle switch	Off	Enables a tooltip icon next to the dialog title that displays helper text on hover. Only visible when Popup type is set to Normal.
Tooltip icon	Icon selector	prompt	Sets the icon displayed in the tooltip. Only visible when Show tooltip is enabled.
Tooltip information	i18n setter	Prompt copy	Sets the text content of the tooltip. Only visible when Show tooltip is enabled. Supports internationalisation.
Background mask	Toggle switch	On	Controls whether a semi-transparent background mask is displayed behind the dialog.
Close mode	Multi-select dropdown (Close | Mask | Esc)	Esc, Close	Specifies how the dialog can be closed. Close adds a close button. Mask allows closing by clicking the background mask. Esc allows closing by pressing the Escape key. Multiple options can be selected.
Auto focus	Toggle switch	Off	Automatically places input focus on the dialog when it opens.

Action item

The Action item section is an array editor that allows you to add, remove, and reorder action buttons displayed in the dialog footer. Each item displays an Action dropdown and a Type dropdown. You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new action item. Each item has:

Property	UI Control	Default	Description
Text	i18n setter	-	Sets the display label of the action button. Supports internationalisation.
Action	Dropdown (Submit | Ok | Cancel | Reset | Custom)	Ok	Specifies the built-in action type for the button.
Type	Dropdown (Primary | Secondary | Normal)	Primary	Sets the visual style of the button.
Click event	Function binder	-	Binds a custom function to the button's click event.

Action items configuration

This section allows you to configure action items. Supports variable input (in JSON format) and ObjectSetter described in the following.

Property	UI Control	Default	Description
Button visibility	Number input	-	Sets the number of action buttons that are visible before overflow.
Fixed bottom	Toggle switch	Off	Sticks the action buttons to a fixed position at the bottom of the dialog.
Show saved time	Toggle switch	Off	Displays the last saved timestamp.
Alignment	Radio group (Left | Center | Right)	Right	Controls the horizontal alignment of the action buttons.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Dialog is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Dialog without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Dialog's supported events:

   • onOk — Triggered when the OK button is clicked
   • onCancel — Triggered when the Cancel button is clicked
   • onClose — Triggered when the dialog is closed (by any method)

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onOk handler is called when the user clicks the OK button:

onOk() {
  // Handle OK action
}

The onCancel handler is called when the user clicks Cancel:

onCancel() {
  // Handle cancel action
}

The onClose handler is called when the dialog closes:

onClose(trigger, event) {
  // trigger: the reason for closing ('close', 'mask', 'esc')
}

Advanced

For more information, refer to Advanced.

Programmatic control

The Dialog can be opened and closed programmatically using the component reference:

// Open the dialog
this.$('pro-dialog-xxx').open();

// Close the dialog
this.$('pro-dialog-xxx').close();

Best practices

1. Use Appropriate Dialog Types

   • Use Normal for standard modal interactions that require user input or confirmation
   • Use Tooltip (notice) for status notifications such as success, warning, or error messages

2. Close Mode Configuration

   • Always include at least one close method (Close button, Mask click, or Esc key)
   • For critical dialogs requiring explicit user action, use only the Close button and disable Mask and Esc closing

3. Footer Button Order

   • Place the primary action (e.g., "OK") prominently and the secondary action (e.g., "Cancel") as a normal button
   • Use the Alignment property to position buttons consistently (typically right-aligned)

4. Background Mask

   • Keep the Background mask enabled (default) to focus user attention on the dialog content
   • Disable the mask only for non-blocking informational dialogs

Drawer

The Drawer component displays a sliding panel that emerges from the edge of the screen, overlaying the page content. It supports four placement directions (top, right, bottom, left), configurable size, title with optional tooltip, background mask, and action buttons. Drawers are used for secondary workflows such as forms, detail views, or settings panels. In the App Designer, select a Drawer on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, and Advanced.

note

A Drawer can only be placed as a direct child of a Page component.

Props

The Props tab contains the visual and behavioural properties of the Drawer.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Title	i18n setter	Drawer	Sets the title text displayed in the drawer header. Supports internationalisation.
Show tooltip	Toggle switch	Off	Enables a tooltip icon next to the drawer title that displays helper text on hover. Only visible when a Title is set.
Tooltip content	i18n setter	-	Sets the text content of the tooltip. Only visible when Show tooltip is enabled. Supports internationalisation.
Tooltip icon	Icon selector	-	Sets the icon displayed in the tooltip. Only visible when Show tooltip is enabled.
Placement	Radio group (Top | Right | Bottom | Left)	Right	Specifies the edge of the screen from which the drawer slides in.
Size	Radio group (Large | Medium | Small)	Medium	Sets the overall size of the drawer panel.
Visible	Toggle switch	On	Controls whether the drawer is visible on the page.
Background mask	Toggle switch	On	Controls whether a semi-transparent background mask is displayed behind the drawer.
Close mode	Multi-select dropdown (Esc | Close | Mask)	Esc, Close	Specifies how the drawer can be closed. Esc allows closing by pressing the Escape key. Close adds a close button. Mask allows closing by clicking the background mask. Multiple options can be selected.

Action item

The Action item section allows you to configure the action buttons displayed in the drawer footer. Each action item has the same configuration options as the Dialog action item.

Action items configuration

This section allows you to configure action items. Supports variable input (in JSON format) and ObjectSetter described in the following.

Property	UI Control	Default	Description
Button visibility	Number input	-	Sets the number of action buttons that are visible before overflow.
Fixed bottom	Toggle switch	On	Sticks the action buttons to a fixed position at the bottom of the drawer.
Show saved time	Toggle switch	Off	Displays the last saved timestamp.
Alignment	Radio group (Left | Center | Right)	Right	Controls the horizontal alignment of the action buttons.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Drawer is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Programmatic control

The Drawer can be opened and closed programmatically using the component reference:

// Open the drawer
this.$('pro-drawer-xxx').open();

// Close the drawer
this.$('pro-drawer-xxx').close();

Best practices

1. Choose the Right Placement

   • Use Right (default) for detail panels, forms, or settings that complement the main page content
   • Use Bottom for toolbars, media players, or content previews
   • Use Left for navigation panels or sidebars
   • Use Top for notifications or banners

2. Size Selection

   • Use Small for simple forms or short content
   • Use Medium for standard detail views or multi-field forms
   • Use Large for complex content that requires more horizontal space

3. Drawer vs. Dialog

   • Use a Drawer for secondary workflows where users may need to reference the main page content behind the panel
   • Use a Dialog for focused actions that require the user's full attention

4. Background Mask

   • Keep the Background mask enabled (default) to visually separate the drawer content from the page
   • Disable the mask when the drawer is used as a persistent side panel

2 Columns

The 2 Columns component creates a Row container with two equally-sized 1 Column (Col) children, each spanning 12 grid columns out of the 24-column grid. This is a pre-configured layout snippet for quickly setting up a two-column layout. In the App Designer, select the Row container on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the layout properties of the Row container. These properties are shared across the 2 Columns, 3 Columns, and 4 Columns components.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Gutter	Switch Setter (String setter / Number setter / Variable input)	-	Controls the spacing (in pixels) between columns within the row.
Wrap	Toggle switch	Off	Controls whether columns wrap to a new line when they exceed the available row width.
Fixed width	Dropdown (XXS | XS | S | M | L | XL | None)	None	Sets the row width to match a specific responsive breakpoint, keeping the width fixed regardless of viewport changes.
Align	Dropdown (Top | Center | Bottom | Baseline | Stretch)	Top	Controls the vertical alignment of columns within the row.
Justify	Dropdown (Center | Start | End | Space-between | Space-around)	Start	Controls the horizontal distribution of columns within the row when there is extra space.

Responsive display configuration

This section controls the visibility of the row at different responsive breakpoints. It provides a Switch Setter to support mixed input, including i18n, boolean, array, and variable (in JSON format).

The default mode is array setter, which allows you to add and remove configuration items. Click "Add an item +" to add a new item.

Property	UI Control	Default	Description
Component	Switch Setter (String setter / Function Binding / Variable input )	-	Specifies the HTML element used to render the row. Supports Function Binding.
Right to left	Toggle switch	Off	Enables right-to-left mode, reversing the visual and text direction to support RTL languages.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Default layout

When dragged from the Components Library, the 2 Columns layout creates:

• Row (parent container)
  • Col with span: 12 (left column — 50% width)
  • Col with span: 12 (right column — 50% width)

Best practices

1. Adjust Column Proportions

   • After placing a 2 Columns layout, select individual Col children and adjust their Span values to create asymmetric layouts (e.g., span: 8 and span: 16 for a sidebar + main content layout)

2. Use Gutter for Spacing

   • Set the Gutter property on the Row to create consistent spacing between columns instead of adding padding to individual columns

3. Responsive Behaviour

   • Combine with responsive breakpoint properties on the Col children to stack columns vertically on smaller screens

3 Columns

The 3 Columns component creates a Row container with three equally-sized 1 Column (Col) children, each spanning 8 grid columns out of the 24-column grid. This is a pre-configured layout snippet for quickly setting up a three-column layout. The Row container uses the same properties as described in 2 Columns.

Default layout

When dragged from the Components Library, the 3 Columns layout creates:

• Row (parent container)
  • Col with span: 8 (left column — 33.3% width)
  • Col with span: 8 (center column — 33.3% width)
  • Col with span: 8 (right column — 33.3% width)

For the full list of configurable properties, Styles tab, or Advanced tab, see 2 Columns.

4 Columns

The 4 Columns component creates a Row container with four equally-sized 1 Column (Col) children, each spanning 6 grid columns out of the 24-column grid. This is a pre-configured layout snippet for quickly setting up a four-column layout. The Row container uses the same properties as described in 2 Columns.

Default layout

When dragged from the Components Library, the 4 Columns layout creates:

• Row (parent container)
  • Col with span: 6 (25% width)
  • Col with span: 6 (25% width)
  • Col with span: 6 (25% width)
  • Col with span: 6 (25% width)

For the full list of configurable properties, Styles tab, or Advanced tab, see 2 Columns.

Last updated on 20 May 2026