Grafische Oberflächen in iTWO Workflows

Grafische Oberflächen für unseren WF können wir mit „Extended User Action“ erstellen - etwa Formulare, in die der User Daten eingeben und überprüfen kann oder allgemein Dialogfenster.

Entsprechende Elemente werden mittels AngularJS (AngularJS: Developer Guide: Developer Guide) angelegt. Hierzu stehen Felder für HTML (inklusiv AngularJS Directives wie ng-model, ng-click u.a.) und Javascript bereit. Statt ‚plain vanilla‘ JS können wir zwecks Interaktion mit dem HTML View auch AngularJS Scope verwenden und so z.B. direkt auf das Context-Objekt zugreifen, Es können Werte ausgelesen und geschrieben werden und neue Properties angelegt werden. iTwo stellt zudem zwei Standard-Funktionen bereit, um HTML Dialoge zu beenden: onOK() und onCancel(). Beide Funktionen senden das Formular und die Daten an das Context-Objekt. Mit onOK() schließt man den Dialog und der Workflow geht weiter, mit onCancel() bleibt das Dialogfenster aktiv. Im folgenden Abschnitt schauen wir uns die Parameter genauer an.

Finden wir in der Doku unter: User Task → Basics.Workflow → Extended User Action

Hier fügen wir HTML / CSS Code ein, der im aktiven WF als Fenster innerhalb der iTWO Umgebung dargestellt wird.

Hier definieren wir mittels JS (ECMAScript 2009 (ES5)!) etwaige Logik des HTML Teils. Hierzu können wir AngularJS Scope verwenden. (AngularJS: Developer Guide: Scopes). Wir müssen bzw. können keinen Controller definieren – im Script Feld definieren wir direkt die Eigenschaften des Scope Objekts. Auch das globale Context Objekt binden wir über Scope ein, etwa:

Typischerweise brauchen wir Funktionen, die per Buttonklick ausgelöst werden und z. B. den weiteren Workflowverlauf bestimmen:

Hier definieren wir Daten, auf die Extended User Action zugreifen darf, in der Regel das gesamte Context Objekt – also {{Context}}.

definiert, ob das Fenster als Popup dargestellt wird. Wir setzen das in der Regel auf true.

Hier kann ein Fenstertitel angegeben werden, der in der oberen, blau unterlegten Zeile erscheint (ersetzt eine etwaige h1 Headline im HTML Feld).

siehe Title

hier kann die Größe des Fensters festgelegt werden, etwa: {"width": "1000px", "height": "1000px"}

und folgende Output Parameter :

Wie in anderen Actions kann hier eine Outputvariable initialisiert werden.