🧑🏿‍🤝‍🧑🏿 🚱 🏴󠁧󠁢󠁥󠁮󠁧󠁿 タスクリストCamundaでのReactフォームの使用 👹 🤵🏿 🧠

Camunda Tasklistは、カスタムタスクがあり、独自のソリューションを使用または作成したくない場合に最適です。組み込みのフォームは、ユーザーインターフェイスを設計するときに多くの柔軟性を提供します。近年、Reactはユーザーインターフェイスを構築するための最も人気のあるライブラリの1つになりました。このブログ投稿では、タスクリストとともにReactフォームを使用する方法を紹介します。

最初にプロセスを見てみましょう。請求書を受け取ったので、確認する必要があります。最初の請求書フォームとカスタムタスクに焦点を当てます。CamundaWorkflowEngineを使用して自動化されたタスクを実装するのは非常に簡単です。

Camunda Developer Relations：誰が、何を、どこで、なぜ、そしてどのように？

タスクにはインラインフォームを使用します。Reactをカスタムスクリプトとしてタスクリストに追加した後、インターフェイスの構築を開始できます。この例では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
        }))
      ]);
  }
}

このステートレスコンポーネントは、スタイリングに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のようなフレームワークを使用することは可能であるだけでなく、非常に簡単です。詳細については、Githubで入手できるソースコードを参照してください。

タスクリストCamundaでのReactフォームの使用

More articles: