Subworkflows mit Schaltflächen anlegen

In dieser Dokumentation erfahren Sie anhand eines Beispiels, wie Sie einen eigenen Subworkflow anlegen, mit Funktionen, ausstatten, den Subworkflow in einen Workflow einbetten und wie Sie Schaltflächen in einer Bedienoberfläche anlegen. Dieser Vorgang kann ähnlich für die anderen Parameter, die in der Workflowlibrary beschrieben werden, angewandt werden.

Diese Dokumentation beschreibt die Anlage und die Parameter / Werte jedes Knotens. Anschließend folgt eine Beschreibung der Funktionsweise jedes Knotens, damit Sie verstehen, welche Aufgaben der jeweilige Knoten erfüllt und wie er im abgebildeten Subworkflow funktioniert.

Ziel: Konfigurierter Subworkflow mit Schaltflächen

---

Nachdem Sie die in dieser Dokumentation beschriebenen Schritte durchgeführt haben, sieht Ihr konfigurierter Subworkflow mit Schaltflächen wie folgt aus:

Um den Subworkflow umzusetzen, legen Sie einen Workflow an, der aus den folgenden Knoten besteht:

• Initialisiere Subworkflow
• ui
• Finalisiere Subworkflow
• Skript

Den Subworkflow einstellen

---

1. Erstellen Sie einen Workflow.
2. Wechseln Sie von der Registerkarte Allgemein auf Parameter/Darstellung.
3. Befüllen Sie die folgenden Parameter.

Parameter befüllen

Im Workflow befüllen Sie folgende Parameter:

• Workflow Icon
• Workflow Beschreibung
• Toolbox Gruppe
• Oberfläche Workflowkonfiguration

1. Klicken Sie bei Workflow Icon auf .
2. Erstellen Sie ein Icon. Der Code für das hier im Beispiel verwendete Icon lautet:

   agorum:agorum-logo;color=#0069b5|agorum:circle;color=#00b2cc;slot=bottom-right;scale=0.7|ionicon:alert;color=white;slot=bottom-right;scale=0.7 

3. Geben Sie bei Workflow Beschreibung eine Beschreibung an.
4. Geben Sie bei Toolbox Gruppe den Gruppennamen für die Gruppierung in der Toolbox an. In diesem Beispiel wird der Gruppenname agorum.tests verwendet.
5. Fügen Sie bei Oberfläche Workflowkonfiguration ein Skript mit folgendem Inhalt hinzu.

   // Configuration widget for this workflow
   let builder = require('/agorum/roi/customers/acworkfloweditor/js/utils/configuration-builder')();
   let basicParameters = require('/agorum/roi/customers/agorum.workflow.library.basic/js/basic-parameters');
   
   // define the configuration for the node
   let config = () => [
    
     // buttons
     basicParameters('buttons', {
       name: 'buttons'
     })
   ];
   
   // export functions
   module.exports = {
     widget: () => builder.build(config()),
     config: config
   };

6. Wechseln Sie in die Registerkarte Allgemein und vergeben Sie im Feld Anzeigename einen passenden Namen. Unter diesem Namen finden Sie später Ihren Subworfklow.

Knoten „Initialisiere Subworkflow“ anlegen

---

Im 2. Schritt legen Sie den Knoten Initialisiere Subworkflow an.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Variablenname zum Speichern der Parameter

1. Vergeben Sie im Parameter Variablenname zum Speichern der Parameter folgende Variable:

   agorum_test_subworkflow

Funktionsweise des Knotens

Dieser Knoten initialisiert den Subworkflow. Ein Variablenname wird verwendet, damit dieser Workflow eindeutig zuzuordnen ist.

Knoten „ui“ anlegen

---

Im 3. Schritt legen Sie den Knoten ui an.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Oberflächenskript
• Outlet Variable

1. Fügen Sie ein Oberflächenskript hinzu und ersetzen Sie den vorhandenen Code mit folgendem JavaScript:

   let aguila = require('common/aguila');
   let buttonHelper = require('/agorum/roi/customers/agorum.workflow.library.basic/js/aguila/buttons-helper');
   
   // Create form for workflow step.
   // This sample contains some common elements, feel free to use or remove them
   let form = aguila.create({
     type: 'agorum.composite.form.basic',
     labelPosition: 'top',
     elements: [
       // some description
       {
         type: 'agorum.textDisplay',
         
         // use _acmsg:key=Text for translation
         // you have to activate translation in workflow settings
         text: '_acmsg:title=This is a short description of this mask'
       },
   
       // a text input field
       {
         type: 'agorum.composite.form.element.text',
         name: 'sampleText',
         label: '_acmsg:sampleText.label=Text',
         validation: [
           {
             // this value is required
             required: true
           }
         ]
       },
       
       // buttons
       {
         type: 'agorum.spacer',
         height: 24
       },
       {
         type: 'agorum.hbox',
         name: 'buttonBox',
         items: []
       }
     ]
   });
   
   let buttonBox = form.down('buttonBox');
   let currentButtonParams;
   
   let drawButtons = buttons => {
     let items = buttonHelper.build(buttons, button => {
       if (button.validate) {
         if (form.validate()) {
           form.fire('leave', button.outlet);
         }
       }
       else {
         form.fire('leave', button.outlet);
       }
     });
    
     buttonBox.items = items;
   };
   
   // sample for accessing variables
   // all token variables are available in the form value
   form.on('valueChanged',value => {
     //parse buttons
   
     // replace agorum_test_subworkflow with your parameterName of your initialize node
     let buttonParams = value.sys_acw_internal.agorum_test_subworkflow.parameters.buttons || [];
    
     // if ui is reused, check for changes in button parameters, if the buttons have changed
     // redraw them
     if (JSON.stringify(currentButtonParams) !== JSON.stringify(buttonParams)) {
       currentButtonParams = buttonParams;
       
       if (!buttonParams || !buttonParams[0]) {
         throw new Error('acmsg:error.button.noButtons=no buttons defined in parameters');
       }
       
       drawButtons(buttonParams);
     }
   });
   
   form;

2. Vergeben Sie im Parameter Outlet Variable die Variable:

   agorum_test_subworkflow_outlet
   

Funktionsweise des Knotens

Dieser Knoten erstellt eine UI, in der der Bearbeiter später die konfigurierten Schaltflächen sehen und anklicken kann.

Knoten „Finalisiere Subworkflow“ anlegen

---

Im 4. Schritt legen Sie den Knoten Finalisiere Subworkflow an.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Aufzuräumende Variable

1. Geben Sie im Parameter Aufzuräumende Variable den Variablennamen an, den Sie im Knoten Initialisiere Subworkflow verwendet haben. In diesem Beispiel lautet der Variablenamen: 

   agorum_test_subworkflow

Funktionsweise des Knotens

Dieser Knoten löst die im Knoten Initialisiere Subworkflow eingefügte Variable wieder auf, es handelt sich allerdings hierbei nur um eine Variable, die in der Substruktur vorhanden ist. Deshalb legen Sie im nächsten Schritt einen Skript-Knoten, der die Variable endgültig aufräumt.

Knoten „Skript“ anlegen

---

Im 5. Schritt legen Sie den Knoten Skript an.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Enter script

1. Erstellen Sie über folgendes Enter script:

   /* global sc, sca, token, instance, outlets, inlet, parameters */
   
   // leave the outlet that has been set via the dynamic configured button in the ui
   let outlet = token.variables.agorum_test_subworkflow_outlet;
   
   // clean up
   delete token.variables.agorum_test_subworkflow_outlet;
   
   token.leave(outlet);

2. Deaktivieren Sie den Endpoint Default (Outlet) des Knotens.
3. Setzen Sie in der Registerkarte Allgemein des Knotens den Haken bei Diesen Knoten als Endknoten definieren.

Funktionsweise des Knotens

Dieser Knoten verlässt das Outlet, das über die dynamisch konfigurierte Schaltfläche im Knoten ui über den Parameter Outlet Variable eingestellt wurde und räumt die Outlet Variable agorum_test_subworkflow_outlet gleichzeitig auf. Dadurch wird der Hauptworkflow nicht durch Token-Variablen des Subworkflows beeinflusst.

Subworkflow deployen

---

Damit der Subworkflow in anderen Workflows verwendet werden kann, deployen Sie den Subworkflow.

1. Klicken Sie in der oberen Leiste auf Workflow deployen.
   
   Ergebnis: Der Subworkflow steht jetzt als Knoten SubworkflowBeispiel zur Verfügung.

Knoten „SubworkflowBeispiel“ in einem Workflow verwenden

---

1. Erstellen Sie einen Workflow.
2. Klicken Sie auf die Toolbox.
3. Geben Sie den Namen Ihres Subworkflows in der Suche ein. Haben Sie im Subworkflow einen Anzeigenamen vergeben, können Sie alternativ auch nach diesem suchen.
4. Wählen Sie den Knoten und ziehen Sie ihn auf die Oberfläche.
5. Fügen Sie die Endpoints ok und cancel hinzu.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Buttons

1. Legen Sie die zwei Schaltflächen ok und cancel an. Benennen Sie die Schaltflächen exakt so, wie Sie die beiden Endpoints unter Knoten SubworkflowBeispiel in einem Workflow verwenden genannt haben.
2. Fügen Sie unter den Endpoints zwei Outlets mit den Namen ok und cancel hinzu. Benennen Sie die Outlets exakt so, wie Sie die beiden Endpoints unter Knoten SubworkflowBeispiel in einem Workflow verwenden genannt haben.

Knoten „Log“ im Workflow anlegen

---

Damit Sie sehen, welche Schaltflächen ein Benutzer in der Bedienoberfläche angeklickt hat, legen Sie im Workflow nachfolgend zweimal den Knoten Log an.

Parameter befüllen

In den beiden Knoten befüllen Sie folgende Parameter:

• Nachricht

1. Vergeben Sie im Knoten log1 im Parameter Nachricht folgenden Text:

   Abbrechen angeklickt
   

2. Vergeben Sie im Knoten log2 im Parameter Nachricht folgenden Text:

   Ok angeklickt

Funktionsweise der Knoten

Diese Knoten loggen, welchen Schaltfläche ein Benutzer in der Bedienoberfläche angeklickt hat und damit, durch welches Outlet der Knoten verlassen wurde.

Ergebnis

---

Wenn Sie den Workflow mit dem Knoten SubworkflowBeispiel ausführen, sollte die Oberfläche folgendermaßen aussehen:

Die Schaltflächen sollten jetzt anklickbar sein und ihre entsprechende Funktion ausführen. Welche Schaltflächen angeklickt wurden, sehen Sie dank der beiden log-Knoten zudem im Protokoll (Log).