Setelah SOP (BPMN) selesai didokumentasikan, langkah berikutnya adalah mendigitalisasikan proses dengan menambahkan Form pada activity yang membutuhkan input pengguna (misalnya User Task). Setiap komponen form terhubung ke process variable. Value dari komponen ini akan dikirim sebagai variabel proses saat submit dan dapat dipakai di gateway/condition, listener, service task, maupun laporan.

Prinsip penting:

Satu komponen = satu variabel (melalui key/variable name). Pastikan penamaan konsisten dan unik per form.
Tipedata mengikuti kebutuhan proses (string, number, boolean, date/time). Ini mempermudah validasi dan perhitungan.
Keterlihatan & perilaku dinamis (tampil/sembunyi, aktif/non-aktif) dapat dikontrol oleh ekspresi berbasis data form.
Kalkulasi mendukung otomasi nilai numerik menggunakan FEEL expression sehingga pengguna tidak perlu menghitung manual.

Komponen Form

Berikut adalah daftar komponen yang tersedia dalam Form Builder, dikelompokkan berdasarkan fungsinya. Setiap kategori memiliki field dengan tujuan penggunaan yang berbeda.

Input
Komponen yang berfungsi untuk memasukkan data secara langsung oleh pengguna.

Gambar	Nama Field	Fungsi
	Text Field	Untuk memasukkan teks singkat.
	Text Area	Untuk memasukkan teks panjang atau deskripsi.
	Number	Untuk memasukkan nilai numerik.
	Date Time	Untuk memilih tanggal atau waktu.
	File Picker	Untuk mengunggah file dari perangkat pengguna.

Selection
Komponen yang memungkinkan pengguna memilih satu atau beberapa opsi.

Gambar	Nama Field	Fungsi
	Checkbox	Untuk memilih satu opsi tunggal yang bersifat opsional (boleh dicentang atau tidak).
	Checkbox Group	Untuk memilih beberapa opsi dari daftar pilihan yang sama.
	Radio Group	Untuk memilih satu opsi dari beberapa pilihan yang tersedia (harus memilih satu).
	Select	Dropdown untuk memilih satu opsi dari daftar pilihan.
	Tag List	Untuk memilih atau menandai beberapa item yang dapat dikategorikan sebagai tag.
	Remote Select	Dropdown yang datanya diambil dari sumber eksternal.

Presentation
Komponen yang digunakan untuk menampilkan informasi statis tanpa input dari pengguna.

Gambar	Nama Field	Fungsi
	Text View	Menampilkan teks statis.
	HTML View	Menampilkan konten HTML, seperti format teks, gambar atau link.
	Spacer	Memberi jarak atau ruang kosong antara komponen form agar lebih rapi.
	Separator	Membuat garis pemisah antar bagian atau kelompok komponen.

Containers
Komponen yang digunakan untuk mengelompokkan atau mengatur komponen form.

Gambar	Nama Field	Fungsi
	Group	Mengelompokkan beberapa komponen form sehingga bisa dikelola dan ditampilkan sebagai satu unit.

Properties

Properti mengatur perilaku tiap komponen form. Di form.js Camunda tersedia tiga kelompok utama—General, Condition, Validation—dan di sistem ini ditambahkan Calculation untuk kebutuhan hitung angka dengan FEEL.

General

Atur identitas dan dasar komponen:

Label: judul yang terlihat pengguna.
Key (Variable Name): nama variabel proses (wajib unik dalam form).
Description/Help text: petunjuk singkat di bawah field.
Type: tipedata (Text, Number, Boolean, Date/Time, Select, dsb.).
Default value / Placeholder: nilai awal atau contoh input.
Read-only / Disabled: mencegah pengubahan manual (sering dipakai untuk field hasil kalkulasi).

Best Practice: Gunakan format snake_case atau camelCase ketika membuat Key (mis. jumlah_item, harga_satuan, subTotal).

Condition

Mengatur visibilitas komponen secara dinamis berbasis data form. Ekspresi dievaluasi saat nilai field lain berubah.

Contoh umum (FEEL):

status = "Ditolak" jumlah_item > 0 exists(diskon_persen) and diskon_persen > 0 metode_pembayaran in ["Transfer", "Kartu Kredit"]

Validation

Menjamin data memenuhi aturan yang dibutuhkan proses. Terdiri dari built-in constraints dan (opsional) ekspresi kustom.

Required: wajib diisi.
Min/Max (Number/Date): jumlah_item >= 1, tgl_mulai => tgl_selesai
Pattern (Text): regex untuk email, nomor, dsb.

Calculation

Menghitung nilai Number secara otomatis dengan FEEL expression. Dipakai untuk subtotal, pajak, total, skor, dsb. Biasanya field ber-Calculation dibuat read-only agar tidak menimpa hasil hitung.

Contoh:

Subtotal : harga_satuan * jumlah_item
Diskon (rupiah) dari persen : (harga_satuan * jumlah_item) * (diskon_persen / 100)
PPN 11% : (harga_satuan * jumlah_item - ((harga_satuan * jumlah_item) * (diskon_persen / 100))) * 0.11
Total bayar (harga_satuan * jumlah_item) - ((harga_satuan * jumlah_item) * (diskon_persen / 100)) + ongkir