Repeatable element

A Repeatable element container can be used to handle homogeneous data as a list structure.

In Input forms for business objects, this element is not available independently, because Input forms are limited to predefined data structures to ensure data integrity. However, 'Repeatable elements' are linked to some predefined elements of business objects (e.g. line items or plural attributes of Shipments) and behave and work by the principles described here.

The content of a Repeatable element container in the form editor defines the structure of the 'Repeated element', which is duplicated at runtime by clicking the images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg symbol. Each generated instance of the repeated structure represents a row of the list.

►NOTE◄ A Repeatable element container can be checked for content by the Filled behaviour, which executes Actions on 'false', if empty, and Actions on 'true', when populated.

Runtime example

images/download/attachments/78259831/image2019-3-22_11-2-30-version-1-modificationdate-1630408667475-api-v2.png

The screenshot shows a simple format for entering line items for a shipment. An icon is included to the left of the four input fields, which is repeated for every line.

Configuration

The following specific properties define the configuration of a Repeatable element container:

images/download/attachments/78259831/image-2024-11-18_11-13-38-version-1-modificationdate-1731924818555-api-v2.png

Min. entries/Max. entries define the lower and upper limits for instances of the repeated element at runtime. 0 or empty disables the respective limit.

►IMPORTANT◄ The setting for Max. entries is ignored when data is loaded and only limits the addition of new entries. It is not considered as a validation criterion and the container can be saved with 'surplus' entries. If a container contains less entries than defined by Min. entries, the form will show additional (empty) instances of the repeated element. As long as this does not produce required fields or read-only fields with default values, the lower limit is also not considered as a validation criterion and an object can be saved while lacking the required number of entries for a container.

The options Allow add by user and Allow remove by user define whether the images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg and images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/forbidden.svg symbols appear at runtime. The visibility of these symbols can also be controlled by the action Allow add/remove. When the symbols are disabled, the actions Add element (optional/repeatable element) and Remove element (optional/repeatable element) can be used to add or remove elements.

►NOTE◄ If the Min. entries/Max. entries parameters are set to the same value (>0), the images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg and images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/forbidden.svg symbols do not appear disabled, but disappear completely.

A link for Synchronized numeric element can be used to synchronize the count of instances in the repeatable element container with the value of a numerical (or text) field.

►IMPORTANT◄ This synchronization works bidirectionally, so numerical entries for the value in the synchronized input field control the number of instances in the container.

  • Increasing the number adds new instances. Decreasing the number removes instances, deleting their content, if any.

  • These manipulations can also be used for automation purposes, like deleting entries or defining a preset number of instances.

  • If users should receive interactive access to the synchronized field, the number of entries should be restricted (by Min. Entries and Max. Entries), to prevent them from accidentally adding large numbers of instances in the container. Basically, direct interactive access to the synchronized field should be strictly limited if not avoided.

The Field for change notice (Portals only) parameter specifies the name of a data field, which is automatically populated by change operations (create, update, delete) for instances of the repeated element in the form. See section 'Change notice' (below) for details.

The parameters Display option and Page size only apply and appear for View type 'Grid' (see the following section).

  • Display option features the choices Details top, Details bottom or Datagrid only for positioning the details section (if any) in grid view (see below).

  • Page size defines the number of rows to show per page in a grid. 0 or empty deactivates paging for the grid.

View 'Grid' type

With the Grid' display type, the entries of a container appear as rows in a data grid, i.e. as a list format with the usual Lobster Data Platform / Orchestration functions for sorting, filtering, exporting, etc.

Columns in this list are automatically generated for all elements in the repeated element, which provide content suitable for a list.

Such elements provide further configuration options for the column in the properties section of the same name. The availability of the column-related properties depends on the 'Render as column' option:

Setting

Effect

Render as column

Specifies whether the element should be available as a column in the grid.

Column visibility

Provides several options on how the visibility of this column should behave (only if 'Render as column' is enabled)

  • Visible – displays the column regardless of the visibility of the original element, unless the user hides it manually

  • Hidden – hides the column regardless of the visibility of the original element, unless the user shows it manually

  • Visibility of the element – shows/hides the column depending on the visibility of the original element, unless the user changes the visibility manually

In addition, columns can be made temporarily (in)visible via the options menu of the grid (top right), which the user can then change again in the same way.
Via the Reset button on the grid, the default configured visibilities can be restored and thus no longer overwrite columns in the 'Visibility of the element' mode.
In editor mode, the Reset function resets all configured visibilities.

images/download/attachments/78259831/image2020-10-29_14-37-55-version-1-modificationdate-1630408667333-api-v2.png
The Reset function is accessible via the grid options.

Column width

Defines the width of the column either in percentage or in pixels.
►NOTE◄ Changing the column width directly in the grid enters it accordingly as a pixel dimension.

Text alignment

Sets the alignment of the text in a cell of the column ( left justified, centered or right justified).

Heading – word wrap

Sets how words wrap in the column header

  • None – no pagination allowed

  • Only at line break characters – text wraps regardless of space at line break characters

  • Automatic – text breaks at line break characters, depending on space

Word wrap

Specifies how words wrap in a column cell (options similar to heading – word wrap).

Label printout

A Ausdruck which calculates the label of a column cell. The input value is the value of the element.
Tip: If values from other fields are needed here, they can be obtained as usual via $el().

CSS class expression

A Ausdruck which determines the CSS class name of a column cell HTML element.
Tip: If values from other fields are needed here, they can be obtained as usual via $el().

Depending on the selection for the Display option, a details area can be displayed above or below the data grid, which, unlike the grid, also allows editing.

Runtime example

Based on the above example for the positions of a shipment, switching the display type to “Grid” results in the following image:

images/download/attachments/78259831/image2019-3-22_11-19-46-version-1-modificationdate-1630408667471-api-v2.png

The datagrid (2) features the four input elements as columns and corresponding data per line item in rows. The image element (parcel icon) is not represented as a column.

A details area (1) is displayed above the datagrid, which shows the data for the entry selected in the grid based on the complete design for the repeated element – here: including the image element.

The details area supports editing data, as far as allowed according to settings for input elements in the design of the repeated element, as well as adding or removing entries by the buttons New and Remove (equivalent to images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg and images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/forbidden.svg ).

The choice for Display option (see Properties, above) defines one of the following layouts for the grid view:

Display option

Effect

Datagrid only

images/download/attachments/78259831/image2019-3-22_11-35-37-version-1-modificationdate-1630408667496-api-v2.png
►NOTE◄ Without a details area, editing data or adding/removing entries is not possible.

Details at the top

images/download/attachments/78259831/image2019-3-22_11-32-9-version-1-modificationdate-1630408667485-api-v2.png

Details at the bottom

images/download/attachments/78259831/image2019-3-22_11-32-55-version-1-modificationdate-1630408667480-api-v2.png

Details on the right


images/download/attachments/78259831/image2020-12-1_15-2-20-version-1-modificationdate-1630408667319-api-v2.png


Details on the left


images/download/attachments/78259831/image2020-12-1_15-3-3-version-1-modificationdate-1630408667312-api-v2.png


Change notices

If Portals enable interactive changes to the ‘list data’ via a Repeatable element container, the processing status of the ‘list’ visible in the form usually has to be ‘synchronized’ with an external data source or processing logic, for example, by transferring the data of the Repeatable element container or the entire form data to a profile or event handler.

In order to make the triggered mechanisms – such as the persistence or synchronization of the ‘list data’ – as flexible, lean and efficient as possible, the Repeatable element container provides the option of using the configuration parameter Field for change notice to designate a data field for the repeated element, in which a change notice is automatically set as a text value by certain processing steps in the form:

Automatically assigned
change notice

Significance for the relevant instance of the repeated element ('row'):

created

The instance was added in the form and (possibly) updated afterwards.

updated

The instance was updated in the form from a state where the change notice was not ‘created.

deleted

The instance was deleted from the form (and previously created or loaded and possibly updated).

For example, if a profile or event handling is executed after a call with the data from a Repeatable element container, it may be useful to assign values to the change notice data field for certain ‘rows’ and return them to the form together with other data. Any text value or ‘no value’ ($null) may be assigned. However, it is also possible to assign one of the predefined change notice values (see table above). The following considerations must be taken into account:

  • As long as the change notice created is valid for an instance, the value updated is not set automatically when the instance is updated.

  • An instance with the change notice deleted is not visible in the form, but still included in the form data.

CAUTION◄ The data field linked as Field for change notice should not be assigned to a form element, otherwise an automatically generated change notice may be overridden by its value.

CAUTION◄ If a Repeatable element container contains Entities with a predefined data structure as entries, an arbitrary additional field cannot simply be defined as a Field for change notice. Finally, it must be possible to parse the data in the list entry as a whole against the data model for the entity type in question. If the Field for change notice is not defined for an entity type used, a change notice is assigned superficially, but is not reproduced when the container is validated. The following scenario illustrates the relationship:

  • A Search (Form designer) in a portal returns a list of Company accounts that are assigned to a Repeatable element container as entries via Populate element data.

  • For this Repeatable element container, a changeStatus field is designated as a Field for change notice, which is not contained in the data structure for the company.

  • If one of the listed Company accounts is removed in the portal, the corresponding entry disappears from the list in the interface. In the background, the value deleted is assigned to the changeStatus field.

  • During read access to the list entries, the entry marked as deleted by the changeStatus field is parsed against the data model for Company accounts. The information from the changeStatus field is lost in the process. Effectively, it is no longer possible to determine from the data for the entry that the entry has been deleted, even though it has 'disappeared' from the form.

  • If necessary, a text field from the data model of the company account (or e.g. the company address referenced therein) that is not relevant in the context of the portal can be 'reused' as a Field for change notice, the value of which is then overwritten by the text for the change notice.


NOTE◄ This problem can be easily avoided with a Tuple search (Form designer), which lists 'expandable' client objects instead of entities in the result. However, this means that accessing the associated entities to update data, for example, requires greater effort.

Application example

In a portal, a Repeatable element container is used to define a multi-stop flight route, by entering a series of airports identified by ICAO codes.

Once a corresponding route has been compiled, the ‘Synchronize’ Button is clicked to transfer route to a planning system which registers each waypoint and assigns a unique identifier from a number range. This id is returned to the portal together with other current waypoint information and should appear in the data field extID. This communication could take place via a synchronous profile call (via the action Call profile).

To enable specific handling for changes to an already registered route, a data field ‘CUD’ (Create, Update, Delete) is linked as Field for change notice for the Repeatable element container. In the profile, the following processing logic is controlled by the change notice value:


Change notice

Action in the planning system

Response to the portal

CUD: created

Registration of the waypoint
(ID from number range)

CUD: created_okextID: (number range value)

current information for waypoint (...)

CUD: updated

Updating the waypoint

CUD: updated_okextID: (unchanged)

current information for new waypoint (...)

CUD: deleted

Deleting the waypoint

Waypoint removed

In the following concrete examples, the current change notice value per row is visualized by a Label left of the images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/add.svg / images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/forbidden.svg symbols.

Change notice

Example before synchronization

Example after synchronization

CUD: created

images/download/attachments/78259831/image2020-4-30_8-18-54-version-1-modificationdate-1630408667551-api-v2.png

  • Three airports are added as new waypoints.

  • The change notice created is assigned.

images/download/attachments/78259831/image2020-4-30_8-19-44-version-1-modificationdate-1630408667555-api-v2.png

  • The External ID is provided by registration.

  • The change notice created_OK confirms success.

CUD: updated

images/download/attachments/78259831/image2020-4-30_8-34-56-version-1-modificationdate-1630408667560-api-v2.png

  • The change notice updated is assigned.

images/download/attachments/78259831/image2020-4-30_8-35-31-version-1-modificationdate-1630408667565-api-v2.png

  • The change is confirmed by change notice updated_OK.

  • The External ID remains unchanged.

CUD: deleted

images/download/attachments/78259831/image2020-4-30_8-36-45-version-1-modificationdate-1630408667569-api-v2.png

  • Waypoint EHAM was removed.

  • With the change notice deleted the entry appears only in the data (see export structure below):


Export structure:

{
"div": {
"clazz": "list",
"data": [
{
"p": {
"CUD": "created_OK",
"ADICAO": "EGLC",
"extID": "#04E91"
}
},
{
"p": {
"CUD": "updated_OK",
"ADICAO": "EBCI",
"extID": "#04E93"
}
},
{
"p": {
"CUD": "deleted",
"ADICAO": "EHAM",
"extID": "#04E92"
}
}
]
}
}

images/download/attachments/78259831/image2020-4-30_8-37-12-version-1-modificationdate-1630408667574-api-v2.png

  • In the course of synchronization, the waypoint EHAM is also deleted from the data, as the export structure (below) shows:


Export structure:

{
"div": {
"clazz": "list",
"data": [
{
"p": {
"CUD": "created_OK",
"ADICAO": "EGLC",
"extID": "#04E91"
}
},
{
"p": {
"CUD": "updated_OK",
"ADICAO": "EBCI",
"extID": "#04E93"
}
}
]
}
}