Workflow "Attachments über ein UI hinzufügen und entfernen"

Mit dem folgenden Workflow können Benutzer über eine Bedienoberfläche Attachments hinzufügen und bearbeiten.

Dieser Workflow ist ein Beispiel für die Anwendung von agorum.composite.form.element.objects.

Der Workflow besteht aus folgenden Knoten (in dieser Reihenfolge):

• Aktuellen Benutzer zuordnen
• 2x 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 „Aktuellen Benutzer zuordnen“ anlegen

---

Im 1. Schritt legen Sie den Knoten Aktuellen Benutzer zuordnen an.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Aktuellen Benutzer als Bearbeiter hinzufügen  

1. Aktivieren Sie den Parameter Zuordnung zu Bearbeitern aktivieren und setzen Sie folgende Attachmentberechtigung:

   Vollzugriff

Funktionsweise des Knotens

Dieser Knoten setzt den aktuellen Benutzer als Bearbeiter für die kommenden Workflowschritte ein.

Knoten „ui“ anlegen

---

Im 2. Schritt legen Sie den Knoten ui an.

Parameter befüllen

Im Knoten befüllen Sie folgende Parameter:

• Anzeigename 
• Oberflächenskript

1. Geben Sie im Parameter Anzeigename einen Namen für den Workflow an. 
2. Fügen Sie ein Oberflächenskript hinzu. Den Code belassen Sie so, wie er ist.

Funktionsweise des Knotens

Dieser Knoten erstellt eine UI, in der die Bearbeiter eine Bedienoberfläche anpassen können.

Der Anhang, der nach Ausführen des Workflows in der UI angefügt ist, ist nicht veränderbar. Der Ursprungsanhang kann aktuell weder gelöscht noch kann ein weiterer Anhang hinzugefügt werden. Nachfolgend fügen Sie das Element objects ein, das eine Auswahl des Anhangs ermöglicht.

Element „objects“ in das Oberflächenskript einfügen

---

Im 3. Schritt bauen Sie das Element objects in das Oberflächenskript aus Schritt 2 ein, damit die Anhänge bearbeitet und verändert werden können.

1. Wählen Sie den Knoten ui.
2. Öffnen Sie das Oberflächenskript.
3. Legen Sie sich eine Funktion mit dem Element objects an.

   Hinweis: Wie die Funktion aussieht, sehen Sie im nachfolgenden Beispiel.

4. Fügen Sie die angelegte Funktion an gewünschter Stelle in das Oberflächenskript (etwa über den Schaltflächen) ein.
5. Passen Sie die Funktion an, sodass das JavaScript funktionsfähig ist.

Beispiel

Der einzufügende Code sieht etwa folgendermaßen aus:

...  
        // date input field on right side
        {
          type: 'agorum.composite.form.element.date',
          name: 'sampleDate',
          label: '_acmsg:sampleDate.label=Date',
          flexible: true
        }
      ]
    },

 //attachments
    {
      type: 'agorum.spacer',
      height: 24
    },
    {
      type: 'agorum.vbox',
      title: '_acmsg:myAttachments=Anhänge',
      lite: true,
      collapsible: true,
      items: [ 
        {
          type: 'agorum.composite.form.element.objects',
          name: 'myAttachments',
          height: 200,
          listConfig: 'Standard',

          searchConfig: {
            additionalBaseQuery: 'classname:fileobject',
            filterCollapsed: false,
            settingName: 'ac_all',
            detailsWidget:  {
              type: 'agorum.composite.details',
              width: 600
            },
          },
          folderConfig: {
            selectors: [
              '[isFolder=false]',
            ],
            startFolder: 'home:MyFiles',
            baseFolder: 'home:',
          }
        }
      ]
    },
 
    // 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'
        }, 
...

In dieser Funktion wird zusätzlich zum Element objects eine vbox und ein spacer eingebaut.

• Die vbox stellt das einzufügende Attachment in einer eigenen Box dar.
• Der spacer fügt eine Leerzeile zwischen der Box und den restlichen Funktionen ein.

Knoten „set“ anlegen

---

Im 4. Schritt legen Sie den Knoten set an.

Parameter befüllen

Im Knoten befüllen Sie folgende Parameter:

• Schlüssel
• Wert

1. Befüllen Sie den Parameter Schlüssel mit folgendem Wert:

   myAttachments

   Hinweis: Der hier angegebenen Variablenname muss mit name: 'myAttachments' aus dem Oberflächenskript übereinstimmen (siehe Beispiel).

2. Vergeben Sie im Parameter Wert Folgendes als Expression:

   token.variables.sys_acw_attachments
   

3. Trennen Sie zudem die Verbindung zwischen den Knoten aktuellen Benutzer zuordnen und dem Knoten ui auf.
4. Verbinden Sie den Knoten aktuellen Benutzer zuordnen mit dem Knoten set und den Knoten set mit dem Knoten ui.

Funktionsweise des Knotens

Dieser Knoten ermöglicht es, eine Variable in den Workflow einzufügen, die mit anderen Variablen korrespondieren kann.

Damit die Variable mit einer anderen Variable korrespondieren kann und der Ursprungsanhang in der Box angezeigt wird, muss eine weitere Variable und somit ein weiterer Knoten set angelegt werden. 

Knoten „set“ anlegen

---

Im 5. Schritt legen Sie erneut den Knoten set an.

Parameter befüllen

Im Knoten befüllen Sie folgenden Parameter:

• Schlüssel
• Wert

1. Befüllen Sie den Parameter Schlüssel mit folgendem Wert:

   sys_acw_attachments

2. Vergeben Sie im Parameter Wert Folgendes als Expression:

   token.variables.myAttachments

3. Fügen Sie beim Knoten ui einen zweiten Ausgang (Outlet) hinzu, etwa mit dem Namen takeAttachments.

   Hinweis: Sie können auch einen anderen Namen verwenden, dieser muss jedoch bei den folgenden Schritten ebenfalls verwendet werden.

4. Verbinden Sie den Knoten set mit dem Knoten ui, sodass ein Pfad aus dem Knoten herausführt und einer hereinführt.

Funktionsweise des Knotens

Dieser Knoten ermöglicht es eine weitere Variable anzulegen, die mit der ersten Variable korrespondieren kann.

Die Anhänge, die in myAttachments liegen, kommen durch die Verbindung der Knoten zurück in die sys_acw_attachments. 

JavaScript anpassen: Schaltfläche mit Ausgang anlegen

---

Im 6. Schritt passen Sie das JavaScript aus Schritt 3 so an, dass eine Schaltfläche in der Oberfläche erscheint. Damit können die angepassten Attachments auch gespeichert werden. Zudem legen Sie einen Ausgang für die Schaltfläche an.

Schaltfläche anlegen

1. Wählen Sie den Knoten ui.
2. Öffnen Sie das Oberflächenskript.
3. Legen Sie sich eine Funktion für eine Schaltfläche an.

   Hinweis: Sie können eine Schaltfläche aus dem Oberflächenskript kopieren und entsprechend ändern (siehe Beispiel).

4. Fügen Sie die angelegte Funktion an gewünschter Stelle in das Oberflächenskript ein, etwa unterhalb der Attachments-Box.
5. Passen Sie die Funktion an, sodass das JavaScript funktionsfähig ist.

Beispiel

...
            ],
            startFolder: 'home:MyFiles',
            baseFolder: 'home:',
          }
        },
        {
          type: 'agorum.composite.form.element.button',
          name: 'takeAttachments',
          text: '_acmsg:takeAttachments=Anhänge übernehmen',
          icon: 'aguila-icon redo'
        },
      ]
    },
    
    // buttons
    {
      type: 'agorum.spacer',
      height: 24
    }, 
...

Ausgang der Schaltfläche festlegen

Im Oberflächenskript legen Sie einen Ausgang fest, den das System nimmt, wenn die Schaltfläche gedrückt wird.

1. Wählen Sie den Knoten ui.
2. Öffnen Sie das Oberflächenskript (ui - aguila).
3. Legen Sie einen weiteren case an.

   Hinweis: Sie können die Funktion aus dem Oberflächenskript kopieren und entsprechend ändern (siehe Beispiel).

4. Fügen Sie die angelegte Funktion unter dem case cancel in das Oberflächenskript ein (siehe Beispiel).
5. Passen Sie die Funktion an, sodass das JavaScript funktionsfähig ist.
6. Speichern Sie den Workflow.

Beispiel

...
  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;
    case 'takeAttachments':
      form.fire('leave', 'takeAttachments');
      break;
  }  
}); 
...

Ergebnis

Die gewählten Anhänge können jetzt in der Oberfläche durch die Schaltfläche Anhänge übernehmen gespeichert werden. Allerdings werden die Anhänge bisher nicht in der Detailansicht angezeigt, damit der Benutzer des Workflows nachvollziehen kann, welche Anhänge er wählt und speichert.

JavaScript anpassen: Objekte selektieren

---

Damit die Anhänge in der Detailansicht gezeigt werden, fügen Sie eine Selektierung in das JavaScript aus Schritt 3 ein.

1. Wählen Sie den Knoten ui.
2. Öffnen Sie das Oberflächenskript.
3. Fügen Sie properties:['id'], bei let form = aguila.create ein (siehe Beispiel 1).
4. Kopieren Sie sich die unter Beispiel 2 angegebene Funktion oder legen selbst eine Funktion zum Selektieren der Objekte an.

   Hinweis: Für ein weiteres Beispiel zu Objekte selektieren siehe Objekte selektieren und im Detailfenster anzeigen.

5. Fügen Sie die angelegte Funktion etwa unterhalb der Schaltfläche ein.
6. Passen Sie die Funktion an, sodass das JavaScript funktionsfähig ist.
7. Speichern Sie den Workflow.

Beispiel 1

...
let form = aguila.create({
  type: 'agorum.composite.form.basic',
  labelPosition: 'top',
    properties: [
    'id'
  ],
  elements: [ 
...

Beispiel 2

...  
   {
          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'
        }
      ]
    }
  ]
});

let myAttachments = form.down('myAttachments');

// Die Funktion "suppress" bewirkt, dass der selectionChanged Event unserer Liste
// nicht den idChanged Event auf unserer Seite auf form-Ebene auslöst, sonst würde
// unser gerade selektierter Eintrag wieder deselektiert werden.
let suppressed;
let suppress = callback => {
  if (suppressed) return;
  suppressed = true;
  try {
    callback();
  }
  finally {
    suppressed = false;
  }
};

// Bei Selektierungen in unserer Liste soll das selektierte Objekt
// im Detailfenster des Workflows angezeigt werden.
myAttachments.on('selectionChanged', selection => {
  suppress(() => {
    form.id = selection && selection[0];
  });
});

// Reagieren auf Änderungen in der Liste der Anhänge:
// Deselektieren der Einträge in unserer eigenen Liste
form.on('idChanged', id => {
  suppress(() => {
    myAttachments.selection = [ id ];
  });
}); 


// Listen for changed values by user
/*
form.on('input', data => {
  console.log('User has changed value of the form:', data.name, data.value);
});
*/

// Listen for actions on the widget
form.on('action', action => {
  /* 
...

Ergebnis

Die Anhänge werden jetzt nach Betätigung der Schaltfläche im Detailfenster angezeigt.