Статьи / Использование форм React с Tasklist Camunda

07.09.2020 г., перевод статьи Martin Stamm

Список задач Camunda (Camunda Tasklist) отлично подходит, когда у вас есть пользовательские задачи и вы не хотите использовать или создавать собственное решение. Встроенные формы обеспечивают большую гибкость при проектировании пользовательских интерфейсов. В последние годы React стал одной из самых популярных библиотек для построения пользовательских интерфейсов. В этом блоге я покажу вам, как использовать формы React вместе с Tasklist.

Давайте сначала взглянем на наш процесс: получен счет-фактура и его нужно рассмотреть. Мы сосредоточимся на первоначальной форме счета-фактуры и пользовательской задаче — реализация автоматизированных задач с использованием Camunda Workflow Engine довольно прямолинейна.

Отношения с разработчиками в Camunda: Кто, что, где, почему и как?

Мы будем использовать встроенные формы для наших задач. После добавления React в качестве пользовательского скрипта в Tasklist мы можем приступить к созданию интерфейса. Я не буду использовать JSX для этого примера, так что вы можете быстро развернуть его без транспилирования. Начнем с простого поля для отображения значений:

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

Этот stateless-компонент использует классы Bootstrap для стилизации. Если нам необходимо отобразить несколько значений, например сумму и кредитора счета-фактуры, мы можем создать его несколько раз. Например, вы можете создать форму соответстветствующим образом:

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

Ниже наших полей ввода я добавил управляемый компонент для обработки пользовательского ввода. Поскольку мы должны решить, одобрить этот счет или нет, достаточно простого флажка. Эти несколько строк кода уже генерируют большую часть окончательной формы одобрения. Я просто добавил заголовок и довершил дело.

Как вы можете видеть, использование фреймворка типа React в Tasklist не только возможно, но и довольно просто. Если вы хотите узнать больше, можете посмотреть исходный код, который доступен на Github.