Workflow "UI in Abhängigkeit von Parametern anpassen"

Mit dem folgenden Workflow zeigen Sie Texte im UI abhängig von zuvor definierten Parametern (Variablen und Werten) an.

Der Workflow besteht aus folgenden Knoten:

• set
• ui

Diese Dokumentation beschreibt die Anlage und 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 Workflow funktioniert.

Knoten „set“ erstellen

---

Im 1. Schritt erstellen Sie den Knoten set.

Parameter befüllen

Im Knoten befüllen Sie folgende Parameter:

• Schlüssel
• Wert

1. Vergeben Sie im Parameter Schlüssel etwa folgende Variable:

   myWorkspace.customerType

   Hinweis: Das System legt die Variablen automatisch an, sofern sie nicht vorhanden sind.

2. Vergeben Sie im Parameter Wert etwa folgenden Text:

   Premiumkunde

   Hinweis: Bei dem hier gesetzten Wert handelt es sich um einen festen Wert. Dieser ändert sich nicht dynamisch. Beispiele für das dynamische Setzen von Werten siehe Dokumentation des Knotens. 

Funktionsweise des Knotens

• Setzt für die Variable customerType den Wert Premiumkunde.

Knoten „UI“ erstellen

---

Im 2. Schritt erstellen Sie den Knoten UI.

Parameter befüllen

Im Knoten befüllen Sie folgende Parameter:

• Oberflächenscript

1. Klicken Sie im Parameter Oberflächenscript auf das  .
2. Befüllen Sie das Skript etwa wie folgt:

   let aguila = require('common/aguila');
   
   // 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: [  
       // buttons
       {
         type: 'agorum.spacer',
         height: 24
       },
       {
         type: 'agorum.hbox',
         items: [
           // buttons on left side
           {
             type: 'agorum.composite.form.element.button',
             name: 'cancel',
             text: '_acmsg:cancel=Abort',
             icon: 'aguila-icon cancel'
           },
           
           {
             type: 'agorum.spacer',
             flexible: true
           },
           
           // buttons on right side
           {
             type: 'agorum.composite.form.element.button',
             name: 'ok',
             text: '_acmsg:ok=Ok',
             icon: 'aguila-icon check'
           }
         ]
       }
     ]
   });
   
   // Listen for actions on the widget
   form.on('action', action => {
     
     // find out, which button has been pressed
     // and leave the ui node through the associated outlet
     switch (action.name) {
       case 'ok':
         // the form has to be valid, before the ui can be left through the "ok"-outlet
         if (form.validate()) {
           form.fire('leave', 'ok');
         }
         break;
       case 'cancel':
         // when cancel is pressed, leavel to "cancel"-outlet without validation
         form.fire('leave', 'cancel');
         break;
     }  
   });
   
   // sample for accessing variables
   // all token variables are available in the form value
   
   form.on('valueChanged', value => {
     
     let title = null;
     
     switch(form.value.myWorkspace.customerType) {
       case "Standardkunde":
         title = "Lieber Kunde, <...>";
         break;
       case "Premiumkunde":
         title = "Lieber Premium-Kunde, <...>";
         break;
       case "Partner":
         title = "Lieber Partner, <...>";
         break;
       default:
         title = "Sehr geehrte Damen und Herren, <...>";     
     }
     
     // customize the title of the form
     form.set('title', title);
   });
   
   form;

Funktionsweise des Knotens

• Der Event-Handler form.on('valueChanged', ...) ruft über form.value das aktuelle Token ab.
• Alle gesetzten Variablen stehen dadurch zur Verfügung, in diesem Falle auch die Variable myWorkspace.customerType.
• Je nach verwendetem Fall (case) in der Anweisung switch verändert sich der Titel / Text im UI, in diesem Falle wird der Titel Lieber Premium-Kunde, <...> angezeigt, da Sie die Variable myWorkspace.customerType zuvor im set-Knoten mit dem Wert Premiumkunde befüllt haben.

Alternativ und vor allem bei komplexen Workflows mit mehreren Variablen verwenden Sie anstelle des set-Knotens idealerweise einen Skript-Knoten mit etwa folgendem Skript, bezogen auf das obige Beispiel:

/* global sc, sca, token, instance, outlets, inlet, parameters */

token.variables.myWorkspace = {
  customerType: 'Premiumkunde'
};

// Send the token through the default outlet
token.leave('');