# Pomoc kontekstowa

Większość komponentów w Eximee Designer ma możliwość zdefiniowania pomocy kontekstowej. Wyjątkami są komponenty **Generator kodów QR** oraz **Strona**.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FAJFsHSGojqoYKF3MtRsS%2Fimage.png?alt=media&#x26;token=c59b3184-718e-44bb-8fea-92c8a97adcfd" alt=""><figcaption><p align="center"><em><strong>Ilustracja 1.</strong> Wygląd właściwości pozwalającej uzyskać dostęp do edytora pomocy kontekstowej</em></p></figcaption></figure>

Po wejściu do edytora pomocy kontekstowej wysuwana jest szuflada. Gdy komponent nie ma dodanej żadnej pomocy kontekstowej zawartość szuflady wygląda jak na ilustracji poniżej.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FmSfXS3D1VCwS5399vHtx%2Fimage.png?alt=media&#x26;token=66158061-7a69-4656-9ec5-4f3e5e5abbbd" alt=""><figcaption><p align="center"><em><strong>Ilustracja 2.</strong> Wygląd szuflady edytora bez dodanych pomocy kontekstowych</em></p></figcaption></figure>

Kliknięcie w znajdujący się u dołu szuflady przycisk **Dodaj pomoc kontekstową** powoduje dodanie elementu do szuflady. Reprezentuje on nową pomoc kontekstową.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FtulPS6bGZIlxv5vvLdiu%2Fimage.png?alt=media&#x26;token=05c7218c-a572-4dcc-920b-abf074994ed2" alt=""><figcaption><p align="center"><em><strong>Ilustracja 3.</strong> Wygląd nowo dodanej i nieskonfigurowanej pomocy kontekstowej</em><br></p></figcaption></figure>

Podstawowymi właściwościami podlegającymi edycji jest nazwa klucza pomocy kontekstowej oraz warunek jej wyświetlania.

Przed dodaniem klucza z treścią pomocy kontekstowej, należy klucz i jego treść dodać w zakładce **Tłumaczenia**. Edycja przeprowadzana jest poprzez kliknięcie w polu **Podaj nazwę klucza**.

W polu **Dodaj warunek** można zdefiniować dynamiczną pomoc kontekstową z treścią zależną od warunków:

* wartości zmiennych sesyjnych,
* wartości innych komponentów.

Jeśli zdefiniowanych jest kilka pomocy kontekstowych, wyświetlona zostanie jedynie pierwsza pomoc kontekstowa, której warunek jest spełniony. W celu zmiany kolejności treści pomocy można posłużyć się funkcjonalnością drag & drop.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fbgb6OGXHabAYI5lGMWqE%2Fimage.png?alt=media&#x26;token=7be80d14-c052-49e9-9968-ed57f285cb67" alt=""><figcaption><p align="center"><em><strong>Ilustracja 4.</strong> Przykład zdefiniowanych dwóch różnych pomocy kontekstowych wyświetlanych warunkowo</em></p></figcaption></figure>

Kliknięcie w **Pokaż szczegóły** rozszerza kafel i pozwala uzyskać dostęp do dodatkowych opcji, widocznych na ilustracji poniżej:

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FWVirCyXrwPJoVhANli4x%2Fimage.png?alt=media&#x26;token=4f8fb9d4-d066-455e-b1de-153c389e2f20" alt=""><figcaption><p align="center"><em><strong>Ilustracja 5.</strong> Wygląd rozszerzonego okna edycji pomocy kontekstowej</em></p></figcaption></figure>

W widoku szczegółowym istnieje możliwość zdefiniowania następujących właściwości:

* **Nazwa stylu** - nazwa stylu do zaaplikowania na pomoc kontekstową,
* **Ikona pomocy** - ustalenie, czy powinna być wyświetlana ikona pomocy kontekstowej,
* **Widoczna na focus pola** - ustalenie, czy pomoc kontekstowa powinna być wyświetlana podczas zaznaczania,
* **Interaktywna pomoc kontekstowa** - ustalenie, czy będzie można wchodzić w interakcję z treścią pomocy kontekstowej,
* **Szerokość/Wysokość** dymka pomocy kontekstowej,
* **Pozycja** pomocy kontekstowej względem komponentu, którego dotyczy.

W szufladzie edytora pomocy kontekstowej można zdefiniować wiele tooltipów. Wówczas są one rozpatrywane w kolejności od góry do dołu. Każdy kafel pomocy kontekstowej posiada po lewej stronie uchwyt, który pozwala go chwycić, a następnie przesunąć na żądaną pozycję. W taki sposób można uszeregować całą listę i zmieniać kolejność elementów.

**Widoczność pomocy kontekstowej**

W widoku szczegółowym należy określić jeden z dwóch sposobów prezentacji pomocy kontekstowej:

* Ikona pomocy,
* Widoczna na focus pola.

Widoczność pomocy kontekstowej sterowana jest również opcjonalnym warunkiem.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F9tVYoYCTtDKRgoJWg29E%2Fimage.png?alt=media&#x26;token=c4db43e0-ebf7-4e1a-8453-55dac006efde" alt=""><figcaption><p align="center"><em><strong>Ilustracja 6.</strong> Przykładowy wygląd tooltipa na wniosku</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FAyY2OjiurZb8TYFJdfAK%2Fimage.png?alt=media&#x26;token=c0ef40a0-f5f8-4e46-9e0f-973fa7f2f097" alt=""><figcaption><p align="center"><em><strong>Ilustracja 7.</strong> Przykładowy wygląd tooltipa na wniosku</em></p></figcaption></figure>

{% hint style="info" %}
Wniosek demo: demoTooltipy
{% endhint %}

{% hint style="info" %}
♿WCAG: [Dobre praktyki WCAG dla low-code dev](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}