Zum Inhalt

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

  1. 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.

  2. Prozessschritt selektieren und ├╝ber das Rechtsklickmen├╝ Open in Form DesignerÔÇŽ ausw├Ąhlen

  3. 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.

  4. 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.

  5. 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.

  6. In der folgenden Abbildung finden Sie kurze Erl├Ąuterungen zu den gel├Ąufigen Eigenschaften von Formularelementen.

  7. 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.