🧜🏻 🏧 🐐 Menggunakan React Forms dengan Tasklist Camunda 🍋 🦑 🐓

Camunda Tasklist sangat bagus ketika Anda memiliki tugas khusus dan tidak ingin menggunakan atau membuat solusi Anda sendiri. Formulir bawaan memberikan banyak fleksibilitas saat mendesain antarmuka pengguna. Dalam beberapa tahun terakhir, React telah menjadi salah satu perpustakaan paling populer untuk membangun antarmuka pengguna. Dalam posting blog ini, saya akan menunjukkan cara menggunakan formulir React bersama dengan Tasklist.

Mari kita lihat proses kita terlebih dahulu: faktur telah diterima dan perlu ditinjau. Kami akan fokus pada formulir faktur awal dan tugas khusus - mengimplementasikan tugas otomatis menggunakan Mesin Alur Kerja Camunda cukup mudah.

Hubungan Pengembang Camunda: Siapa, Apa, Di mana, Mengapa, dan Bagaimana?

Kami akan menggunakan formulir sebaris untuk tugas kami. Setelah menambahkan React sebagai skrip khusus ke Daftar Tugas, kita dapat mulai membangun antarmuka. Saya tidak akan menggunakan JSX untuk contoh ini, jadi Anda dapat dengan cepat menerapkannya tanpa transpiling. Mari kita mulai dengan bidang sederhana untuk menampilkan nilai:

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

Komponen stateless ini menggunakan kelas Bootstrap untuk penataan. Jika kita perlu menampilkan beberapa nilai, seperti jumlah dan vendor faktur, kita dapat membuatnya beberapa kali. Misalnya, Anda dapat membuat formulir yang sesuai:

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

Di bawah bidang masukan kami, saya telah menambahkan komponen terkelola untuk menangani masukan pengguna. Karena kami harus memutuskan apakah akan menyetujui tagihan ini atau tidak, kotak centang sederhana sudah cukup. Beberapa baris kode ini sudah menghasilkan sebagian besar formulir persetujuan akhir. Saya baru saja menambahkan judul dan menyelesaikan pekerjaan.

Seperti yang Anda lihat, menggunakan kerangka kerja seperti React in Tasklist tidak hanya mungkin tetapi juga cukup sederhana. Jika Anda ingin mengetahui lebih lanjut, Anda dapat melihat kode sumber yang tersedia di Github.

Menggunakan React Forms dengan Tasklist Camunda

More articles: