# Dodawanie i parametryzowanie komponentów

### Dodawanie nowego komponentu

Nowy komponent można dodać w trybie edycji używając palety komponentów znajdującej się z lewej strony. Należy w tym celu przeciągnąć wybrany komponent z palety i upuścić go w odpowiednim miejscu na wniosku.

![Ilustracja 1. Paleta komponentów prostych](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/kpu2QUOZjhjjNwTsWqdg/1_files/screencapture-pkobp-dev-eximee-consdata-local-8082-eximee-console-server-2022-12-19-07_20_57.png)

### Tryb edycji i przenoszenie komponentu

Aby komfortowo przenosić komponenty po przestrzeni wniosku warto włączyć tryb siatki layoutu przyciskiem **Siatka layoutu** ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/ngbHkFh8vd4EnTTpv1EY/1_files/image2021-7-23_10-20-7.png) znajdującym się w lewym dolnym rogu wniosku. Po jego kliknięciu na wniosku pojawi się siatka, która ułatwi umiejscowienie i dostosowanie rozmiaru komponentów ([Siatka layoutu / szata](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/tworzenie-formularza/siatka-layoutu-szata)).

Aby przenieść komponent, należy przytrzymać nad nim przycisk myszki i upuścić w żądanym miejscu. Nad podniesionym komponentem będą zapalać się pola w dwóch kolorach:

* zielonym: oznaczenie prawidłowego miejsca dla wstawianego komponentu,
* czerwonym: nieprawidłowe miejsce (np. próbujemy umieścić jeden komponent na drugim lub umieścić komponent w osadzonym komponencie złożonym lub radio grupie).

Jeżeli chcemy upuścić komponent w nowej linii, należy najechać na przestrzeń pomiędzy komponentami. Przestrzeń ta zostanie powiększona, co ułatwi upuszczenie komponentu.

Po przeniesieniu ostatniego komponentu z danego wiersza, wiersz ten zostanie automatycznie usunięty.

![Ilustracja 2. Wstawianie komponentu](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/lYenePMQNUNqHvMT0vzX/1_files/image2020-3-23_9-7-3.png)

### Możliwe operacje przenoszenia komponentów

| Miejsce źródłowe komponentu | Miejsce docelowe komponentu | Typ komponentu | Możliwe                                                                                                           |
| --------------------------- | --------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------- |
| strona                      | strona                      | wszystkie      | ![(tick)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/n90sn503vn4hXpZXvmL6/1_files/check.svg)  |
| strona                      | sekcja                      | wszystkie      | ![(tick)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/n90sn503vn4hXpZXvmL6/1_files/check.svg)  |
| sekcja                      | strona                      | wszystkie      | ![(tick)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/n90sn503vn4hXpZXvmL6/1_files/check.svg)  |
| sekcja                      | sekcja                      | wszystkie      | ![(tick)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/n90sn503vn4hXpZXvmL6/1_files/check.svg)  |
| komponent złożony           | gdziekolwiek                | wszystkie      | ![(tick)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/n90sn503vn4hXpZXvmL6/1_files/check.svg)  |
| gdziekolwiek                | komponent złożony           | wszystkie      | ![(error)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/EhYmbxraeMppueAuYMHy/1_files/error.svg) |
| grupa checkbox              | gdziekolwiek                | checkbox       | ![(error)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/EhYmbxraeMppueAuYMHy/1_files/error.svg) |
| radio grupa                 | gdziekolwiek                | radio          | ![(error)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/EhYmbxraeMppueAuYMHy/1_files/error.svg) |
| grupa kafli                 | gdziekolwiek                | kafel          | ![(error)](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/EhYmbxraeMppueAuYMHy/1_files/error.svg) |

### Zmiana szerokości komponentu

[Zmiana szerokości komponentów (layout)](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/zmiana-szerokosci-komponentow)

### Przejście do edytora treści umieszczonej na wniosku/w komponencie

W menu kontekstowym komponentu treści formatowanej dostępna jest opcja otwarcia powiązanego artefaktu w edytorze treści.

Wybranie **Przejdź do źródła treści** przenosi użytkownika do edytora treści w bibliotece.

Opcja **Przejdź do źródła treści** jest dostępna jedynie gdy do komponentu podpięty jest artefakt w formacie nazwa-wersja.

![Ilustracja 3. Akcje menu kontekstowego komponentu treści formatowanej](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/qrAB4iBwGYzuhhVIVFS9/1_files/Zaznaczenie_557.png)

### Przejście do edytora źródła komponentu złożonego/biznesowego

W menu kontekstowym osadzonego komponentu złożonego/biznesowego dostępna jest opcja otworzenia podpiętego artefaktu w edytorze komponentów.

Wybranie **Przejdź do źródła komponentu** przeniesie użytkownika do edytora komponentów złożonych/biznesowych w bibliotece.

![Ilustracja 4. Akcje menu kontekstowego komponentu złożonego/biznesowego](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/EK7da4yIyrf28rFskqVT/1_files/Zaznaczenie_559.png)

### Panel właściwości komponentu

Po kliknięciu w komponent umieszczony w obszarze roboczym otwiera się panel edycji atrybutów danego komponentu (wybrany komponent oznaczony jest przerywaną ramką).

Aby przejść do wyświetlania parametrów dla komponentu złożonego lub biznesowego należy zaznaczyć go klikając uchwyt pojawiający się nad komponentem po lewej stronie.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FNrXMG2ZNRTHBkojaS6zn%2Fimage.png?alt=media&#x26;token=a962ded5-ec95-4bd6-9856-fd074ab0dc64" alt=""><figcaption><p align="center"><em><strong>Ilustracja 5.</strong> Prezentacja zaznaczonego komponentu złożonego na formularzu.</em></p></figcaption></figure>

Właściwości pogrupowane są na sekcje. Kliknięcie w miejsce nie zajmowane przez żaden komponent lub poza obszar strony umożliwia podgląd właściwości całej strony.

![Ilustracja 6. Panel właściwości komponentu Etykieta](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/ZYr6JbjqcYm2hQwl8W4E/1_files/image2020-3-5_13-20-27.png)

#### Dziedziczenie liczby kolumn

Komponenty kompozytowe (np. grupa kafli, radio grupa) posiadają możliwość włączenia właściwości **Dziedziczenie liczby kolumn**. Powoduje ona, że szerokości kolumn w komponencie będą takie same, jak w jego rodzicu. Jest to osiągane poprzez zapewnienie, że szerokość komponentu zawsze będzie odpowiadać liczbie jego kolumn. Podczas zmiany szerokości takiego komponentu, kolumny będą odpowiednio dodawane lub odejmowane. Z uwagi na to, można zmniejszyć szerokość komponentu tylko wtedy, gdy zawiera puste kolumny.

![Ilustracja 7. Właściwości dotyczące liczby kolumn](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/RdXNkf0f5uYpdZWrW0Ej/1_files/Zaznaczenie_033.png)

Opcja włączenia dziedziczenia liczby kolumn jest aktywna tylko, gdy szerokość komponentu jest taka sama jak liczba kolumn. Zmiana liczby kolumn z poziomu edytora atrybutów powoduje wyłączenie omawianej właściwości.

![Ilustracja 8. Komponent Radio grupa z wyłączoną właściwością "Dziedziczenie liczby kolumn"](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/DgJZZv45f5AIk6UyfeKF/1_files/image2020-4-20_15-20-1.png)

Przykład użycia:

Rozważmy przypadek rozszerzania o 3 komórki komponentu kompozytowego, którego szerokość i liczba kolumn są równe 3.

Komponent z właściwością "Dziedziczenie liczby kolumn"

| Przed zmianą                                                                                                                | Po zmianie                                                                                                                 |
| --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/GxCTJWkF5I50xFFlU6PS/1_files/image2020-4-20_15-0-36.png) | ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/pux0ygmbIOm1MKMXL9Ht/1_files/image2020-4-20_15-0-1.png) |

Po rozszerzeniu liczba kolumn wciąż jest równa szerokości. Utworzone zostały 3 dodatkowe, puste kolumny.

Komponent bez właściwości "Dziedziczenie liczby kolumn"

| Przed zmianą                                                                                                               | Po zmianie                                                                                                                  |
| -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/2pXU0qKs30KvGOsWAyJs/1_files/image2020-4-20_15-1-2.png) | ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/7WzC35jQOyTHTrx9rjDv/1_files/image2020-4-20_15-1-39.png) |

Rozszerzenie nie spowodowało zmiany liczby kolumn w komponencie i wciąż są 3. Szerokość komponentu została zwiększona do 6. Każda kolumna komponentu rozciągnięta jest teraz na dwie komórki strony.

#### Mapowanie wartości na pole zewnętrznego modelu danych

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Pole zewnętrznego modelu danych, na które będzie zmapowana wartość komponentu, można wybrać na dwa sposoby:

* z pola wyboru,
* z drzewa.

Zdefiniowane mapowania zostają dodane na końcu bezwarunkowej grupy mapowań.

![Ilustracja 9. Opcja mapowania wartości komponentu na pole zewnętrznego modelu danych](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/jv7ue3cneUgLNvwhFdN5/1_files/image2020-9-25_14-10-34.png)

Edytować można jedynie mapowania pól, które mają zdefiniowane nie więcej niż jedno mapowanie. W przeciwnym wypadku edytor wyświetli przycisk przekierowujący do zakładki **Model danych**, która pozwala na definiowanie bardziej złożonych mapowań.

![Ilustracja 10. Opcja mapowania komponentu posiadającego więcej niż jedno mapowanie](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/ggglwIUoU22XYCCoSFtA/1_files/image2020-9-25_14-10-51.png)

Edytor mapowania jest widoczny tylko gdy wniosek posiada zdefiniowany minimum jeden proces systemu zewnętrznego.

### Usuwanie komponentów ze strony

Usuwanie komponentów możliwe jest poprzez kliknięcie przycisku menu znajdującego się w prawym górnym rogu zaznaczonego komponentu, a następnie wybranie opcji **Usuń**. Jeśli usunięcie komponentu nie jest możliwe, ikona usuwania nie wyświetla się.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F3GcLnWBwEJfnzZo6qRgU%2Fimage.png?alt=media&#x26;token=2b057cac-4331-4c09-b3fe-5b48dff5e857" alt=""><figcaption><p align="center"><em><strong>Ilustracja 11.</strong> Usuwanie komponentu</em></p></figcaption></figure>

### Cofanie operacji

Użytkownik może skorzystać z opcji wycofania dowolnej zmiany wykonanej w trakcie pracy z kopią roboczą (od momentu jej utworzenia). Aby cofnąć efekty ostatnio wykonanej czynności wystarczy nacisnąć przycisk **Cofnij zmiany** znajdujący się w prawym górnym rogu edytora, bądź skorzystać ze skrótu klawiszowego Ctrl + Z.

![Ilustracja 12. Ikony Cofnij i Ponów](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/8nwlT6wjlZDR5DnxNVfa/1_files/cofnij.png)

Podczas wycofywania operacji blokowane są wszelkie interakcje z edytorem. Zmiany można wycofywać dowolną ilość razy (aż do przywrócenia oryginalnego stanu artefaktu).

Uwaga: operacje są cofane niezależnie od aktualnie otwartej zakładki. Np. w przypadku, gdy użytkownik wykona zmianę w zakładce **Model danych**, a następnie przejdzie do zakładki **Kroki**, wycofanie zmian wycofa zmianę z pierwszej zakładki.

### Zapisywanie wersji

Aby zapisać nową wersję artefaktu należy nacisnąć ikonę **Zapisz** ![](https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FDCHXoVJ8PzwboqKCwNrw%2Fimage.png?alt=media\&token=c98e4a3a-f756-41b8-90d5-cb9dee1f1677) znajdującą się w prawej części górnej belki. Spowoduje to otwarcie popupa, na którym można uzupełnić opis zmiany oraz wybrać, czy zapisać artefakt w istniejącej gałęzi (MINOR), czy utworzyć nową gałąź (MAJOR). W przypadku zapisu nowej wersji wniosku, zostaje on automatycznie opublikowany.

![Ilustracja 13. Okno zapisu wersji artefaktu](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/J2czTh40fafM4UE08PTD/1_files/Zaznaczenie_999\(069\).png)
