Konfiguracja atrybutu Lista pozycji i Tabela danych w szablonach e-maili

Facebooktwitterpinterestlinkedinmail
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:

  1. Podstawowej znajomości języka HTML a konkretnie budowania tabel
  2. 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>