WebForm Designer¶

Mit dem Formular Designer können Sie Formulare nach Ihren Bedürfnissen gestalten und mit Funktionalität versehen. So können Sie die Dialogseiten in einem Prozessschritt mit HTML-Elementen anzeigen, Datenbanken abfragen und Java- oder VB Scripts ausführen. Der Web Form Designer ist standardmäßig in der AristaFlow BPM Suite integriert und kann nach dem Einbinden der Aktivität WebForm in einen Prozessschritt gestartet werden.

Erstellung von Webformular¶

Die Aktivität WebForm per Drag´n´Drop auf einen Prozessschritt ziehen und auf der Wizard-Seite auf Finish klicken, somit werden alle Eingabe- und Ausgabeparameter automatisch in das WebForm eingebunden. Sie können auch durch wiederholtes Klicken von Next die Parameter überprüfen oder manuell verbinden.
Prozessschritt selektieren und über das Rechtsklickmenü Open in Form Designer… auswählen
WebForm Komponenten API

Die Dokumentation der aktuellen JavaScript API, die innerhalb von Formularen verwendet werden kann, finden Sie über das Menü Help im Form Designer.
Im Designer Fenster befinden sich links die Formularelemente und rechts die Eigenschaften, die auf diese Komponenten angewendet werden können. Die Elemente ziehen Sie per Drag'n'Drop auf die Formularfläche und designen das Layout direkt im Formular nach Ihren Wünschen. Formular Designer bietet verschiedene Elemente sowohl für die Anzeige als auch für die Benutzereingabe wie z.B. Label, Buttons, Image, Textbox, Checkbox ... Jedoch nach dem Einfügen der Elemente müssen diese mit entsprechenden Funktionalität versehen werden. Beispielsweise bei Datumsfeldern aktivieren Sie die Kalenderfunktion, indem Sie bei Properties -> calendar den Wert auf true setzen. Alternativ können Sie die Ein- und Ausgabefelder von rechts über Process Data durch die Ein- bzw. Ausgabeparameter wiederum per Drag´n´Drop erstellen. In diesem Fall werden die Labels für die Parameter auch automatisch angelegt. Dann können Sie den Schritt 4 überspringen, da die Input- und Outputparameter schon mit den Formularelementen verbunden sind.
Die Eingabefelder müssen mit entsprechenden Ein- und Ausgabeparametern verbunden werden (wenn diese nicht per Drag&Drop von rechts also über Process Data erstellt wurden). Die Verbindung der Aktivität mit den Prozessdaten erfolgt über die Parameter am Prozessschritt. Unter Process Data finden Sie die Ein- und Ausgabeparameter des aktuellen Prozesschritts. Zur Verknüpfung ziehen Sie die Parameter auf das entsprechende Feld und nach dem Ablegen erscheint unter Control Name der Name des Feldes (siehe vorheriges Bild).

Hinweis

Nach der Anbindung einer Aktivität an einem Prozessschritt können Sie die Ein- und Ausgabeparameter nur über die Wizardseite editieren. Diese rufen Sie durch einen Doppelklick auf den Schritt auf.
In der folgenden Abbildung finden Sie kurze Erläuterungen zu den geläufigen Eigenschaften von Formularelementen.
Mit Strg+S können Sie das WebForm speichern und nach dem Schließen des WebForm Designers das Web Formular im Clienten ausführen.

Übersicht Formularelemente (Controls)¶

Control	Beschreibung
Attachment	Ein Attachment bietet die Möglichkeit, eine Datei hochzuladen.
Button	Ein Button kann eine festgelegte JavaScript-Funktion ausführen
CheckBox	Standard-Checkbutton
ComboBox	Drop-Down-Menü, entweder mit vordefinierten Werten innerhalb des Formulars oder automatisch befüllbar mit Ergebnissen einer SQL-Abfrage
CustomControl	Für spätere Erweiterung reserviertes Element, wird in diesem Dokument nicht behandelt
Date	Datum (Tag, Monat und Jahr sowie Uhrzeit, auch in Kombination). Das Format lässt sich in den Eigenschaften einstellen. Kann bei Aktivierung eine Kalender angezeigt werden, mit deren Hilfe sich das Element komfortabel befüllen lässt.
File	Mit File kann ein Benutzer eine verknüpfte Datei herunterladen Image Bild im Formular anzeigen, z.B. für ein Logo
Label	Text
Link	URL
RadioButton	Radioknöpfe, die zu einer Gruppe zusammengefasst werden können (indem man ihnen denselben internen Namen gibt), um eine Auswahl über mehrere Möglichkeiten zu geben.
SubtableView	Tabelle ( für weitere Informationen siehe Subtabellen)
TextBox	Simple Texteingabe, das akzeptierte Format hängt von den verknüpften Prozess ein- und Ausgabeparametern ab. Ist in AristaFlow ein Datenelement vom Typ Date zu befüllen, so akzeptiert die TextBox auch nur ein solches im richtigen Format (dd.mm.yy). Unterstützt sowohl einen Einzeilen- als auch Mehrzeilenmodus.
GroupBox	Mit einer GroupBox können mehrere Elemente logisch zusammengefasst werden, etwa um sie mit einem Rahmen zu versehe oder um sie zur Laufzeit gemeinsam ein- oder auszublenden.

Control Eigenschaften¶

Controltyp	Beschreibung
Name	Intern vergebener Name des Controls. Mit diesem Bezeichner lässt sich das Control in JavaScript referenzieren
Type	Zeigt den Typ des Controls an z.B. TextBox, Button,...
Readonly	Legt fest, dass nur lesender Zugriff auf das Control möglich ist
Hidden	Versteckt, aber deaktiviert das gewählte Control nicht
Disabled	Deaktiviert das Control, blendet es jedoch nicht aus („ausgrauen“)
Optional	Gibt an, ob das Control vom Benutzer ausgefüllt werden muss oder nicht
Groupbox	Gibt den Namen der umschließenden Groupbox an
Tabindex	Legt die „Sprungreihenfolge“ der Tabulatortaste fest.
Text/Value	Die im Formular angezeigte Beschriftung bzw. Wert des Controls
Alignment	Horizontale Textausrichtung (Left, Center, Right)
Multiline	Gibt an, ob die Textbox mehrzeilig ist
Event-Handler	JavaScript-EventHandler – führen JavaScript-Funktionen nach Triggern eines bestimmten Events aus (onChange, onUpdate, onBlur, etc.)

Layout	Beschreibung
Left	Abstand des Controls vom linken Formularrand in Pixel
Top	Abstand des Controls vom oberen Formularrand in Pixel
Width	Breite des Controls in Pixel
Height	Höhe des Controls in Pixeln
Zorder	Gibt an, in welcher Reihenfolge die Controls auf dem WebForm von hinten nach vorne angeordnet sind

Design	Beschreibung
Forecolor	Farbe des Controls
Backcolor	Hintergrundfarbe des Controls
Font ...	Eigenschaften der verwendeten Schrift

Data	Beschreibung
Input Parameter	Eingabeparameter des Prozessmodells, der beim Aufruf des Prozessschritts als Wert für das Control gesetzt werden soll
Output Parameter	Ausgabeparameter des Prozessmodells, der beim Verlassen des Prozessschrittes den Wert des Controls übergeben bekommt
Databasequery	Auswahl der unter „Data Sets“ definierten Datenbankabfrage
Databasecolumn	Auswahl der Datenbankspalte, die den Input für das Füllen des Controls liefert
Fillmode	"Static" bei fest definierten Werten / "Database" bei Datenbankabfragen

Erstellen von Tabellen (Subtables)¶

Beim Anlegen von Tabellen (Subtables) muss man unterscheiden zwischen Tabellen, die nur formularintern (interne Subtabellen) verwendet werden und solchen, die via Ausgabeparameter (Output-Subtabellen) an nachfolgende Prozessschritte weitergereicht werden.

Interne Subtabellen finden vor allem zur Darstellung von Datenbank-Anfrageergebnissen Verwendung. Im Prinzip können diese im Formular auch verändert werden, jedoch ist die Subtabelle als Ganzes kein Ausgabeparameter der Formularaktivität. Output-Subtabellen werden im Gegensatz dazu auf einen Ausgabeparameter der Fomularaktivität abgebildet. Aus diesem Grund muss zusätzlich zur graphischen Repräsentation im Formular noch eine subtable-Datenstruktur angelegt und mit der graphischen Repräsentation verknüpft werden, welche die Subtabelle als „Ausgabeobjekt“ kapselt und über den assoziierten Ausgabeparameter nach außen gibt. Zur Erstellung von Subtabellen anhand eines Beispielprozesses siehe Realisierung interner Subtabellen und Realisierung von Output-Subtabellen.

Um in einer Tabelle Informationen anzeigen zu können, müssen zuerst passende Spaltendefinitionen erstellt werden. Hierzu werden in den Properties des Controls SubtableView die gewünschten Spalten definiert. Nach einem Klick auf den Button Edit Columns (unten im Properties-Reiter) öffnet sich der Column-Editor, in dem man die gewünschten Spalten anlegen kann. Im Properties-Formular der Spalten werden die Eigenschaften wie beispielsweise Name oder Titel festgelegt. Die unter Controltyp, Layout, Design und Data beschriebenen Eigenschaften haben hierbei dieselbe Bedeutung wie bei normalen Controls Control Eigenschaften beschrieben.

Die Einträge in der Subtabelle kann man, falls gewünscht, als änderbar gestalten.

Änderung von einzelnen Tabellenwerten
Mit dem Eintrag readonly (true/false) auf Ebene des Controls Subtableview kann man global festlegen, ob Änderungen am Tabelleninhalt prinzipiell möglich sein soll oder nicht. Welche Einträge ggf. tatsächlich änderbar sind, wird auf Spaltenebene entschieden, indem dort das readonly-Attribut der Spalte auf true oder false gesetzt wird.
Einfügen und Löschen von Zeilen
Mit dem Eintrag addremove auf Ebene des Controls Subtableview kann man festlegen, ob zur Laufzeit Zeilen zur Tabelle hinzugefügt oder gelöscht werden können. (Wenn man neue Zeilen einfügen lassen möchte, dann sollten (zumindest einige) Spaltenwerte mit readonly = false ausgestattet sein, sonst kann man nur leere Zeilen einfügen). Mit diesem Feature kann z.B. eine Datenerfassung in tabellarischer Form realisieren, indem solange neue Zeilen angehängt werden, wie noch Positionen zu erfassen sind.

Spaltentypen für Subtables¶

Control	Beschreibung
Text Column	Textspalte, die auch beschrieben werden kann (ReadOnly = false)
Drop Down Column	Spalte mit Dropdown-Menüs, die Werte können hierbei in den Eigenschaften unter Data -> Static Items bearbeitet werden
Check Column	Checkboxen als Spalte
File Column	Button mit der Möglichkeit Dateien hochzuladen
Link Column	Link auf eine Web-Ressource
Button Column	Aktionsloser Button, dessen Funktionalität per JavaScript programmiert werden kann
Attachment Column	Heruntergeladene Datei
Image Column	Bettet Bilder in die jeweilige Spalte ein

Ereignistypen für Controls¶

Der WebForm-Designer kennt folgende Ereignistypen:

Eventtyp	Zeitpunkt des Auftretens
onclick	Event nach Anklicken des Controls
ondbclick	Event nach zweimaligem Klicken in das entsprechende Control
onchange	Event nach Änderung des Inhalts
onfocus	Event nach Auswählen des Controls (z.B. per Tabulator oder Maus)
onblur	Event nach Verlassen des Controls

Wenn ein Event geworfen wird, lässt sich mittels Actiontype Reload entweder ein anderes Control erneut laden (und dann werden ggf. dessen registrierte Events ausgelöst) oder es kann mittels Actiontype Script ein Script zur Ausführung gebracht werden. Soll ein Eventtyp (z.B. onchange) sowohl Reload- als auch Script-Events auslösen, dann fügt man das entsprechende Ereignis im Eventhandler mittels Menüpunkt Add einfach mehrfach ein, um die unterschiedlichen Aktionen hinterlegen zu können.

Für ein Bespiel mit Onclick-Reload-Ereignis siehe Ereignisgesteuerte DB-Anfragen-Ausführung zur Aktualisierung von Controls. Für ein Bespiel mit Onchange-Reload-Ereignis siehe Formulare mit Events und Aktionen ausstatten.

Erstellung von JavaScript-Funktionen¶

Die empfohlene Vorgehensweise eine JavaScript-Funktion zu erstellen und es einem Control-Ereignis zuzuordnen ist wie folgt: Man spezifiziert im zentralen JavaScript-Fenster des Formulars (erreichbar via Menü Edit -> Scripts…) die gewünschte Funktion und ruft diese dann im Eventhandler des Controls auf. Hierdurch stehen alle JavaScript-Routinen des Formulars an einer zentralen Stelle und man vermeidet zudem redundanten Code, wenn eine Funktion von mehr als einem Control gerufen werden muss (weitere Details hierzu in Abschnitt Verknüpfung von JavaScript-Funktionen mit Events und Controls.

JavaScript ist eine an Java angelehnte Programmiersprache, die in HTML-Seiten eingebettet werden kann. Eine übersichtliche Darstellung der JavaScript-Sprachelemente finden Sie in zahlreichen Tutorials im Internet. (Eine gute Online-Quelle für JavaScript finden Sie unter http://de.selfhtml.org/javascript).

Die Controls der WebForm-Formulare bieten eine Reihe von Methoden an, die man in JavaScript-Programmen ansprechen kann. So kann man z.B.

Den Wert eines Controls abfragen oder setzen
Ein Control sichtbar machen oder verstecken
Ein Control auf readonly setzen oder dies wieder aufheben
…

Die Beschreibung dieser Methoden befindet sich im Menü des WebForm Designers unter Help -> Show API documentation.

Handhabung der „Formular-Ereignisse“ onload, submit und onsuspend¶

Gelegentlich will man beim Laden einer Formularaktivität gewisse Dinge ausführen, wie z.B. das Ausblenden von Controls und Subformularen, das Berechnen von Werten oder das Vorbelegen von Controls mit initialen Werten. Zwar kann man dies meist auch mittels der Properties der Controls tun, doch dann sind diese Aktionen jedoch quasi im ganzen Formular verstreut. Aus Dokumentations- und Wartungsgründen ist es deshalb besser, diese Dinge in eine Initialisierungsfunktion im zentralen JavaScript-Fenster zu packen und diese beim Laden des Formulars ausführen zu lassen.

Die Bearbeitung von vielen interaktiven Prozessschritten (so auch WebForm-Formularschritte) kann unterbrochen Suspend Activity und zu einem späteren Zeitpunkt wieder fortgesetzt werden Resume Activity. Bei einem solchen Suspend werden zwar eventuelle Formular-Eingaben gespeichert, nicht aber die Werte berechneter Felder. Wenn man nach einem Resume das Formular automatisch wieder in dem Zustand sehen soll, in dem verlassen wurde, muss man beim Laden des Formulars etwaige Berechnungen zum Befüllen von Controls (nochmals) auslösen. Hierzu spezifiziert man beim EventHandler des Formulars (auf der „Hauptebene“) ein onload-Ereignis und hinterlegt dort den Aufruf einer entsprechenden Funktion, z.B. init(), in der dann auszuführenden Einzelfunktionen gerufen werden. Für ein Beispiel mit einer Funktion, die beim Laden eines WebFormulars aufzurufen ist, schauen Sie Formular-Ereignis: onload.

Mehrblatt Formulare¶

Der WebForm-Designer unterstützt auch die Realisierung von Mehr-Blatt-Formularen, wobei jedes Blatt durch einen eigenen Reiter am linken oberen Rand angesprochen wird. Die Beschriftung dieser Reiter können wir in den Properties dieses Blattes festlegen.

Ein neues Formularblatt wird mittels Edit -> Add Subform eingefügt.

Auf den weiteren Formularblättern stehen ebenfalls die Ein-/Ausgabeparameter zur Verknüpfung zur Verfügung. D.h. Controls auf den verschiedenen Formularblättern „teilen“ sich ggf. denselben Parameter. (Nicht davon irritieren lassen, dass in der Process Data-Ansicht nur eine Verknüpfung angezeigt wird; ausschlaggebend sind die entsprechenden Property-Einträge bei den Controls!). Weitere Einzelheiten zum Arbeiten mit Mehrblatt-Formularen finden sich im Abschnitt Arbeiten mit Subformularen.

Umgang mit Parametern vom Typ USERDEFINED subtable¶

AristaFlow verfügt über eine Reihe vordefinierter „erweiterter Datentypen“, um bei Bedarf auch mit nichtelementaren Datentypen als Eingabe- oder Ausgabeparameter umgehen zu können. Sie gehören zur Typ Kategorie USERDEFINED und sind jeweils als Java-Klassen realisiert.

Die Beschreibung dieser Java-Klassen mit ihren Klassen- und Objektmethoden findet sich in jedem AristaFlow BPM Suite Release unter dem Namen aristaflow-javadoc-all. Sie kann über den Download-Server der AristaFlow GmbH als Online Dokumentation eingesehen werden. Klicken Sie dazu auf diesen Link https://pubweb.aristaflow.com/temp/res/Chronos/javadoc/.

Der Typ USERDEFINED subtable gehört zu diesen erweiterten AristaFlow-Datentypen. Seine Beschreibung findet sich unter Class WebFormSubtable und kann über die Packages de/aristaflow/adept2/extensions/datatypes erreicht werden.

USERDEFINED subtable als Input-Parametertyp einer WebForm-Aktivität¶

Um in einer WebForm-Aktivität einen Input-Parameter von Typ USERDEFINED subtable in eine SubtableView einlesen und dort ggf. weiterverarbeiten zu können, geht man im Prinzip genauso vor, wie wenn man die Subtable als Output-Parameter ausgeben möchte (siehe Abschnitt Realisierung von Output-Subtabellen), nur dass man jetzt bei der Definition der Subtable-Datenstruktur darauf achten muss, dass die dort verwendeten Attributnamen exakt gleich wie in der Input-Subtable-Struktur gewählt werden, da die Zuordnung „by Name“ vorgenommen wird. Hinsichtlich der Datentypen hat man hier zwar etwas größere Freiheiten, aber aus Gründen der Nachvollziehbarkeit sollte man diese besser auch identisch wählen. Hinsichtlich der Gestaltung der im Formular angezeigten Tabelle (SubtableView) ist man wieder frei, da die Zuordnung der Spalten der Subtable-Datenstruktur zu den Spalten der SubtableView wieder explizit (und ggf. auch selektiv) vorgenommen wird. Für Details siehe Abschnitt Realisierung von Output-Subtabellen.

Weiterverarbeitung von USERDEFINED subtable-Ausgabeparametern¶

Für die Verarbeitung von Java-Objekten vom Typ USERDEFINED subtable in einer Scripting-Aktivität oder einem konventionellen Javaprogramm stellt die Klasse WebFormSubtable ein ganzes Arsenal von Methoden bereit. So kann man unter anderem z.B.

Die Attributnamen ermitteln (getColumnNames())
Die Anzahl der Tabellenzeilen ermitteln (getRowCount())
Gezielt auf Tabellenzeilen und deren Elemente zugreifen (getValue(…))
Einzelne Zeilen aus der Menge entfernen (removeRow(…))

Im Abschnitt Auftragserfassung zeigen wir anhand eines Beispiels die Weiterverarbeitung von subtable-Objekten mittels Scripting-Aktivität.