🧜 🤱🏿 🦆 Utiliser React Forms avec Tasklist Camunda 🐍 🙎🏼 🥊

La liste de tâches Camunda est idéale lorsque vous avez des tâches personnalisées et que vous ne souhaitez pas utiliser ou créer votre propre solution. Les formulaires intégrés offrent une grande flexibilité lors de la conception des interfaces utilisateur. Ces dernières années, React est devenue l'une des bibliothèques les plus populaires pour la création d'interfaces utilisateur. Dans cet article de blog, je vais vous montrer comment utiliser les formulaires React avec la liste des tâches.

Jetons d'abord un coup d'œil à notre processus: une facture a été reçue et doit être revue. Nous nous concentrerons sur le formulaire de facture initial et la tâche personnalisée - la mise en œuvre de tâches automatisées à l'aide du moteur de flux de travail Camunda est assez simple.

Relations avec les développeurs Camunda: qui, quoi, où, pourquoi et comment?

Nous utiliserons des formulaires en ligne pour nos tâches. Après avoir ajouté React en tant que script personnalisé à la liste des tâches, nous pouvons commencer à créer l'interface. Je n'utiliserai pas JSX pour cet exemple, vous pouvez donc le déployer rapidement sans transpiler. Commençons par un champ simple pour afficher les valeurs:

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

Ce composant sans état utilise des classes Bootstrap pour le style. Si nous devons afficher plusieurs valeurs, telles que le montant et le fournisseur de la facture, nous pouvons le créer plusieurs fois. Par exemple, vous pouvez créer un formulaire le cas échéant:

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
  })
)

Sous nos champs de saisie, j'ai ajouté un composant géré pour gérer les entrées utilisateur. Puisque nous devons décider d'approuver ou non ce projet de loi, une simple case à cocher suffit. Ces quelques lignes de code génèrent déjà l'essentiel du formulaire d'approbation final. Je viens d'ajouter un titre et j'ai fait le travail.

Comme vous pouvez le voir, utiliser un framework comme React dans Tasklist est non seulement possible mais aussi assez simple. Si vous souhaitez en savoir plus, vous pouvez voir le code source disponible sur Github.

Utiliser React Forms avec Tasklist Camunda

More articles: