Dotyczy wersji 2020.1.3.x; autor:Franciszek Sakławski
Wstęp
Tworząc szablony konfigurowalnych maili wielokrotnie chcielibyśmy umieścić w nich pola z formularza. Sytuacja jednak komplikuje się gdy pole jest listą pozycji lub tabelą danych SQL:
Rys. 1 Lista pól dostępnych w systemie
Opis funkcjonalności
Do zamieszczenia tego typu pól w szablonie potrzebujemy:
- Podstawowej znajomości języka HTML a konkretnie budowania tabel
- Procesu zawierającego listę pozycji i tabelę danych.
Po zdefiniowaniu tego typu pól na formularzu stworzymy akcję typu „Wyślij konfigurowalny email”, w której umieścimy kod HTML tworzący tabelę z danymi z formularza.
Konfiguracja
Pierwszym polem do zdefiniowania jest pole typu „Lista pozycji”.
Rys. 2 Lista pozycji w WEBCON BPS Designer Studio
Następnie do listy dodajemy 4 kolumny zawierające dane zamówienia. 2 kolumny są polem wyboru, 1 polem tekstowym i 1 datą. Na formularzu dodano 3 wiersze przedstawiające dane zamówień:
Rys. 3 Lista pozycji na formularzu MODERN
Następnie zdefiniowano pole typu „Tabela danych”:
Rys. 4 Konfiguracja pola typu “Tabela danych”
Tabela danych, jak można zauważyć na rysunku nr 1, należy do grupy pól „Prezentacja danych". Oznacza to, że musi ono zostać zasilone zestawem danych. W naszym przypadku będzie to zapytanie w języku SQL (Structured Query Language) odwołujące się do wcześniej zdefiniowanej listy pozycji:
Rys. 5 Zapytanie SQL zasilające tabelę danych
W polu „Data source” wybieramy „<Bieżąca baza BPS>”, a następnie konstruujemy zapytanie.
Nasze zapytanie odwołuje się do tabeli WFElementDetails. To w niej znajdują się wpisy z list pozycji. W pierwszej części prosimy o zwrócenie kolumn znajdujących się na liście. W ostatnim wierszu klauzuli SELECT zmieniamy format wyświetlania daty na bardziej przystępny dla użytkownika.
W klauzuli WHERE ograniczamy zapytanie do elementu na którym znajduje się tabela oraz do listy, z której czerpiemy dane. W taki sposób otrzymaliśmy listę pozycji oraz znajdującą się pod nią tabelę danych wyświetlającą te same dane:
Rys. 6 Lista pozycji oraz tabela danych na formularzu
Następnie na przejściu ścieżką definiujemy akcję wysyłania konfigurowalnego maila. Po stworzeniu jej wciskamy przycisk „Konfiguruj”, a następnie przechodzimy na zakładkę „Treść wiadomości". W sekcji „Treść wiadomości” wybieramy zakładkę HTML. W niej umieścimy nasz kod tworzący tabelę z naszymi danymi.
Rys. 7 Konfiguracja akcji „Wyślij konfigurowalny e-mail”
W celu wyjaśnienia zamieszczanego kodu, w dalszej części artykułu, będę posługiwał się jego screenami. Jednakże cały kod tabeli zostanie udostępniony do pobrania.
Język HTML pozwala stworzyć i konfigurować tabelę według potrzeb użytkownika. W naszym przypadku w mailu chcemy zamieścić dwie tabele. W tym celu całość treści zamkniemy w jednej sekcji (DIV), a następnie podzielimy go na kolejne dwie podsekcje. W każdym z nich znajdzie się tabela. Ułożenie tabel można łatwiej zrozumieć analizując poniższy graf:
Rys. 8 Struktura graficzna maila
Aby podzielić naszego maila na sekcje, musimy posłużyć się elementem <div> w taki sposób:
Rys. 9 Podział maila na sekcje i podsekcje
W stylu podsekcji dodałem informację o tym aby od granicy sekcji do zawartości sekcji zostawić 20 pikseli przerwy odpowiednio dla górnego na dole dla dolnego na górze.
Następnie w każdej z podsekcji umieścimy tabelę, które po odpowiednim skonfigurowaniu będą wyświetlały nasze dane. Obie tabele będą wyglądały tak samo dlatego omówię konfigurację jedynie jednej z nich. Na początku tworzymy tabelę i ustawiamy jej podstawowe parametry stylu:
Rys. 10 Parametry tabeli HTML
Border-(top, bottom, left, right)-color: kolor krawędzi naszej tabeli.
Margin-(top, bottom): wielkość marginesów podana w pikselach.
Border: szerokość krawędzi bocznych tabeli podana w pikselach.
Width: szerokość tabeli podana w pikselach.
Cellspacing: odległość pomiędzy zawartością tabeli a krawędziami podana w pikselach.
Cellpadding: odległość pomiędzy zawartością komórki a jej krawędziami podana w pikselach.
Następnie tworzymy zawartość tabeli tagiem <tbody></tbody> i umieszczamy w niej pierwszy wiersz, który będzie przechowywał nagłówki kolumn:
Rys. 11 Nagłówki kolumn
W tagu <tr> definiujemy styl wiersza:
Font-weight: grubość czcionki.
color: kolor czcionki.
background-color: kolor tła.
Po zdefiniowaniu tabeli oraz nagłówka nasza tabela prezentuje się w następujący sposób:
Rys. 12 Tabela z nagłówkami kolumn
Następnie chcemy zasilić tabelę danymi. W tym celu musimy zdefiniować dodatkowy wiersz przechowujący wartości z formularza. Sama składnia jest taka sama jak przy nagłówku, z tą różnicą, że w każdej kolumnie musimy zdefiniować co ma się w nią wpisywać. W tym celu w nazwy kolumn wpiszemy nazwy kolumn z listy pozycji lub nazwy kolumn z tabeli danych. Udajmy się więc do WEBCON BPS Designer Studio aby sprawdzić nagłówki.
W zapytaniu zasilającym naszą tabelę danych z formularza, jako że czerpie ona z listy pozycji, mamy wszystkie dane których potrzebujemy. W klauzuli SELECT kolumny pobierane są nazwami kolumn listy natomiast ich aliasy są nazwami kolumn w tabeli danych:
Rys. 13 Zapytanie SQL zasilające tabelę danych (rysunek nr 5, bez tagów)
Dzięki przeanalizowaniu powyższego zapytania wiemy, że kolumny prezentują się następująco:
| Nazwa kolumny na liście pozycji | Nazwa kolumny na tabeli danych |
| DET_Att1 | NameAndSurname |
| DET_Att2 | ShippingAddress |
| DET_Att3 | Status |
| DET_Att4 | DateOfOrder |
Nazwy kolumn musimy podawać w nawiasach klamrowych. Dodatkowo o ile w tabeli danych mamy już poprawnie wyświetlane dane, to w przypadku 3 kolumn z listy pozycji(kolumn wyboru) musimy nakierować system na poprawne ich odczytanie. Jest to spowodowane faktem, iż w systemie WEBCON BPS dane z pól wyboru zapisywane są w schemacie „ID#Nazwa”. W naszym przypadku chcemy wyświetlić tylko nazwę dlatego przed tagiem dodamy wielką literę „N”, która nakieruje system na poprawne odczytanie.
Po dodaniu atrybutów do naszego kodu prezentuje się on w następujący sposób:
Rys. 14 Dwie tabele w formacie HTML
Po dodaniu kodu, mamy już poprawnie skonfigurowane tabele przedstawiające naszą tabelę i listę:
Rys. 15 Skonfigurowane tabele
Ostatnim elementem naszej układanki jest poinformowanie naszego systemu, z której listy i której tabeli ma czerpać dane. W tym celu dodamy tagi nakierowujące system na konkretne wartości. W sposób poglądowy zostało to przedstawione na rysunku nr 8. W naszym kodzie jednak musimy być bardziej precyzyjni i umieścić tagi w odpowiednim miejscu tak jak na screenie poniżej:
Rys. 16 Tabele po dodaniu tagów
Jak można zauważyć na rysunku nr 8 przy tagach znajdują się GRIDID oraz FIELDID (w naszym przypadku odpowiednio 5400 oraz 4754). Są to Identyfikatory naszej tabeli oraz listy pozycji. Możemy je znaleźć w ich konfiguracji w programie WEBCON BPS Designer Studio:
Rys. 17 Okno konfiguracji listy pozycji oraz tabeli danych
Tak skonfigurowany kod HTML kopiujemy do pola przedstawionego na Rysunku nr 7. Po przejściu ścieżką na której osadzona została nasza akcja wysłania maila, na zdefiniowany adres e-mail powinien przyjść mail prezentujący się w następujący sposób:
Rys. 18 Treść konfigurowalnego maila
Tabela ma bardzo jaskrawe kolory co może trochę razić w oczy. Jest to jednak spowodowane tym, iż dzięki takiemu zabiegowi możemy dokładnie powiązać część tabeli z częścią kodu odpowiadającej za jej styl.
Podsumowanie
Przy pomocy odrobiny znajomości języka HTML można stworzyć konfigurowalnego maila w pełni odpowiadającego naszym wymaganiom. Dzięki tej funkcjonalności możemy z powodzeniem kontrolować dane widniejące na listach pozycji oraz tabelach danych.
Kod HTML:
<div>
<div style="margin-bottom: 10px; padding-bottom: 10px">
<table style="margin-bottom: 5px; border-top-color: green; margin-top: 5px; border-left-color: green; border-bottom-color: green; border-right-color: green" cellspacing="1" cellpadding="4" width="600" border="10">
<tbody>{SQLGRIDHEADERTEMPLATE:5400}
<tr style="font-weight: bold; color: white; BACKGROUND-color: blue">
<td>Name and Surname</td>
<td>Shipping address</td>
<td>Status</td>
<td>Date of order</td>
</tr>{/SQLGRIDHEADERTEMPLATE}
<tr style="font-weight: bold;”>{SQLGRIDROWTEMPLATE:5400}
<td>{NameAndSurname}</td>
<td>{ShippingAddress}</td>
<td>{Status}</td> <td>{DateOfOrder}</td>
</tr>{/SQLGRIDROWTEMPLATE}
</tbody>
</table>
</div>
<div style=" padding-top: 10px">
<table style="margin-bottom: 5px; border-top-color: green; margin-top: 5px; border-left-color: green; border-bottom-color: green; border-right-color: green" cellspacing="1" cellpadding="4" width="600" border="10">
<tbody>{SUBELEMHEADERTEMPLATE:4754}
<tr style="font-weight: bold; color: white; BACKGROUND-color: blue">
<td>Name and Surname</td>
<td>Shipping address</td>
<td>Status</td>
<td>Date of order</td>
</tr>{/SUBELEMHEADERTEMPLATE}
<tr style="font-weight: bold;”>{SUBELEMROWTEMPLATE:4754}
<td>{N:DET_Att1}</td>
<td>{DET_Att2}</td>
<td>{N:DET_Att3}</td>
<td>{N:DET_Att4}</td>
</tr>{/SUBELEMROWTEMPLATE}
</tbody>
</table>
</div>
</div>
