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.

Ilustracja 1. Wygląd właściwości pozwalającej uzyskać dostęp do edytora pomocy kontekstowej

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.

Ilustracja 2. Wygląd szuflady edytora bez dodanych pomocy kontekstowych

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

Ilustracja 3. Wygląd nowo dodanej i nieskonfigurowanej pomocy kontekstowej

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.

Ilustracja 4. Przykład zdefiniowanych dwóch różnych pomocy kontekstowych wyświetlanych warunkowo

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

Ilustracja 5. Wygląd rozszerzonego okna edycji pomocy kontekstowej

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.

Ilustracja 6. Przykładowy wygląd tooltipa na wniosku

Ilustracja 7. Przykładowy wygląd tooltipa na wniosku

Wniosek demo: demoTooltipy

♿WCAG: Dobre praktyki WCAG dla low-code dev