Dotyczy wersji 2020.1.3.x autor: Konrad Wojtycza
Wprowadzenie
W wersji WEBCON BPS 2020.1.3, dla formularza MODERN wprowadzony został atrybut typu HTML, który pozwala na wprowadzanie na formularzu elementów niestandardowych w języku znaczników HTML. Atrybut HTML można zdefiniować jako ‘iniekcję’ niestandardowego kodu HTML do standardowego kodu strony formularza WEBCON BPS. Pozwala on na wykorzystanie wszelkich znaczników przewidzianych dla języka HTML, jednak najefektywniejszym rozwiązaniem jest używanie go w parze z nowymi regułami formularza w trybie JavaScript.
Reguły formularza w trybie JavaScript w najnowszej wersji WEBCON BPS zostały uzupełnione
o następujące funkcje:
a) MoveToNextStep – przejście wskazaną ścieżką
- InvokeMenuAction – wywołanie przycisku w menu
- InvokeRule – uruchomienie wskazanej reguły
b) StartElement / OpenElement – wystartowanie / otwarcie elementu
Wywołanie nowych reguł formularza może być zrealizowane np. po kliknięciu przez użytkownika przycisku (znacznik <button>) dodanego do formularza.
Dodanie przycisku do formularza
Po utworzeniu nowego atrybutu w WEBCON BPS Designer zmieniamy jego typ na HTML (sekcja Prezentacja danych), następnie wybieramy "Advanced configuration" (trzy kropki). W polu "HTML content" wprowadzamy kod HTML. W przypadku dodania przycisku, wprowadzony kod powinien wyglądać tak jak na Rys. 1.
Fig. 1. Konfiguracja atrybutu HTML
Kod HMTL z konfiguracji przedstawionej na Rys. 1 : "
<div style="text-align: right;"> <button style="background-color:#ffb74d;" onclick="">Button text </button> </div>
Wprowadzenie znacznika <button> w kontenerze <div>, jest dobrą praktyka, która pozwala np. na proste pozycjonowanie przycisku na formularzu. Znaczniki wprowadzone w polu HTML mogą mieć nadane style CSS. W przedstawionym przykładzie, dzięki stylowi text-align: right; przycisk zostanie wyjustowany do strony prawej, a tło przycisku będzie koloru #ffb74d zapisanego w formacie HEX, dzięki stylowi background-color:#ffb74d;.
Wywołanie reguły formularza realizowane jest poprzez wydarzenie onClick (onclick) zdefiniowane na kliknięcie na przycisk. W przedstawionym przykładzie, nie jest zdefiniowane żadne wydarzenie wywoływane na kliknięcie przycisku, ponieważ miejsce pomiędzy cudzysłowem jest puste (onClick="").
W sekcji Settings w konfiguracji zaawansowanej atrybutu HTML, zaznaczając checkbox ‘Show field name’, sprawimy, że nazwa dodanego atrybutu będzie wyświetlana na formularzu. Możemy zadecydować, czy nazwa powinna być wyświetlana obok, czy nad atrybutem .
Rys. 2 Sekcja Settings – Konfiguracja atrybutu HTML
Jeśli chcemy, aby atrybut wyświetlał inną zawartość, gdy oznaczono go na matrycy jako „tylko do odczytu”, to w zakładce Appearance zaznaczamy odpowiedni checkbox (‘Show different HTML content in readonly’) (Rys. 3.) i wypełniamy pole ‘HTML content’ odpowiednim kodem. Jeśli pozostawimy ‘HTML content’ puste, a atrybut w matrycy zostanie oznaczony jako ‘tylko do odczytu’, to atrybut HTML nie zostanie wyświetlony na formularzu.
Rys. 3 Zakładka ‘Appearance’ ustawień zaawansowanych atrybutu HTML
Obieg wykorzystywany w niniejszym artykule
Obieg wykorzystywany do celów prezentacyjnych w niniejszym artykule to prosty obieg rejestracji zamówienia kupna. W ramach obiegu przewidziany został krok rejestracji, akceptacji zamówienia, konsultacji, a także kompletowania oraz wysyłki zamówienia, przez wybranego dostawcę. Prezentacja wykorzystywanych reguł formularza została zrealizowana na krokach Rejestracji oraz Akceptacji zamówienia.
Rys. 4 Obieg rejestracji zmówienia kupna
Dodanie reguły formularza wywoływanej na przycisku
Aby skonfigurować wywołanie reguły formularza na przycisku, należy w WEBCON BPS otworzyć ustawienia zaawansowane konfigurowanego elementu HTML, a następnie otworzyć Edytor wyrażenia (trzy poziome kropki). Reguła powinna zostać dodana pomiędzy cudzysłowy wyrażenia onClick=”” (Rys. 5).
Wywołanie reguły formularza ‘MoveToNextStep’
Reguła ‘MoveToNextStep’ pozwala na wywołanie przejścia wybraną ścieżką. Regułę tą możemy skonfigurować na wydarzenie onClick przycisku HTML.
Przykładowa konfiguracja została przedstawiona na Rys. 5
Rys. 5 Konfiguracja atrybutu HTML z przyciskiem wywołującym przejście ścieżka ‘Send for Consultation’
Kod HMTL z konfiguracji przedstawionej na Rys. 5:
<div style="text-align: right;"> <button style="background-color:#ffb74d;" onclick="MoveToNextStep(akcja Send for consultation)"> Send for consultation </button> </div>
Przycisk HTML może zostać umieszczony w dowolnym miejscu formularza. Równocześnie ścieżka, która będzie wywoływana, może zostać ukryta w standardowym miejscu wyświetlania ścieżek formularza. Możemy tego dokonać poprzez utworzenie reguły wywoływanej na ładowanie strony (Nazwa obiegu > Główny formularz > Zachowanie) (Rys. 6).
Rys. 6 Reguła wywoływana na ładowanie strony formularza
Wygląd przycisku na formularzu został przedstawiony na Rys. 7.
Rys. 7 Formularz z widocznymi przyciskami, zdefiniowanymi w atrybutach HTML
W przedstawionym przypadku atrybut HTML został umieszczony po prawej stronie formularza (‘Send for consultation’). Kliknięcie go zadziała tak samo, jak przejście normalną ścieżką, tyle że ścieżka nie znajduje się na dole formularza, tylko w wybranym przez nas miejscu.
Wywołanie reguły formularza ‘InvokeMenuAction’
Reguła ‘InvokeMenuAction’ pozwala na wywołanie przycisku zdefiniowanego jako przycisk menu na kroku. Przykładowy przycisk menu został skonfigurowany na kroku Purchase order approval (Rys. 8).
Rys. 8 Konfiguracja akcji wywoływanej na przycisku w menu, na kroku Purchase order
Przykładowa konfiguracja atrybutu HTML z wywołaniem akcji z menu została przedstawiona na Rys. 9. W przedstawionym przypadku, kliknięcie na przycisk „Send a custom mail to ‘Person to notify’” wysyła niestandardowego maila do osoby wskazanej w polu ‘Person to notify’ (Rys. 7).
Rys. 9 Konfiguracja atrybutu HTML z przyciskiem wywołującym przycisk menu
Kod HMTL z konfiguracji przedstawionej na Rys. 9:
<div style="text-align: right;"> <button style="background-color:#81c784;" onClick="InvokeMenuAction(akcja Send a custom e-mail)">Send a custom mail to 'Person to notify' </button> </div>
Wygląd przycisku na formularzu został przedstawiony na Rys. 7. Należy dodać, że przycisk menu „Send a custom email” będzie widoczny tylko na kroku Purchase order approval, dlatego też przycisk ‘Send a custom mail to ‘Person to notify’ powinien zostać oznaczony jako widoczny na matrycy tylko na tym kroku. Ustawienie widoczności przycisku na innym kroku niż ten, spowoduje, że przycisk będzie widoczny, ale nie będzie działać.
Wywołanie reguły formularza ‘InvokeRule’
Reguła ‘InvokeRule’ pozwala na wywołanie dowolnej (globalnej lub lokalnej) reguły formularza. Przykładowa konfiguracja została przedstawiona na Rys. 10.
Rys. 10 Konfiguracja atrybutu HTML z przyciskiem wywołującym regułę formularza
Kod HMTL z konfiguracji przedstawionej na Rys. 10:
<div> <button style="color:red;" onclick="InvokeRule(akcja Validate fields)">Validate fields</button> </div>
Wygląd przycisku na formularzu został przedstawiony na Rys. 11.
Rys. 11 Formularz z widocznymi przyciskiem, zdefiniowanymi w atrybucie HTML
W przedstawionym przykładzie, klikniecie na przycisk ‘Validate fields‘ sprawdza poprawność pól ‘Required by date’ oraz ‘Amount’. W regule formularza możliwe do zdefiniowania są różne komunikaty pojawiające się na ekranie, w zależności od wartości sprawdzanych pól (Rys. 12).
Rys. 12 Reguła formularza ‘Validate fields’
Wywołanie reguły formularza ‘StartElement / OpenElement’
Reguła ‘StartElement / OpenElement’ pozwala na otworzenie lub wystartowanie dowolnego elementu. W przypadku, gdy startowany/ otwierany element powinien zostać otwarty w nowym oknie, należy wybrać reguły formularza StartElementInNewWindow/OpenElementInNewWindow (Rys. 13).
Konfiguracja akcji StartElement wymaga znajomości identyfikatora obiegu workflowID oraz identyfikatora formularza formID.
Wartości te należy wprowadzić do reguły formularza – widoczne są one w zakładce ‘General’ po wybraniu kart wybranego obiegu oraz formularza, albo na pasku adresu (Rys. 13) po wystartowania nowego elementu – w zapisie /app/applicationID/start/wf/workflowID/dt/formID/
Rys. 13 Pasek adresu zawierający workflowID oraz formID
Przykładowa konfiguracja została przedstawiona na Rys. 14.
Rys. 14 Konfiguracja atrybutu HTML z przyciskiem wywołującym wystartowanie nowego elementu obiegu
Kod funkcji StartElementInNewWindow:
StartElementInNewWindow(workflowID, formID, 'AttText1=' + encodeURIComponent('WEBCON') + '&AttText2=' + encodeURIComponent('BPS'))
W przypadku reguły OpenElement, konieczna jest znajomość identyfikatora elementu elementID – jest to wartość, która również można znaleźć na pasku adresu, po otworzeniu wybranego elementu w przeglądarce, w zapisie /app/applicationID/element/elementID/
Kod funkcji OpenElement:
OpenElement(elementID, 'AttText1=' + encodeURIComponent('WEBCON') + '&AttText2=' + encodeURIComponent('BPS'))
Wygląd przycisku na formularzu został przedstawiony na Rys. 15
Rys. 15 Formularz z widocznymi przyciskami, zdefiniowanymi w atrybutach HTML
W przedstawionym przypadku, kliknięcie na przycisk ‘Add new item’ otwiera formularz, w którym możliwe jest zarejestrowanie nowego przedmiotu.
Przycisk prowadzący do strony internetowej
Przy użyciu Atrybutu HTML możemy również wprowadzić na formularz inne funkcjonalności, możliwe do zastosowania przy użyciu składni HTML z językiem JavaScript (Rys. 16). Wykorzystywane uprzednio wydarzenie onClick, to właśnie wydarzenie zdefiniowane w języku JS. W poniższym przykładzie metoda window.open() wywoływana jest po kliknięciu przycisku. Metoda ta otwiera nowe okno przeglądarki na stronie podanej w pojedynczym cudzysłowie – tutaj https://webcon.com.
Rys. 16 Konfiguracja atrybutu HTML z przyciskiem otwierającym link
Kod HTML z funkcją JavaScript, pozwalającą na otwarcie linku do strony w nowym oknie przeglądarki:
<div style="margin-top:15px; margin-bottom:15px;"><button style="background-color:#a6d4fa;" onClick="window.open('https://webcon.com');">Open WEBCON page </button> </div>
Podsumowanie
Atrybut HTML pozwala na wprowadzenie niestandardowego kodu HTML w dowolnym miejscu formularza. Wykorzystanie go w połączeniu z regułami formularza JavaScript, bądź z innymi metodami JavaScript, znacznie rozszerza spektrum funkcjonalności możliwych do wprowadzenia na formularzu.
