Webformular für Urlaubsantrag¶

Erstellung eines Webformulars aus dem Activity Repository¶

Für das Tutorial Urlaubsantragsprozess genügen einige wenige Standardaktivitäten aus dem Activity Repository, die wir bereits im Process Template Editor eingebunden haben, wie z.B. User Form des Arbeitsschritts „Urlaubsantrag ausfüllen" oder XOR Predicate für die XOR-Verzweigung.

Wenn Sie aber anstelle des automatisch generierten Userformulars ein ansprechenderes Webformular möchten, können Sie dies über die Aktivität Webform gestalten.

Dazu müssen Sie zuerst das Userform aus dem Knoten „Urlaubsantrag ausfüllen" über Rechtsklickmenü -> Anwendungsbaustein entfernen löschen.

Oder Sie können das Userform per Drag & Drop gleich durch ein neues Webform ersetzen.

Nach dem Einbinden des Webforms öffnet sich gleich das bekannte Fenster zur Versorgung der Aktivität mit Input und Output Parametern. Durch wiederholtes Klicken von Next wird das Webform automatisch mit benötigten Parametern verbunden.

WebForm Designer¶

Nun können Sie das Formular per Rechtsklick auf den Knoten gestalten. ->Formular in Designer öffnen...

Im Designer Fenster befinden sich links die Komponenten und rechts die Eigenschaften, wie Datenquellen oder Design, die auf diese Komponenten angewendet werden können. In unserem Beispielsprozess müssen in diesem Schritt die drei Parameter (Urlaubsbeginn, Urlaubsende und Antragssteller) vom Benutzer eingegeben werden. Für Urlaubsbeginn und -ende brauchen Sie jeweils ein Date-Komponente als Eingabefeld. Das Einfügen von Komponenten erfolgt hier per Drag&Drop. Ziehen Sie zwei Datenfelder auf das Formular und binden Sie die Kalender-Funktion in diesen Feldern ein. Dazu selektieren Sie das Datumsfeld und setzen Sie calendar auf true im Reiter Properties.

Alternativ können Sie die Eingabefelder von rechts im Reiter Process Data mit Hilfe von Input- und Outputparametern per Drag&Drop erstellen. Für den Antragssteller beispielsweise markieren Sie zuerst die erste Zeile „Antragsteller" unter Output Parameters (blaue Markierung) und legen sie auf das Formular. So wird auch das Label mit dem Eingabefeld erstellt. Ansonsten müssen Sie das Label explizit hinzufügen.

Nun setzen Sie wieder per Drag&Drop die Labels für die Komponenten. Die Labels benennen Sie entsprechend den Output-Parametern unter dem Reiter Properties (rechts oben). -> Bei text den Text für Label eingeben und -> Edit klicken. Das geöffnete Fenster Translations mit -> Ok bestätigen (siehe Screenshot).

Groupbox-Komponente¶

Sie können die einzelnen Komponenten mit einem GroupBox „Urlaubsantrag" zu einem Formular gruppieren. Nach der Erstellung der Eingabefelder müssen Sie diese mit Parametern verbinden (wenn diese nicht per Drag&Drop von rechts also über Process Data erstellt wurden). Dazu verknüpfen Sie die Input- und Output-Parameter wieder per Drag&Drop mit den entsprechenden Eingabefeldern.

Es ist sehr empfehlenswert, vor dem Einsatz des Formulars die richtige Zuordnung der Parameter zu überprüfen. Dafür nach Selektieren des einzelnen Feldes unter Properties -> DATA nachschauen, ob Input und Output Parameter mit dem entsprechenden Feld übereinstimmen.

Event-Handler¶

Als nächstes können Sie Ereignisse (events) in den Eingabefeldern auslösen und die Benutzereingabe dadurch steuern. Beispielsweise können Sie durch Events überprüfen, ob der eingegebene Urlaubsbeginn zeitlich vor dem aktuellen Datum oder nach dem Urlaubsende liegt. Dafür müssen Sie kleine Javascript-Funktionen in Events hinterlegen.

Um Events einzufügen, gehen Sie auf das Eingabefeld „Urlaubsbeginn" und klicken Sie Edit Actions (rechts Mitte). Im geöffneten Fenster Script Event Actions fügen Sie ein Event ein. -> Add event action.

Die Überprüfung, ob der Urlaubsbeginn vor dem morgigen Datum liegt, soll bei jeder Änderung des ersten Feldes stattfinden. Daher wählen sie als Eventstyp onchange und lassen Actiontype auf Script.

Nun geben Sie den Namen für die Javascript Funktion mit Klammern und Bindestrich wie z.B. checkBegin(); unter Value ein. Schließen Sie das Fenster mit einem Klick auf Close.

Die Funktion checkBegin() muss jetzt im Script Editor implementiert werden. Den Script Editor öffnen Sie durch Klick auf Edit (links oben im Menü des Designer Editors) und ->Scripts... Im Script Editor geben Sie den Code unter JavaScript wie im Screenshot ein und speichern mit Klick auf OK.

Date1 ist der interne Name für die Textbox Urlaubsbeginn und mit der Funktion af_getValue() wird der eingetragene Wert ausgelesen.

function checkBegin()
{
  if ((af_getValue("Date1") != null) & (af_getValue("Date1") < new Date()))
    {
      alert("Urlaubsbeginn darf frühestens Morgen sein!");
    }
}

Zur Überprüfung des Urlaubsendes auf Gültigkeit lösen Sie wieder ein onchange Event im nächsten Datumseingabefeld aus und geben den Namen für die JavaScript Funktion „checkEnd();" ein. Danach schließen Sie das Fenster.

Tippen Sie den Code im JavaScript Editor für die Funktion „checkEnd();" wie im folgenden Screenshot ein. Achten Sie dabei besonders auf die Klammern und Bindestriche. Date2 verweist dabei auf das Urlaubsende.

function checkEnd()
{
  if ((af_getValue("Date2") != null) & (af_getValue("Date2") < af_getValue("Date1")))
    {
      alert("Enddatum liegt vor Anfangsdatum!");
    }
}

Test des Webforms im Test-Client¶

Nach der Speicherung der Änderungen können Sie das Webform im Test-Client auf Funktion testen. Selektieren Sie das Template und klicken auf Run Template im Process Template Editor. Der Test-Client öffnet sich mit dem neu erstellten Webform. Das Formular enthält schon vorimplementierte Buttons zum Senden, Suspendieren und Zurücksetzen (Fertig, Speichern, Zurücksetzen).

Wählen Sie ein Datum aus dem Kalender. Wird als Datum heute oder ein früheres Datum gewählt, erscheint die implementierte Fehlermeldung, die den Anwender auf eine falsche Eingabe hinweist.

Genauso kommt bei Urlaubsende eine Fehlermeldung, wenn das Enddatum vor dem Anfangsdatum liegt.

Geben Sie den Namen für den Antragssteller ein und senden Sie das Formular durch den Fertig -Button ab.

Im nächsten Schritt Urlaubsantrag prüfen finden Sie die durch Webform gesandten Daten wieder.

Falls Sie immer noch nicht zufrieden mit Ihrem Urlaubsantrag sind, kontaktieren Sie uns und wir zeigen Ihnen weitere Funktionen zur Optimierung des Prozesses.

Die folgenden Optimierungen werden Schritt für Schritt erläutert:

Der Name des Antragsstellers sollte zum Namen der Arbeitslistenelemente hinzugefügt werden, um eine bessere Übersicht zwischen verschiedenen Urlaubsanträgen zu verschaffen .
Es ist nicht erwünscht, daß man eigenen Namen in ein Formular Urlaubsantrag einträgt. Der Name des Antragsstellers sollte automatisch gespeichert und im Formular des Vorgesetzten angezeigt werden.
Das Urlaubskonto sollte automatisch mithilfe einer Datenbankkomponente aktualisiert werden.
Das Personal sollte nur die automatische Aktualisierung des Urlaubskontos überprüfen.