Verwenden von Reaktionsformularen mit Tasklist Camunda

Camunda Tasklist eignet sich hervorragend, wenn Sie benutzerdefinierte Aufgaben haben und keine eigene Lösung verwenden oder erstellen möchten. Integrierte Formulare bieten viel Flexibilität beim Entwerfen von Benutzeroberflächen. In den letzten Jahren hat sich React zu einer der beliebtesten Bibliotheken zum Erstellen von Benutzeroberflächen entwickelt. In diesem Blog-Beitrag zeige ich Ihnen, wie Sie React-Formulare zusammen mit Tasklist verwenden.

Schauen wir uns zuerst unseren Prozess an: Eine Rechnung ist eingegangen und muss überprüft werden. Wir konzentrieren uns auf das erste Rechnungsformular und die benutzerdefinierte Aufgabe - die Implementierung automatisierter Aufgaben mit der Camunda Workflow Engine ist ziemlich einfach.

Wir werden Inline-Formulare für unsere Aufgaben verwenden. Nachdem Sie React als benutzerdefiniertes Skript zur Taskliste hinzugefügt haben, können Sie mit dem Erstellen der Schnittstelle beginnen. Ich werde JSX für dieses Beispiel nicht verwenden, sodass Sie es schnell bereitstellen können, ohne es zu transpilieren. Beginnen wir mit einem einfachen Feld zum Anzeigen von Werten:

class DisplayGroup extends React.Component {
  render() {
    return e('div', {className: 'form-group'}, [
      e('label', {className: 'control-label col-md-4', key: 'label'}, this.props.label),
      e('div', {className: 'col-md-6', key: 'container'},
        e('input', {
          className: 'form-control',
          value: this.props.value,
          readOnly: true
        }))
      ]);
  }
}

Diese zustandslose Komponente verwendet Bootstrap-Klassen für das Styling. Wenn mehrere Werte angezeigt werden müssen, z. B. der Betrag und der Rechnungsanbieter, können wir diese mehrmals erstellen. Sie können beispielsweise ein entsprechendes Formular erstellen:

e(DisplayGroup, {
  label: 'Amount: ',
  value: this.props.amount.value,
  key: 'Amount'
}),
e(DisplayGroup, {
  label: 'Creditor: ',
  value: this.props.creditor.value,
  key: 'Creditor'
}),
e(DisplayGroup, {
  label: 'Invoice Category: ',
  value: this.props.category.value,
  key: 'Category'
}),
e(DisplayGroup, {
  label: 'Invoice Number: ',
  value: this.props.invoiceID.value,
  key: 'InvoiceID'
}),
e('label', {className: 'control-label col-md-4', key: 'ApprovalLabel'}, 'I approve this Invoice'),
e('div', {className: 'col-md-6', key: 'ApprovalContainer'},
  e('input', {
    className: 'form-control',
    name: 'approved',
    type: 'checkbox',
    checked: this.state.value,
    className: 'form-control',
    onChange: this.handleInputChange
  })
)

Unter unseren Eingabefeldern habe ich eine verwaltete Komponente hinzugefügt, um Benutzereingaben zu verarbeiten. Da wir uns entscheiden müssen, ob wir diese Rechnung genehmigen wollen oder nicht, ist ein einfaches Kontrollkästchen ausreichend. Diese wenigen Codezeilen generieren bereits den größten Teil des endgültigen Genehmigungsformulars. Ich habe gerade einen Titel hinzugefügt und die Arbeit erledigt.

Wie Sie sehen, ist die Verwendung eines Frameworks wie React in Tasklist nicht nur möglich, sondern auch recht einfach. Wenn Sie mehr wissen möchten, können Sie den Quellcode sehen , der auf Github verfügbar ist.