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

![Figure 1. Simple components palette](/files/b0740cee7b3a385d58ef85d30b1c239cc32837e8)

### Edit mode and moving a component

To comfortably move components around the form area, it is worth turning on the layout grid mode with the button **Layout grid** ![](/files/806981328cc9a8ac9054c2ba33f15d96ce47cbe5) located in the lower-left corner of the form. After clicking it, a grid will appear on the form, which will make it easier to position and resize components ([Layout / design grid](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/tworzenie-formularza/siatka-layoutu-szata.md)).

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

* green: indicates the correct place for the inserted component,
* red: an incorrect 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](/files/697c383a31567b4d43ed34d0866ad56e19cf310f)

### Possible component moving operations

| Source location of the component | Target location of the component | Component type | Possible                                                    |
| -------------------------------- | -------------------------------- | -------------- | ----------------------------------------------------------- |
| page                             | page                             | all            | ![(tick)](/files/17c95e705419d8ad96ee2eef858e68a28ca0b08b)  |
| page                             | section                          | all            | ![(tick)](/files/17c95e705419d8ad96ee2eef858e68a28ca0b08b)  |
| section                          | page                             | all            | ![(tick)](/files/17c95e705419d8ad96ee2eef858e68a28ca0b08b)  |
| section                          | section                          | all            | ![(tick)](/files/17c95e705419d8ad96ee2eef858e68a28ca0b08b)  |
| complex component                | anywhere                         | all            | ![(tick)](/files/17c95e705419d8ad96ee2eef858e68a28ca0b08b)  |
| anywhere                         | complex component                | all            | ![(error)](/files/232459d959401278e014693e3f7c8a0d4c801a5e) |
| checkbox group                   | anywhere                         | checkbox       | ![(error)](/files/232459d959401278e014693e3f7c8a0d4c801a5e) |
| radio group                      | anywhere                         | radio          | ![(error)](/files/232459d959401278e014693e3f7c8a0d4c801a5e) |
| tile group                       | anywhere                         | tile           | ![(error)](/files/232459d959401278e014693e3f7c8a0d4c801a5e) |

### Changing the component width

[Changing component widths (layout)](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zmiana-szerokosci-komponentow.md)

### Going 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 name-version format is attached to the component.

![Figure 3. Context menu actions for a formatted content component](/files/5c6e6f66a271d7f7d74aa61563c13da684dd8021)

### 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 linked artifact in the component editor.

Selecting **Go to component source** takes the user to the composite/business component editor in the library.

![Figure 4. Context menu actions for a composite/business component](/files/b112dc9fa21f741a78f4069b8b7927c7f3e35f0e)

### Component properties panel

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

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

<figure><img src="/files/35efa8b6047226225387ea2e427d68c50da9e949" alt=""><figcaption><p align="center"><em><strong>Figure 5.</strong> Display of the selected composite component on the form.</em></p></figcaption></figure>

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

![Figure 6. Label component properties panel](/files/1b06dbe42dc6e7f661480b800c5f679648239281)

#### Inheritance of column count

Composite components (e.g. tile group, radio group) have the option to enable the property **Inheritance of column count**. This makes the column widths in the component the same as in its parent. This is achieved by ensuring that the component width will always correspond 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 width of the component can only be reduced when it contains empty columns.

![Figure 7. Properties related to the number of columns](/files/e6f48f260ec13bd26bb31ee9da5a5d40b92b6e69)

The option to enable inheritance of column count is active only when the component width is the same as 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 "Inheritance of column count" property disabled](/files/6fc94c6ef9957a6b0a5ab6bf0eea3abc4bfa1ca6)

Usage example:

Let us consider the case of expanding a composite component by 3 cells, whose width and number of columns are equal to 3.

Component with the "Inheritance of column count" property

| Before the change                                    | After the change                                     |
| ---------------------------------------------------- | ---------------------------------------------------- |
| ![](/files/43878ba8b7e165dd145d42b79963f0e8ca5ba87d) | ![](/files/4ae48af26f33f27709e048cd1d9c8cac3e43e073) |

After expansion, the number of columns is still equal to the width. 3 additional empty columns have been created.

Component without the "Inheritance of column count" property

| Before the change                                    | After the change                                     |
| ---------------------------------------------------- | ---------------------------------------------------- |
| ![](/files/78c9eab6c934a4f71e4c377b030d361b6bc9f356) | ![](/files/aed45978fee312828b3ea6039ab9138e18ee768d) |

The expansion did not change the number of columns in the component and it is still 3. The component width has been increased to 6. Each component column is now stretched across two page cells.

#### Mapping a value to an external data model field

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all deployments.
{% endhint %}

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

* from the selection field,
* from the tree.

The defined mappings are added at the end of the unconditional mapping group.

![Figure 9. Option to map a component value to an external data model field](/files/f6ef2d0764f85a96df26c878af5f2504c4595adc)

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 with more than one mapping](/files/2618e234b6c6abeb89e62def9edce0616b7b9734)

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

### Deleting components from the page

Components can be deleted by clicking the menu button located in the upper-right corner of the selected component and then choosing the option **Delete**. If deleting the component is not possible, the delete icon is not displayed.

<figure><img src="/files/9b1063e30b7d63abdc5ce1933a734715c8766545" alt=""><figcaption><p align="center"><em><strong>Figure 11.</strong> Deleting a component</em></p></figcaption></figure>

### Undoing operations

The user can use the option to undo any change made while working with the working copy (since its creation). 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](/files/98f141d4745fddde927559fdd1bfbfa16d2556b0)

While undoing operations, 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 goes 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** ![](/files/faa156c690f5900fb77997d03ba4246974a8c1e4) located on the right side of the top bar. This will open a pop-up where you can complete the change description and choose whether to save the artifact in the existing branch (MINOR) or create a new branch (MAJOR). In the case of saving a new version of the form, it is automatically published.

![Figure 13. Artifact version save window](/files/597c7777fb5163f1fe9f5c21c9f23e58782ff769)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/dodawanie-i-parametryzowanie-komponentow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
