13. Februar 2024Workflow DesignerRIBworkflowiTwo 4.0iTwo

Grafische Oberflächen in iTWO Workflows

Anführungszeichen IconAnführungszeichen Icon
Thomas Hauling
itow workflow

Sinn und Zweck

Mit „Extended User Action“ können wir grafische Oberflächen für unseren WF zu 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.

Workflow Action Details

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

Die Extended User Action akzeptiert folgende InputParameter:

HTML

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

Script

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:

$scope.Context.currentLocalDate = new Date().toLocaleDateString('de-DE');

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

$scope.approveFormInput = function () {

$scope.Context.advanceWorkflow = true;

$scope.onOk();

};

$scope.cancelFormInput = function () {

$scope.Context.advanceWorkflow = false;

$scope.onOk();

};

Context

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

IsPopUp

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

Title

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

Subtitle

siehe Title

DialogConfig

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

und folgende OutputParameter :

Context

Wie in anderen Actions kann hier eine Outputvariable initialisiert werden.

zurück zur Übersicht