title background

Статьи / Использование форм 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 }) )

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

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

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