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).
	Dropdown	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).
	Rich Text	Memasukkan teks yang diformat, seperti bold, italic, atau menyisipkan gambar dan tautan.
	File Upload	Mengunggah satu file dari perangkat pengguna.
	Remote Select	Dropdown yang sumber datanya dari API atau database eksternal.
	Remote Multiple Select	Memilih lebih dari satu item dari data eksternal yang diambil via API.
	Master Data Select	Memilih data master yang tersimpan dalam sistem atau database.

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.

Layout

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

Gambar	Nama Field	Fungsi
	Row	Menyusun beberapa komponen secara horizontal (satu baris).
	Column	Menyusun komponen secara vertikal (satu kolom).
	Grid 2x3	Grid layout dengan 2 kolom × 3 baris.
	Grid 2x2	Grid dengan 2 kolom × 2 baris untuk tampilan lebih rapi.
	Spacer	Memberi ruang kosong antara elemen-elemen dalam form, meningkatkan keterbacaan dan organisasi layout.
	Separator	Memisahkan bagian-bagian form dengan garis atau pemisah visual, meningkatkan kejelasan antar bagian.

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

Technical

Komponen yang digunakan untuk menambahkan elemen teknis dalam form yang melibatkan integrasi atau fungsionalitas lanjutan.

Gambar	Nama Field	Fungsi
	HTML Custom	Menyisipkan elemen HTML kustom dalam form untuk menambahkan elemen atau konten lain yang tidak tersedia dalam komponen standar.
	Iframe Custom	Menyematkan iframe untuk menampilkan konten eksternal (seperti halaman web, video, atau aplikasi lain) langsung di dalam form.
	Shadow Embed	Menyematkan elemen dalam shadow DOM, memastikan elemen tersebut terpisah dari pengaturan lain dalam form.
	Micro Frontend	Mengintegrasikan aplikasi kecil (micro frontend) ke dalam form, memungkinkan bagian form berfungsi secara terpisah dan mandiri.

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.

Remote Select

Remote Select digunakan untuk menampilkan daftar pilihan (dropdown) yang datanya diambil langsung dari API endpoint. Remote Select biasanya diguanakn untuk memilih data seperti user, divisi, produk, kategori atau referensi lain dari sistem eksternal.

Langkah-langkah Menggunakan Remote Select

Buka Form Builder pada User Task.
Tambahkan komponen Remote Select dengan cara drag and drop ke dalam form.
Klik dua kali komponen Remote Select untuk membuka Edit Element.
Isi konfigurasi berikut:
- Name : Nama field yang ditampilkan pada form.
- Key : Nama variabel yang digunaakn untuk menyimpan nilai hasil pilihan.
- Data URL : Endpoint API yang digunakan untuk mengambil data pilihan. Endpoint harus mengembalikan response JSON.
- Root Data : Nama properti JSON yang berisi daftar data. Contoh : data.
- Select Remote Value Field : Field yang digunakan sebagai value yang disimpan ke variabel. Contoh : email.
- Select Remote Label Field : Field yang ditampilkan sebagai teks pilihan di dropdown. Contoh : name.
Klik Save Changes untuk menyimpan perubahan.

Master Data Select

Master Data Select digunakan untuk menampilkan daftar pilihan (dropdown) yang bersumber dari Master Data yang telah dibuat sebelumnya di **Studio. Komponen ini cocok digunakan ketika opsi pilihan berasal dari data referensi internasl seperti kategori cuti, jenis dokumen, divisi, status atau parameter konfigurasi lainnya.

Langkah-langkah Menggunakan Calculation

Buka Form Builder pada User Task.
Tambahkan komponen Master Data Select ke dalam form dengan cara drag and drop.
Klik dua kali komponen Master Data Select untuk membuka Edit Element.
Isi konfigurasi berikut:
- Name : Nama field yang ditampilkan pada form.
- Key : Nama variabel yang digunakan sebagai hasil pilihan.
- Select Master Data : Pilih sumber Master Data yang akan digunakan sebagai daftar pilihan (dropdown). Setelah memilih Master Data, sistem akan menampilkan daftar field yang tersedia untuk Label Field dan Value Field.
- Label Field : Field yang digunakan sebagai teks pilihan pada dropdown.
- Value Field : Field yang disimpan sebagai nilai variabel ketika pengguna memilih opsi
Klik Save Changes untuk menyimpan konfigurasi.

Calculation

Calculation digunakan untuk menghitung nilai secara otomatis berdasarkan formula yang ditentukan. Komponen ini umumnya digunakan untuk menghitung nilai turunan seperti subtotal, diskon, pajak, total pembayaran atau skor berdasarkan input dari field lain dalam form.

Langkah-langkah Menggunakan Calculation

Buka Form Builder pada User Task.
Tambahkan komponen Expression Input ke dalam form dengan cara drag and drop.
Klik dua kali komponen Expression Input untuk membuka Edit Element.
Isi konfigurasi berikut:
- Name : Nama field yang ditampilkan pada form.
- Key : Nama variabel yang digunakan sebagai hasil perhitungan.
- Formula : Rumus perhitungan yang menggunakan nama variabel dari properti Key field lain(Name). Contoh : `amount+(taxes/100*amount)
Klik Save Changes untuk menyimpan konfigurasi.

Contoh Perhitungan Formula

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