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
	Input	Menginput teks singkat (single-line).
	Add On	Input teks yang memiliki tambahan prefix/suffix (misalnya: Rp, %, dll).
	Switch	Input boolean untuk memilih on/off.
	Toogle	Digunakan untuk memilih antara dua kondisi (aktif/non-aktif).
	Drop Down	Memilih satu opsi dari daftar pilihan.
	Multiple Select	Memilih banyak opsi sekaligus dalam bentuk dropdown.
	Radio Button	Memilih satu opsi dari beberapa pilihan yang tersedia.
	Checkbox	Input centang untuk memilih opsi tunggal (boleh dicentang atau tidak).
	Expression Input	Input yang menghitung nilai otomatis memakai ekspresi (FEEL/logic).
	Upload File	Mengunggah satu file dari perangkat pengguna.
	Upload Multiple Files	Mengunggah lebih dari satu file.
	Editor Input	Input teks panjang dengan format rich text (bold, list, dsb.).
	Input Json	Mengisi data dalam format JSON.
	Remote Select	Dropdown yang sumber datanya dari API atau database eksternal.
	Multiple Input	Menambahkan beberapa set input yang sama secara dinamis (repeatable section).
	Chained Select	Dropdown bertingkat: pilihan kedua tergantung pilihan pertama.
	Calculation Input	Input angka yang dihitung otomatis dari formula FEEL.
	Calculation Date	Menghitung tanggal otomatis dari formula (misalnya +7 hari dari tanggal input).

Typography

Berfungsi untuk menampilkan teks statis seperti judul, sub judul, atau paragraf penjelasan di dalam form.

Gambar	Nama Field	Fungsi
	Heading	Menambahkan judul atau subjudul untuk memisahkan bagian form.
	Paragraph	Menampilkan teks penjelasan, instruksi, atau catatan.

Layout

Digunakan untuk mengatur susunan dan struktur tampilan form, misalnya membuat baris, kolom, atau grid.

Gambar	Nama Field	Fungsi
	Layout Row	Menyusun beberapa komponen secara horizontal (satu baris).
	Layout Column	Menyusun komponen secara vertikal (satu kolom).
	Layout Grid 2x3	Grid layout dengan 2 kolom × 3 baris.
	Layout Grid 2x2	Grid dengan 2 kolom × 2 baris untuk tampilan lebih rapi.

Action

Komponen yang digunakan untuk membuat tombol aksi tambahan selain tombol bawaan.

Gambar	Nama Field	Fungsi
	Action	Mengirimkan data atau memicu aksi tertentu (biasanya tombol tambahan selain submit/cancel).

Media

Komponen yang digunakan untuk menampilkan elemen visual seperti gambar atau video di dalam form.

Gambar	Nama Field	Fungsi
	Image	Menampilkan gambar statis pada form (logo, ilustrasi, dll).
	Video	Menampilkan video di dalam form.

Edit Element

Edit element muncul ketika Anda mengklik dua kali sebuah komponen di dalam canvas. Bagian ini digunakan untuk mengatur detail dan perilaku komponen. Setiap komponen dapat memiliki kombinasi tab pengaturan yang berbeda, tergantung jenis dan fungsinya. Edit element dapat terdiri dari beberapa bagian berikut:

General

Berisi pengaturan dasar dari komponen. Isi tab General berbeda untuk setiap jenis komponen, tetapi umumnya mencakup:

Label/Name: Label atau nama komponen yang ditampilkan kepada pengguna.
Key (Variable Name): Nama variabel yang digunakan untuk menyimpan nilai komponen saat form disubmit.
Type: tipedata (Text, Number, Boolean, Date/Time, Select, dsb.).
Tooltip: Teks bantuan singkat yang dapat ditampilkan saat pengguna mengarahkan kursor ke ikon informasi.
Disabled: Digunakan untuk mengatur apakah komponen dapat diisi oleh pengguna.
Form Mapping: Digunakan untuk menghubungkan komponen dengan form lain ketika proses membutuhkan pemetaan data.

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

Logic

Logic digunakan untuk mengatur perilaku komponen secara dinamis. Melalui Logic, Anda dapat menentukan kapan sebuah komponen ditampilkan atau disembunyikan berdasarkan nilai dari field lain di dalam form. Ekspresi akan dievaluasi saat nilai field berubah. Contoh umum (FEEL):

status = "Ditolak" jumlah_item > 0 exists(diskon_persen) and diskon_persen > 0 metode_pembayaran in ["Transfer", "Kartu Kredit"] user_role == "Admin" status != "inactive" age >= 18 created_date > 2025-01-01 input-field == "value" is_active == true data_value == null user_role == "Admin" && status == "active" age >= 18 || user_role == "Manager" selected_options == "option1" tags != "important"

Validation

Validation digunakan untuk memastikan data yang diinput pengguna sesuai dengan aturan yang dibutuhkan oleh form. Terdiri dari built-in constraints dan (opsional) ekspresi kustom.

Required: wajib diisi.

Data Source

Data Source digunakan untuk mengambil data secara dinamis dari API atau sumber data eksternal. Tab ini hanya muncul pada komponen yang membutuhkan data dari luar, seperti Chained Select.

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. Tab ini hanya muncul pada komponen yang mendukung perhitungan, seperti Calculation Input dan Calculation Date.

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

Layer

Panel Layer menampilkan susunan form dalam bentuk tree view, sehingga Anda bisa melihat struktur form secara jelas dan rapi.

Fungsi Layer

Membantu melihat urutan dan posisi tiap komponen dengan lebih mudah.
Mempermudah memilih komponen yang sering sulit di-klik di area canvas.
Mempercepat proses memindahkan, mengatur, atau menghapus komponen.
Menunjukkan struktur layout bertingkat seperti row, column, dan field di dalamnya.

Design

Panel Design adalah fitur opsional yang bisa Anda gunakan untuk mempercantik tampilan form agar terlihat rapi dan sesuai gaya perusahaan.

Di dalam panel ini, Anda bisa mengatur:

Jenis Font (Font Family)
Ukuran tulisan (Font Size)
Gaya Tulisan (Bold, Italic atau Underline)
Posisi teks
Warna teks
Warna background

Properties

Properties digunakan untuk mengatur konfigurasi utama dari Form Builder. Melalui panel ini, Anda dapat mengatur informasi form, memilih proses BPMN yang digunakan serta menentukan jenis form yang akan dibuat.

General
General menampilkan Form ID, yaitu identitas unik yang digunakan untuk menghubungkan form dengan proses BPMN.
Select Process
Select process digunakan untuk menentukan proses BPMN yang akan dikaitkan dengan form ini. Dengan memilih proses yang sesuai, form akan tampil pada User Task yang tepat saat proses dijalankan.
Select Form Type Select Form Type digunakan untuk memilih tampilan form yang ingin digunakan. Terdapat dua pilihan:
- Form: Form satu halaman di mana semua field ditampilkan sekaligus.
- Wizard: Form bertahap yang dibagi menjadi beberapa langkah agar lebih mudah diisi dan diikuti oleh pengguna.

Form

On this page