Element containers
The term 'Element container' applies to a category of form elements, that may contain other elements – to include other element containers.
Elements contained in a container are referred to as content of the container. In the form editor, they appear as nested levels of the structure below the container in the tree view hierarchy (see below).
How nested elements are displayed at runtime depends on the type of container (see list below).
Element container types
'Data type' property
An optional object type which is used to create new element data. If this type is not given, an empty object will be created instead.
This way, for example, an element container can directly load a new instance of a user object if no data is initially given.
Data fields
If a Data field is specified for an element container the data fields of contained elements are resolved relative to the context of the container.
Containers without a Data field are ignored. The content of ignored containers is included in the data structure if data fields are indicated.
However, it is possible to 'skip' containers including their content, by assigning the status 'Skip' for the Data field of the container.
►NOTE◄ Skipping containers including content is demonstrated for a portal. Still, the option is also available for elements in for input forms. Skipped elements are simply ignored in data exchange (read and write) with the business object.
Both techniques are illustrated by the following examples:
Example 1
{ "vehicleDetails": { "vehicleID": "12345", "vehicleName": "Forklift Truck UH8" }, "driverInfo": { "driverFirstname": "John", "driverLastname": "Smith" }}The data structure above could be projected into a form with containers as below:
For better transparency in this example, the labels for elements were set to match their data fields, and sample data was entered into each input field as a default value. The 'Column layout' container highlighted by selection in the screenshot does not specify a data field and is not reflected in the data structure.
Data can be loaded for parts of an hierarchy per container by the action Populate element data.
Example 2
Starting from the previous example, we now want to skip the container 'driverInfo', to remove it and the contained elements (driverFirstname, driverLastname) from the data structure, without deleting their data field settings.
For this purpose the data field of the container 'driverInfo' is switched to 'Skip' status by clicking the button with the No-Parking-icon or entering the string $skip$ into the data field input:
This status can be revoked by clicking the button again. Then the original data field setting will be reactivated.
In the portal (in test mode) the input fields within the skipped container appear empty, since the skipping also prevents default values from being loaded. They still can be populated with data:
However, the data structure will not feature information on the driver:
{ "vehicleDetails": { "vehicleID": "12345", "vehicleName": "Forklift Truck UH8" }}Property 'Inherit required' for containers
The property 'Inherit required' is a specific option for element containers located in the section for Common settings. With this option checked, the container will appear as 'required' if at least one of the contained elements is flagged as 'required'.
Embedding a sub form
Elements that belong to the category of 'Element containers' can be used to embed other entire forms (input forms, portals or dashboard) in the context of another. This requires the specification of a Form reference in the form structure which is linked to the container. Containers that bear such a reference appear highlighted in the element tree as shown below.
Please refer to Embed forms (Sub-forms) for further information.
Behaviour for overflowing content
The term 'content overflow' describes circumstances, when the space required to display content exceeds the space provided by that container. The choice for the property Overflowing content defines how this situation is 'handled' by the container.
The following options are available for handling Overflowing content:
Visible – Overflowing content is displayed regardless of limitations posed by the container. This may lead to layout issues as overflowing content may overlap with other content.
Hidden – Overflowing content does not appear visually, but is still available i.e. for searching the browser page.
Scroll – Scrollbars are automatically activated for the container, to enable scrolling for its content, as requied.
Tip: Details and examples of form layouts can be found in the chapter Form layout.