Projektowanie systemu workflow przy
użyciu narzędzia BizAgi Studio
Część 3
Projektowanie formularzy
Instytut Systemów Informatycznych, Wydział Cybernetyki, Wojskowa Akademia Techniczna
Paweł Mieteo, Jarosław Koszela
Spis treści
Projektowanie formularzy
Kolejnym krokiem w tworzeniu aplikacji przy użyciu BizAgi Studio jest projektowanie formularzy na
poszczególnych etapach procesu.
Rysunek 1. BizAgi Studio - wejście w tryb definiowania formularzy
Klikamy w napis „Define Forms” aby narzędzie wyświetliło nam diagram procesu w trybie
definiowania formularzy.
Aby przejśd do definiowania formatki, trzeba kliknąd na element procesu, na którym chcemy ją
zdefiniowad.
Rysunek 2. Narzędzie do definiowania formatki
W oknie Data Binding widoczny jest zestaw danych oraz formularzy dodatkowych, które możemy
umieścid na definiowanym oknie. W celu dodania elementu na formatkę należy przeciągnąd dany
element na główne okno. Nowy element dodawany jest z ustawieniami domyślnymi, możemy je
modyfikowad po przez menu kontekstowe oraz po przez okno Properties.
Złożenie wniosku o poprawę egzaminu
Projektowanie interfejsu rozpoczniemy od aktywności „Złożenie wniosku o poprawę egzaminu”.
Docelowo chcemy, aby formatka ta wyglądała w następujący sposób:
Rysunek 3. Wygląd zaprojektowanej formatki w przeglądarce internetowej
Rysunek 4. Dodane elementów grupujących
Z górnego paska elementów dwukrotnie wybieramy Group i przeciągamy go na główny ekran.
Dodane dwa elementy grupujące nazywamy odpowiednio Dane studenta i Wniosek.
Rysunek 5. Grupa „Dane studenta” – Ustawienie trybu tylko do odczytu
Z okna Data Binding na obszar Dane studenta przeciągamy trzy elementy:
App->Wniosek->Student->fullName
App->Wniosek->Student->contactEmail
App->Wniosek->Numer indeksu
Dwóm pierwszym elementom zmieniamy nazwy opisowe na Student i E-mail oraz ustawiamy je w
tryb tylko do odczytu. Można to uczynid przez okno właściwości lub przez menu kontekstowe.
Natomiast pole Numer indeksu ustawiamy na wymagane w menu kontekstowym wybierając opcję
Required->True.
Rysunek 6. Grupa „Wniosek"
Następnie z okna Data Binding na obszar Wniosek przeciągamy trzy elementy i ustawiamy
następujące właściwości:
App->Wniosek->Student->Data złożenia
o Ustawiamy tryb tylko do odczytu
App->Wniosek->Student->Uwagi studenta
o We właściwościach ustawiamy parametr Render Type na wartośd Extended Text
App->Wniosek->WybranePrzedmioty
o Domyślnie tabelka z przedmiotami pojawi się bez kolumn. W celu dodania ich należy
z okna Data Binding przeciągnąd właściwośd które chcemy wyświetlid. W naszym
przypadku dodajemy App->Wniosek->WybranePrzedmioty->Przedmiot->Nazwa
o Nowo dodanej kolumnie ustawiamy właściwośd tylko do odczytu
o W celu dodania kolumny z opcją usuwania na tabelce trzeba ustawid właściwośd
Allow Delete
o Kolejnym krokiem konfigurowania listy przedmiotów jest definicja formatki, która
pozwoli przypisad przedmiot. W tym celu z okna właściwości wybieramy opcje New
Form przy opcji Add Form. Narzędzie uruchomi nowy edytor formularza, na którym
dodamy opcję wybierania przedmiotów.
Rysunek 7. Formularz wybierania przedmiotu
Na formularz przenosimy element App->Wniosek->WybranePrzedmioty->Przedmiot a następnie
zmieniamy typ kontrolki na Combo Box.
Rysunek 8. Zmiana typu kontrolki przy użyciu menu kontekstowego
W celu zmiany typu kontrolki używamy okna właściwości lub menu kontekstowego.
Używając dolnych zakładek można przeskakiwad między formularzem głównym i podrzędnymi.
Ostatnim krokiem w definiowaniu pierwszej formatki jest ustawienie walidacji tak, aby użytkownik
musiał wybrad minimum jeden przedmiot.
Rysunek 9. Ustawienie walidacji na liczbę wybranych przedmiotów
Aby dodad takie obostrzenie należy na właściwościach tabelki z przedmiotami rozwinąd grupę
Advanced i kliknąd opcję Grid Validation. Otworzy się narzędzie pozwalające zdefiniowad walidację.
W pierwszym kroku dodajemy ‘Countera’ używając przycisku Add Counte. Nadajemy mu nazwę w
drugim polu wybieramy opcję Table Info a w trzecim Row Count. W drugim kroku Dodajemy
walidacje wybierając wcześniej zdefiniowany element, operator porównania Equal oraz wpisując
wartośd 0. Oznaczad to będzie, że jeśli liczba przedmiotów będzie równa zero to zostanie
wygenerowany błąd. W ostatnim kroku ustawiamy komunikat błędu i wciskamy przycisk OK.
Przyjmowanie wniosku do rozpatrzenia
W tym kroku dziekanat będzie mógł, zweryfikowad wniosek od strony formalnej podejmując jedną z
trzech decyzji: Odrzucenie warunkowe, Odrzucenie definitywne, Przyjęcie. Dodatkowo będzie mógł
dopisad uwagi, które w przypadku odrzuceo będą wymagane.
Rysunek 10. Formatka podejmowania decyzji przez dziekanat
BizAgi studio pozwala nam definiowad formatki reużywalne, dzięki czemu raz zdefiniowany zestaw
kontrolek możemy użyd na wielu formularzach. Dane studenta oraz lista przedmiotów wybranych są
obszarami, które z pewnością będą potrzebne na wielu stepach. W związku z tym utworzymy dwa
formularz Dane studenta oraz Wybrane przedmioty.
Rysunek 11. Tworzenie formatki reużywalnej
W celu utworzenia nowej formatki w oknie Data Binding, z menu kontekstowego z węzła Forms
wybieramy opcję New Form.
Rysunek 12. Nadanie nazwy formularzowi Dane studenta
Po dodaniu nowego formularz w oknie właściwości, należy nadad mu nazwę we właściwości Display
Name. Jako pierwszy utworzymy formularz Dane studenta.
Rysunek 13. Formularz Dane studenta
Na formularz przeciągamy element grupujący nadając mu nazwę Student. Następnie przeciągany 5
elementów:
App->Wniosek->Student->fullName
App->Wniosek->Student->contactEmail
App->Wniosek->Numer indeksu
App->Wniosek->Punkty ECTS
App->Wniosek->Uwagi studenta
Każdy z nich ustawiamy, jako nieedytowalny, gdyż będzie to tylko formatka informacyjna.
Po dodaniu elementów zapisujemy formatkę. Używając dolnych tabów przechodzimy na główne
okno, na które możemy przeciągnąd nowozdefiniowaną formatkę. Definicja ta znajduje się w oknie
Data Binding->Forms->Dane studenta
Kolejną formatką do zdefiniowania jest lista wybranych przedmiotów, postępujemy w sposób
analogiczny aby utworzyd kolejny formularz.
Rysunek 14. Nadanie nazwy formularzowi Wybrane przedmioty
Po dodaniu nowego formularz w oknie właściwości, należy nadad mu nazwę we właściwości Display
Name.
Rysunek 15. Dodanie listy przedmiotów
Na pusty formularz przeciągamy element Wybrane przedmioty.
Rysunek 16. Dodanie kolumny do tabeli z listą przedmiotów
Z okna Data Binding przeciągamy element App->Wniosek->WybranePrzedmioty->Przedmiot->Nazwa
na obszar tabelki w celu dodania kolumny z nazwą przedmiotu. Domyślnie kolumna dodaje się w
trybie edytowalny.
Rysunek 17. Okno właściwości dla listy danych
Chcemy aby lista ta była nieedytowalna w związku z tym ustawiamy dwie właściwości:
Editable = False
Display Form Fields As Readonly =True
Tak zdefiniowany formularz zapisujemy I przechodzimy do głównego, aby umieścid na nim listę
przedmiotów.
Pod listą przedmiotów umieszczamy jeszcze dwa elementy
App->Wniosek->Decyzja dziekanatu
o Ustawiamy wymagalnośd pola
o Submit on changed istawiamy na True tak aby po zmianie wartości mogła zmienid się
wymagalnośd pola Uwagi dziekanatu.
App->Wniosek->Uwagi dziekanatu
o Zmianiamy Render Type na Extended Text
o Chcemy, aby pole Uwagi dziekanatu było wymagane w przypadku odrzucenia
wniosku w związku z tym ustawiamy właściwośd Require na Expresion I definiujemy
zależnośd.
Rysunek 18. Definicja wyrażenia na wymagalnośd pola
Na linie warunku przeciągamy wartośd Decyzja dziekanatu, gdyż od tej wartości ma zależed
wymagalnośd. Operator porównania ustawiamy na „is difference to „. Na koocu wybieramy Wartośd
Przyjęcie. Całe wyrażenie oznacza, że pole będzie wymagane jeśli wartośd Decyzja dziekanatu będzie
różna od Przyjęte. Na koocu wciskamy przycisk Finish.
Dokonanie wymaganych czynności
Na tym etapie workflow definiujemy formatkę używając wcześniej przygotowanych formatek Dane
studenta i Wybrane przedmioty oraz dodatkowo dodając elementy Uwagi dziekanatu i Uwagi
studenta. Formatka ta przedstawia się następująco:
Rysunek 19. Definicja formatki na kroku "Dokonanie wymaganych czynności"
Przyjmowanie wniosku
Podczas aktywności dziekana formatka będzie przedstawiała dane o studencie, listę przedmiotów
oraz kontrolkę do podjęcia decyzji.
Rysunek 20. Definicja formatki na kroku " Przyjmowanie wniosku"
Wpłynięcie pieniędzy, Przygotowanie kart poprawkowych, Wprowadzenie
danych do systemu E-dziekanat, Wydanie dokumentów
Na zestawie pozostałych kroków użytkownik będzie miał do wglądu dane o studencie oraz listę
przedmiotów. Użytkownik nie będzie wprowadzał żadnych dodatkowych danych do systemu a
jedynie po przez przycisk dalej będzie potwierdzał, że zrealizował dane zadanie.
Rysunek 21. Definicja formatki na krokach: Wpłynięcie pieniędzy, Przygotowanie kart poprawkowych, Wprowadzenie
danych do systemu E-dziekanat, Wydanie dokumentów