👨🏾‍🎨 🔽 👩🏿‍🤝‍👩🏽 Using React Forms with Tasklist Camunda 🙎🏿 🎅 👵🏻

Camunda Tasklist is great when you have custom tasks and don't want to use or create your own solution. Built-in forms provide a lot of flexibility when designing user interfaces. In recent years, React has become one of the most popular libraries for building user interfaces. In this blog post, I'll show you how to use React forms along with Tasklist.

Let's take a look at our process first: an invoice has been received and needs to be reviewed. We'll focus on the initial invoice form and custom task - implementing automated tasks using the Camunda Workflow Engine is pretty straight forward.

Camunda Developer Relations: Who, What, Where, Why and How?

We will use inline forms for our tasks. After adding React as a custom script to the Tasklist, we can start building the interface. I won't be using JSX for this example, so you can quickly deploy it without transpiling. Let's start with a simple field to display values:

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

This stateless component uses Bootstrap classes for styling. If we need to display multiple values, such as the amount and the invoice vendor, we can create it multiple times. For example, you can create a form as appropriate:

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

Below our input fields, I've added a managed component to handle user input. Since we have to decide whether to approve this bill or not, a simple checkbox is sufficient. These few lines of code already generate most of the final approval form. I just added a title and done the job.

As you can see, using a framework like React in Tasklist is not only possible but also quite simple. If you want to know more, you can see the source code that is available on Github.

Using React Forms with Tasklist Camunda

More articles: