Przykłady szablonów powiadomień e-mail

Facebooktwitterpinterestlinkedinmail
Dotyczy wersji 2020.1.3.x autor: Konrad Wojtycza

 

Wprowadzenie

Nieodzownym elementem pracy z procesami firmowymi, jest potrzeba wysyłania powiadomień o przydzielonych do użytkowników zadaniach. WEBCON BPS udostępnia możliwość wysyłania powiadomień standardowych, które generowane są automatycznie na podstawie zawartości elementu i wysyłane po przejściu do kolejnego kroku, a także powiadomień konfigurowalnych, których zawartość może zostać dostosowana do wymagań biznesowych poprzez zastosowanie uprzednio przygotowanego lokalnego szablonu. W obydwu przypadkach, tj. dla powiadomień standardowych i powiadomień konfigurowalnych, podstawą zawartości jest Globalny szablon e-maila. Globalny szablon maila jest wzorcem, do którego w przypadku powiadomień konfigurowalnych możliwe do dodania są kolejne elementy. W przypadku powiadomień standardowych stanowi on właściwą zawartość powiadomienia.
Konfiguracja  Szablonu globalnego oraz lokalnego została już opisana w artykule „Obsługa e-maili oraz szablony w WEBCON BPS

W niniejszym artykule zaprezentowane zostały przykładowe Globalne szablony e-mail, możliwe do użycia w procesach WEBCON BPS.

 

Globalny szablon e-mail                              

Globalny szablon e-mail to szablon wykorzystywany we wszystkich standardowych powiadomieniach mailowych na danym środowisku, o ile w procesie nie wykorzystano dedykowanego szablonu. W przypadku powiadomień konfigurowalnych, szablon globalny jest wykorzystywany domyślnie, o ile nie została wybrana opcja jego nadpisania, bądź nie został wybrany inny, dedykowany szablon.

Konfiguracja globalnego szablonu znajduje się w zakładce Ustawień systemowych, sekcja Powiadomienia mailowe, Globalny szablon e-mail. Na karcie Zawartość wiadomości w zakładce HTML widoczny jest kod HTML szablonu.

Rys. 1 Kod HTML globalnego szablonu formularza

 

W celu swobodnej edycji szablonu konieczna jest znajomość języka znaczników HTML oraz języka arkuszy stylów CSS. Dodatkowo, należy pamiętać, że programy pocztowe (Outlook, Thunderbird, Gmail itp.) nie obsługują części stylów CSS, a więc szablon e-mail przetestowany w przeglądarce internetowej, może wyglądać zupełnie inaczej podczas wyświetlania w programie pocztowym. Powszechną praktyka podczas tworzenia szablonów maili, jest używanie do formatowania tabeli, co pozwala na wysoką kompatybilność z większością klientów pocztowych.  Zamieszczone w niniejszym artykule szablony zawierają komentarze, które wskazują za jakie elementy szablonu odpowiadają poszczególne fragmenty kodu.

Do edycji szablonu potrzebne będzie środowisko programistyczne rozpoznające kod HTML oraz style CSS, podczas przygotowywania szablonów do niniejszej prezentacji korzystano z wolno-źródłowego edytora Brackets, o licencji pozwalającej na darmowe wykorzystanie komercyjne.

 

Przykłady szablonów

Poniżej zaprezentowane zostały przykłady szablonów e-mail do zastosowania w Webcon BPS. Wszystkie zaprezentowane szablony zostały załączone do artykułu w formacie HTML (na końcu artykułu).

a) Szablon z logo po prawej stronie (Szablon 1)

Poniżej zaprezentowany został szablon globalny e-mail, który zbudowany jest w oparciu o tabele. Decyzja o tym, które z granic tabeli będą widoczne, pozwala na tworzenie na szablonie widocznych linii oraz czworoboków. Niewidoczne granice tabeli organizują przestrzeń na szablonie i utrzymują w miejscu  zawarte w nich obrazy a także tekst (Rys. 2).

Rys. 2 Globalny szablon e-mail – logo po stronie prawej

 

Kafelek z odnośnikiem do elementu (Go to element), o którym traktuje powiadomienie, wymaga dodatkowej konfiguracji. W celu umożliwienia poprawnego działania odnośnika, w Ustawieniach systemu w zakładce Stałe globalne, należy dodać stałą globalną przechowująca informację o adresie URL Portalu (Rys. 3).

Rys. 3 Dodana Stała zawierająca adres URL Portalu

 

Stała ta należy następnie wykorzystać we fragmencie szablonu globalnego zawierającym odnośnik do elementu, tak jak na  Rys. 4.

Struktura adresu URL elementu:

{URL Portalu}/db/{ID bazy danych}/app/{ID aplikacji}/element/{ID elementu}

gdzie:

  • URL Portalu – adres URL portalu WEBCON w postaci http://adresURL/
  • ID bazy danych – identyfikator bazy danych, z której korzysta portal WEBCON, najczęściej będzie numerem 1,
  • ID aplikacji – identyfikator aplikacji, ma wpływ na to, w ramach jakiej aplikacji zostanie otwarty element,
  • ID elementu – identyfikator elementu, do którego prowadzi adres.

Po dodaniu stałej globalnej z adresem URL portalu, adres w szablonie należy uzupełnić przy pomocy Edytora, wybierając Stałą globalna z zakładki Wartości oraz ID aplikacji z zakładki Obiekty (Rys. 4).

Rys. 4 Edytor umożliwiający wybór zmiennych do uzupełnienia adresu

 

b) Szablon z logo po lewej stronie (Szablon 2)

Mimo niewielkiej różnicy wizualnej przeniesienie logo na przeciwna stronę szablonu wymaga pewnych modyfikacji w kodzie szablonu, dlatego szablon ten został zamieszczony w artykule jako osobny przykład (Rys. 5).

Rys. 5 Szablon globalny z logo po lewej stronie

 

c) Szablon formularza ze zmieniona kolorystyka (Szablon 3)

Zmiana kolorystyki szablonu wymaga edycji większości stylów zawartych w kodzie szablonu. Ustawione zostały kolory czcionek, tła szablonu, linii separującej nagłówek wiadomości od jej treści, a także kolory kafelków. Podczas zmiany kolorystyki szablonu konieczne jest rozpatrzenie zagadnienia wzajemnego kontrastu dobranych kolorów, tak aby prezentowany tekst był czytelny (Rys. 6).

Rys. 6 Szablon formularza ze zmieniona kolorystyka

 

Podsumowanie

Edycja szablonu globalnego pozwala na dostosowanie wyglądu wysyłanych w ramach WEBCON BPS powiadomień do zasad identyfikacji wizualnej przedsiębiorstwa. Do edycji szablonów globalnych konieczna jest przynajmniej podstawowa znajomość języka znaczników HTML oraz języka arkuszy stylów CSS. Przy edycji pod uwagę należy brać pod uwagę ograniczenia wynikające z braku obsługi części stylów CSS przez programy pocztowe.

 

Prezentowane szablony

Szablon 1

Szablon 2

Szablon 3