Container

The main purpose of the Container component is to act as separate host for other child components. It groups a set of components together in a dedicated frame, arranged on a separate grid from the main application canvas. A Container can be made scrollable to create a scroll container to place larger content than the available space.

When the dimensions of a Container on the canvas are adjusted, its content resizes dynamically.

Container content resizes dynamically

Use this component to create separate areas in your app for specific component groups. The styling options allows these blocks to stand out visually compared to the rest of the application.

Properties

The Container component offers the following configuration properties.

Property	Type	Default value	Behavior
Header text	stringWithJs	'Header'	When the "Show Header" property is set to true, the text of this property is displayed in the header of the container. This configuration is not accessible in the properties panel otherwise.
Scrollable	boolean	true	Determines whether the container should allow scrolling in case its content is larger than the container itself. If disabled, overflowing content is hidden and not accessible to the end user.
Show Header	boolean	false	When set to true, the container renders a text header, which can be modified in the "Header text" configuration.

Scrollable containers

A container with "Scrollable" set to false is still scrollable in the app editor, but highlights overflowing content with a red background.

Warning the user about potentially inaccessible container content

The purpose of this is to still allow the app editor to freely modify the container content, while aware that some content will be inaccessible for the app user. The production version does not scroll for such a container, and cuts off overflowing content.

Events

The Container does not offer any events.

API

The Container exposes the following API in the JavaScript runtime environment.

Property / Function	Type	Behavior
headerText	string	Current string value of the "Header text" configuration.
setHeaderText(value)	(value: string) => void	Sets the header text to the provided string value.
setShowHeader(value)	(value: boolean) => void	Adjusts the flag whether the header text should be displayed to the provided boolean value.
showHeader	boolean	Current boolean value of the "Show header" configuration.