Usando React Forms con Tasklist Camunda

La lista de tareas de Camunda es excelente cuando tiene tareas personalizadas y no desea usar o crear su propia solución. Los formularios integrados proporcionan mucha flexibilidad al diseñar interfaces de usuario. En los últimos años, React se ha convertido en una de las bibliotecas más populares para crear interfaces de usuario. En esta publicación de blog, le mostraré cómo usar los formularios de React junto con la Lista de tareas.

Primero echemos un vistazo a nuestro proceso: se recibió una factura y debe revisarse. Nos centraremos en el formulario de factura inicial y en la tarea personalizada: implementar tareas automatizadas con Camunda Workflow Engine es bastante sencillo.

Usaremos formularios en línea para nuestras tareas. Después de agregar React como un script personalizado a la lista de tareas, podemos comenzar a construir la interfaz. No usaré JSX para este ejemplo, por lo que puede implementarlo rápidamente sin transpilar. Comencemos con un campo simple para mostrar valores:

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

Este componente sin estado usa clases Bootstrap para diseñar. Si necesitamos mostrar varios valores, como el monto y el proveedor de la factura, podemos crearlo varias veces. Por ejemplo, puede crear un formulario según corresponda:

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

Debajo de nuestros campos de entrada, agregué un componente administrado para manejar la entrada del usuario. Dado que tenemos que decidir si aprobar o no este proyecto de ley, una simple casilla de verificación es suficiente. Estas pocas líneas de código ya generan la mayor parte del formulario de aprobación final. Acabo de agregar un título y hice el trabajo.

Como puede ver, usar un marco como React in Tasklist no solo es posible sino también bastante simple. Si quieres saber más, puedes ver el código fuente que está disponible en Github.