Adding and parameterizing components

Adding a new component

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

Illustration 1. Simple components palette

Edit mode and moving a component

To comfortably move components across the form workspace it is worth enabling the 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 that facilitates positioning and resizing components (Layout grid / theme).

To move a component, hold the mouse button over it and drop it in the desired location. Fields will light up in two colors above the lifted component:

  • green: indicates a valid spot for the inserted component,

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

If you want to drop a component in a new line, hover over the space between components. That space will expand, making it easier to drop the component.

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

Illustration 2. Inserting a component

Possible component-moving operations

Component source location
Component target location
Component type
Possible

page

page

all

(tick)

page

section

all

(tick)

section

page

all

(tick)

section

section

all

(tick)

complex component

anywhere

all

(tick)

anywhere

complex component

all

(error)

checkbox group

anywhere

checkbox

(error)

radio group

anywhere

radio

(error)

tile group

anywhere

tile

(error)

Changing component width

Changing component widths (layout)

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

In the context menu of a formatted content component there is an option to open the linked 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 the name-version format is attached to the component.

Illustration 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.

Illustration 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 frame).

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

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

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

Illustration 6. Label component properties panel

Inheritance of column count

Composite components (e.g., tile group, radio group) have the option to enable the Inheritance of column countproperty. 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 its number of columns. When changing the width of such a component, columns will be added or removed accordingly. Because of this, you can reduce the component width only if it contains empty columns.

Illustration 7. Properties regarding the number of columns

The option to enable inheritance of the number of columns is active only when the component width equals the number of columns. Changing the number of columns from the attribute editor will disable this property.

Illustration 8. Radio group component with the “Inheritance of column count” property disabled

Example of use:

Consider the case of expanding a composite component by 3 cells when its width and number of columns are both equal to 3.

Component with the “Inheritance of column count” property

Before change
After change

After expansion the number of columns is still equal to the width. Three additional empty columns were created.

Component without the “Inheritance of column count” property

Before change
After change

The expansion did not change the number of columns in the component — it remains 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

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

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

  • from the selection field,

  • from the tree.

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

Illustration 9. Option to map a component value to a field of an external data model

Only mappings for fields that have no more than one mapping defined can be edited. Otherwise the editor will display a button redirecting to the Data modeltab, which allows defining more complex mappings.

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

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

Removing components from the page

Components can be removed by clicking the menu button located in the upper right corner of the selected component and then choosing the Deleteoption. If removal of the component is not possible, the delete icon is not displayed.

Illustration 11. Removing a component

Undoing operations

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

Illustration 12. Undo and Redo icons

During undo operations all interactions with the editor are blocked. Changes can be undone any number of times (until the artifact’s original state is restored).

Note: operations are undone regardless of the currently open tab. For example, if the user makes a change in the Data modeltab, and then switches to the Stepstab, undoing changes will revert the change from the first tab.

Saving versions

To save a new version of an artifact press the Save icon 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 a form, it is automatically published.

Illustration 13. Artifact version save window

Last updated

Was this helpful?