Using React Forms with Tasklist

Camunda’s Tasklist is excellent when you have user tasks and don’t want to use or build a custom solution. Embedded Forms offer great flexibility when it comes to designing user interfaces. In recent years, React became one of the most popular libraries for building user interfaces. In this blog post, I will show you how to use React forms together with Tasklist.

Let’s take a look at our process first: an Invoice is received and has to be reviewed. We will focus on the Initial Invoice Form and the User Task, the implementation of the automated Tasks using the Camunda Workflow Engine is pretty straight forward.

The Invoice Process

We will be using embedded Forms for our tasks. After adding React as a custom script to Tasklist, we can start creating our interface. I won’t be using JSX for this example, so you can quickly deploy it without transpiling it. Let us begin 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 want to display multiple values, say the amount and the creditor of the invoice, we can instantiate it numerous times. For example, you could build a form accordingly:

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 added a controlled component to handle user input. As we have to decide whether to approve this invoice or not, a simple checkbox is enough. These few lines of code already generate most of the final approval form. I just added a heading and got to the final result.

The Invoice Approval Form

As you can see, using a Framework like React in Tasklist is not only possible but pretty easy as well.
If you want to learn more about further input types, feel free to check out the sourcecode which is available on Github.

If you get stuck at any point, do not hesitate to raise questions in our community forum.

  • Countdown to the Camunda Community Summit

    Introducing our speaker line-up and the Camunda Community Awards  Camunda has always been focused on creating an excellent experience for developers everywhere who are trying to automate processes. From our days as a small process automation consulting firm to the powerful products used by hundreds around the globe, our engineering mindset and commitment to our community has always been at the heart of what we do. Which is why we’re excited to share the final speaker line-up for our first ever Camunda Community Summit, taking place April 27-28, 2021.  Highlights will include presentations from: Adrianna Tan, San Francisco Digital Services, will explore Automation in Local Government Digital Services in a Post-Pandemic World.  Markus Stahl, Deutsche Post Adress GmbH presenting: Open...

    Read more
  • Six Tips for building a global Meetup...

    Building and nurturing a community of users is vital to any tech organization’s success. If you want to get the word out about your product and build meaningful relationships with your user community, you’ll want to empower your community contributors to lead successful meetup groups. In this blog post, I’ll share some of the learnings from building up a support program for our global Camunda meetup organizers over the past three years.  I’m the Community Manager at Camunda and a people connector at heart. One of my greatest passions is building meaningful relationships that serve global communities and empower individuals. I strongly believe that exchanging ideas and learning about the experiences of others can be a great source of knowledge...

    Read more
  • Contributing to the Camunda Modeler and getting...

    A report from a true fan. Watching sports is a little like using Open Source Software. I know that is a bit of a  stretch, but if you keep reading you will see that both need contribution from “hobby leagues”. By watching your favorite sports team you (maybe unintentionally) tell sports clubs and TV stations that you are interested in their offerings. Maybe at one point you decide to play the sport yourself. By starting to play, you begin contributing to that community. You may not ever be a professional athlete, but overall you start to influence the sport you’re participating in at a small level.  I am a big user of bpmn.io. I guess if you work at Camunda...

    Read more