🙁 👩🏿‍🤝‍👩🏻 🤶🏻 Usando Formulários React com Lista de Tarefas Camunda 👩 👩🏻‍🎓 🐛

Camunda Tasklist é ótimo quando você tem tarefas personalizadas e não quer usar ou criar sua própria solução. Os formulários integrados fornecem muita flexibilidade ao projetar interfaces de usuário. Nos últimos anos, React se tornou uma das bibliotecas mais populares para a construção de interfaces de usuário. Nesta postagem do blog, mostrarei como usar os formulários React junto com a Lista de Tarefas.

Vamos dar uma olhada em nosso processo primeiro: uma fatura foi recebida e precisa ser revisada. Vamos nos concentrar no formulário de fatura inicial e na tarefa personalizada - implementar tarefas automatizadas usando o Camunda Workflow Engine é bastante simples.

Relações com o desenvolvedor Camunda: quem, o quê, onde, por que e como?

Usaremos formulários embutidos para nossas tarefas. Depois de adicionar React como um script personalizado à Lista de Tarefas, podemos começar a construir a interface. Não vou usar JSX para este exemplo, então você pode implantá-lo rapidamente sem transpilar. Vamos começar com um campo simples para exibir valores:

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

Este componente sem estado usa classes Bootstrap para estilização. Se precisarmos exibir vários valores, como o valor e o fornecedor da fatura, podemos criá-lo várias vezes. Por exemplo, você pode criar um formulário de acordo:

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

Abaixo de nossos campos de entrada, adicionei um componente gerenciado para lidar com a entrada do usuário. Uma vez que temos que decidir se aprovamos ou não este projeto, uma simples caixa de seleção é suficiente. Essas poucas linhas de código já geram a maior parte do formulário de aprovação final. Eu apenas adicionei um título e fiz o trabalho.

Como você pode ver, usar uma estrutura como React na Lista de Tarefas não só é possível, mas também bastante simples. Se você quiser saber mais, pode ver o código-fonte que está disponível no Github.

Usando Formulários React com Lista de Tarefas Camunda

More articles: