Список задач Camunda (Camunda Tasklist) отлично подходит, когда у вас есть пользовательские задачи и вы не хотите использовать или создавать собственное решение. Встроенные формы обеспечивают большую гибкость при проектировании пользовательских интерфейсов. В последние годы React стал одной из самых популярных библиотек для построения пользовательских интерфейсов. В этом блоге я покажу вам, как использовать формы React вместе с Tasklist.
Давайте сначала взглянем на наш процесс: получен счет-фактура и его нужно рассмотреть. Мы сосредоточимся на первоначальной форме счета-фактуры и пользовательской задаче реализация автоматизированных задач с использованием Camunda Workflow Engine довольно прямолинейна.
Мы будем использовать встроенные формы для наших задач. После добавления 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.
