dotyczy wersji 8.0.x; autor: Kamil Nędza

Opis funkcjonalności:

Podczas korzystania z WorkFlow z poziomu przeglądarki internetowej, często niezbędne jest, aby formularz wyglądał lub zachowywał się w odpowiedni sposób. W tym celu wykorzystuje się JavaScript. Za jego pomocą jesteśmy w stanie między innymi zmieniać wartości atrybutów, ukryć widoczność pól, zapewnić dodatkowe warunki walidacyjne. WEBCON BPS – Designer Studio pozwala na wykorzystanie JavaScript na wiele sposobów:

• Jako skrypt do wykonania przy zmianie wartości atrybutu
• Jako skrypt do zarejestrowania na stronie
• Globalnie jako skrypt do uruchomienia przy ładowaniu strony
• Globalnie jako skrypt do uruchomienia przy ładowaniu strony i postbackach
• Jako skrypt dodatkowej walidacji przy wyborze ścieżki

Dodatkowo WEBCON BPS – Designer Studio posiada kreator JavaScript – narzędzie wspomagające tworzenie skryptów. Dzięki niemu użytkownik może wprowadzić skrypty ręcznie, lub skorzystać z gotowych dostępnych skryptów.

Rys. 1. Okno kreatora JavaScript

 

Przykład realizowanej funkcjonalności:

Na istniejącym obiegu budżetu (Opis obiegu znajduje się w artykule: Sterowanie obiegiem) chcemy dodać dwie funkcjonalności:

1. Dodanie na formularzu w kroku „Realizacja budżetu” checboxa „Zmień Kwotę początkową”. Po jego zaznaczeniu, na formularzu pojawi się pole „Nowa kwota początkowa”. Przejście ścieżką przejścia „Zmień kwotę początkową” spowoduje zmianę „Kwoty początkowej”.
2. Dodanie ścieżki przejścia „Anuluj budżet”. Przejście tą ścieżką przejścia, spowoduje przejście dokumentu do kroku „Anulowane”. Chcemy, aby na ścieżce przejścia był dodany JavaScript, który wyświetli okienko dialogowe, pytające, czy jesteśmy pewni, że chcemy anulować budżet.

 

Konfiguracja:

Do istniejącego już obiegu Budżetu dodajemy atrybut typu wybór Tak/Nie (checkbox)  „Zmień Kwotę początkową” oraz atrybut „Nowa kwota początkowa”. Dodajemy nową ścieżkę przejścia ”Zmień kwotę początkową”, krok negatywny „Anulowane” oraz ścieżkę „Anuluj” prowadzącą do tego kroku. Na dodanej ścieżce przejścia ”Zmień kwotę początkową dodajemy akcję, która zmienia wartość atrybutu „Kwota początkowa” na wartość z atrybutu „Nowa kwota początkowa”.

Rys. 2. Konfiguracja akcji „Zmień [Kwota początkowa]”

 

Dodatkowo niezbędna będzie akcja, która na wejście do kroku będzie liczyła pozostałe środki w ramach budżetu:

Rys. 3. Konfiguracja akcji na wejście do kroku „Realizacja budżetu” liczącej pozostałe fundusze.

Po wprowadzonych zmianach obieg powinien wyglądać następująco:

Rys. 4. Schemat graficzny obiegu budżetu

 

Teraz przystępujemy do konfiguracji JavaScript. Wchodzimy w atrybut „Zmień kwotę początkową” i przechodzimy do zakładki „Styl i zachowanie”.

Rys. 5. Okno z konfiguracją stylu i zachowania atrybutu

 

Korzystając z kreatora JavaScript tworzymy prosty warunek:

Rys. 6. Tworzenie skryptu w kreatorze

 W tym momencie mamy już ustawiony warunek, że w momencie zmiany wartości checkboxa „Zmień kwotę początkową”, zostanie pokazany lub ukryty atrybut „Nowa kwota początkowa”. Jednak wciąż domyślnie jest ona wyświetlana. Przechodzimy więc do edycji kroku „Realizacja budżetu”:

Rys. 7. Wchodzimy w edycję kroku „Realizacja budżetu”

Następnie w polu wklejamy JavaScript do uruchomienia przy ładowaniu strony. Tutaj również jesteśmy w stanie skorzystać z kreatora i wybrać go z gotowych podpowiedzi.

Rys. 8. Ukrycie atrybutu „Nowa kwota początkowa” przy ładowaniu strony

 

Należy jeszcze zadbać, aby podczas przejścia ścieżką „Zmień kwotę początkową” nie było możliwości wpisania do atrybutu „Nowa kwota początkowa” wartości pustej. Do tego celu również użyjemy JavaScript. Wchodzimy w edycję ścieżki „Zmień kwotę początkową” i klikamy zakładkę „Parametry” i wchodzimy w edytor JavaScript.

Rys. 9. Parametry ścieżki „Zmień kwotę początkową”

 

Tym razem musimy się już posłużyć własnym skryptem, który w przypadku, gdy nie wprowadzimy żadnej wartości, wyświetli komunikat i uniemożliwi przejście ścieżką:

Rys. 10. JavaScript uniemożliwiający przejście ścieżką, jeśli „Nowa kwota początkowa” będzie nieuzupełniona

Pozostaje jeszcze realizacja drugiej funkcjonalności – okna , w którym musimy potwierdzić chęć anulowania budżetu. W tym celu przechodzimy do szczegółów ścieżki anuluj na kroku „Realizacja budżetu”.

Rys. 11. Parametry ścieżki „Anuluj”

Podobnie jak miało to miejsce dla walidacji dla ścieżki „Zmień kwotę początkową”, teraz również należy użyć własnego skryptu. Jego zadaniem jest wyświetlenie okna dialogowego z wyborem OK/Anuluj. Jeżeli użytkownik potwierdzi, dokument przejdzie ścieżką przejścia.

Rys. 12. JavaScript  na okienko, proszące o potwierdzenie decyzji

 

Weryfikacja działania funkcjonalności

Rejestrujemy dokument, aby znalazł się w kroku „Realizacja budżetu”:

Rys. 13. Rejestracja budżetu

 Następnie weryfikujemy działanie checkboxa. Widzimy, że atrybut „Nowa kwota początkowa” jest niewidoczny. Dopiero zaznaczenie opcji „Zmień kwotę początkową” spowoduje wyświetlenie tego atrybutu.

Rys. 14. Widok formularza tuż po załadowaniu strony

 

Po kliknięciu w checkbox, pozostawiamy pusty atrybut „Nowa kwota początkowa” i próbujemy przejść ścieżką przejścia „Zmień kwotę początkową”.

Rys. 15. Wynik działania dodatkowej walidacji JavaScript

 

Uzupełniamy więc wymagany atrybut i ponownie próbujemy przejść ścieżką przejścia.

Rys. 16. Zmiana kwoty początkowej

Udało się. Na Rys. 17. widzimy, że „Kwota początkowa „i „Pozostałe fundusze” zostały ustawione poprawnie, Teraz pozostaje sprawdzić tylko, czy działa dodatkowa walidacja na ścieżce „Anuluj”. Po kliknięciu „Anuluj” pojawia się okienko dialogowe, które pyta nas, czy na pewno chcemy anulować dokument.

Rys. 17. Wynik działania dodatkowej walidacji JavaScript

Kliknięcie „Anuluj” spowoduje pozostanie w bieżącym kroku. W przypadku kliknięcia „OK” przejdziemy ścieżką przejścia „Anuluj”.