Adding and parameterizing components

Adding a new component

A new component can be added in edit mode using the component palette on the left. To do this, drag the selected component from the palette and drop it in the appropriate place on the form.

Figure 1. Palette of simple components

Edit mode and moving a component

To conveniently move components around the form area, it is worth enabling layout grid mode with the button Layout grid located in the lower left corner of the form. After clicking it, a grid will appear on the form, making it easier to position and adjust component sizes (Layout grid / layout).

To move a component, hold the mouse button over it and drop it in the desired place. Above the lifted component, fields will light up in two colors:

• green: marking a valid place for the inserted component,

• red: invalid place (e.g. we are trying to place one component on top of another or place a component inside an embedded composite component or radio group).

If we want to drop a component on a new line, hover over the space between components. This space will expand, making it easier to drop the component.

After moving the last component from a given row, that row will be automatically removed.

Figure 2. Inserting a component

Possible operations of moving components

Source location of the component	Destination location of the component	Component type	Possible
page	page	all
page	section	all
section	page	all
section	section	all
composite component	anywhere	all
anywhere	composite component	all
checkbox group	anywhere	checkbox
radio group	anywhere	radio
tile group	anywhere	tile

Changing the component width

Changing component widths (layout)

Going to the editor of content placed on the form/in the component

In the context menu of the formatted content component, there is an option to open the associated artifact in the content editor.

Selecting Go to content source takes the user to the content editor in the library.

The option Go to content source is available only when an artifact in name-version format is attached to the component.

Figure 3. Context menu actions of the formatted content component

Going to the source editor of a composite/business component

In the context menu of an embedded composite/business component, there is an option to open the attached artifact in the component editor.

Selecting Go to component source will take the user to the composite/business component editor in the library.

Figure 4. Context menu actions of the composite/business component

Component properties panel

Clicking a component placed in the workspace opens the attribute editing panel for that component (the selected component is marked with a dashed border).

To view the parameters for a composite or business component, select it by clicking the handle that appears above the component on the left side.

Figure 5. Presentation of the selected composite component on the form.

Properties are grouped into sections. Clicking on an area not occupied by any component or outside the page area allows previewing the properties of the entire page.

Figure 6. Component Label properties panel

Inheriting the number of columns

Composite components (e.g. tile group, radio group) have the option to enable the property Inheriting the number of columns. It causes the column widths in the component to be the same as in its parent. This is achieved by ensuring that the component width always corresponds to the number of its columns. When changing the width of such a component, columns will be added or removed accordingly. Because of this, the component width can be reduced only when it contains empty columns.

Figure 7. Properties concerning the number of columns

The option to enable inheriting the number of columns is active only when the component width is equal to the number of columns. Changing the number of columns from the attribute editor disables the property in question.

Figure 8. Radio group component with the "Inherit number of columns" property disabled

Usage example:

Consider the case of expanding a composite component by 3 cells, whose width and number of columns are both 3.

Component with the "Inherit number of columns" property

Before the change	After the change

After expanding, the number of columns is still equal to the width. 3 additional empty columns were created.

Component without the "Inherit number of columns" property

Before the change	After the change

The expansion did not change the number of columns in the component, and there are still 3. The component width was increased to 6. Each component column now spans two page cells.

Mapping a value to a field of an external data model

Availability of functionality depends on the license and may not be available in all deployments.

The field of the external data model to which the component value will be mapped can be selected in two ways:

• from a dropdown list,

• from a tree.

Defined mappings are added at the end of the unconditional mapping group.

Figure 9. Option for mapping a component value to a field of an external data model

Only field mappings that have no more than one mapping defined can be edited. Otherwise, the editor displays a button redirecting to the tab Data model, which allows defining more complex mappings.

Figure 10. Option for mapping a component that has more than one mapping

The mapping editor is visible only when the form has at least one defined external system process.

Removing components from the page

Components can be removed by clicking the menu button in the upper right corner of the selected component, and then choosing the option Delete. If the component cannot be removed, the delete icon is not displayed.

Figure 11. Removing a component

Undoing operations

The user can use the option to undo any change made while working with the working copy (from the moment it was created). To undo the effects of the last action performed, simply press the button Undo changes located in the upper right corner of the editor, or use the keyboard shortcut Ctrl + Z.

Figure 12. Undo and Redo icons

While undoing an operation, all interactions with the editor are blocked. Changes can be undone any number of times (until the original state of the artifact is restored).

Note: operations are undone independently of the currently open tab. E.g. if the user makes a change in the tab Data model, and then switches to the tab Steps, undoing the changes will undo the change from the first tab.

Saving versions

To save a new version of the artifact, press the icon Save located on the right side of the top bar. This will open a popup where you can fill in the change description and choose whether to save the artifact in the existing branch (MINOR) or create a new branch (MAJOR). When saving a new version of the form, it is automatically published.

Figure 13. Artifact version save window