Overview
Membuat Form untuk Proses SOP — komponen, properties, dan mapping ke engine
Setelah SOP (BPMN) selesai didokumentasikan, langkah berikutnya adalah mendigitalisasikan proses dengan menambahkan Form pada activity yang membutuhkan input pengguna (misalnya User Task) maupun pada Start Event. 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 Input
Komponen yang berfungsi untuk memasukkan data secara langsung oleh pengguna, dikelompokkan menjadi Basic, Choice & Selection, Date & Time, dan Advanced. Tabel di bawah merangkum mapping ke engine tiap komponen (tipe variabel, tipe kolom report, dan contoh value). Klik nama komponen untuk membuka halaman detailnya (fungsi, mapping, dan properties General/Logic/Validation).
Basic
| Gambar | Nama | Tipe Variable | Tipe Kolom Report | Deskripsi | Contoh |
|---|---|---|---|---|---|
 | Input | String | text | Menginput teks singkat satu baris. Cocok untuk data seperti nama, pekerjaan, alamat, atau informasi lain berbentuk teks. | Safitri |
 | Number | Long | int8 | Menginput data berbentuk angka. Cocok untuk nomor telepon, jumlah, harga, atau nilai numerik lainnya. | +6281234567899 |
 | String | text | Menginput alamat email dengan validasi format otomatis. Cocok untuk data kontak email. | user@example.com | |
 | Password | String | text | Menginput teks yang disamarkan. Cocok untuk kata sandi atau data rahasia lainnya. | qwerty1234*# |
 | Add On | String | text | Menginput teks dengan tambahan suffix. Cocok untuk nilai bersatuan seperti Rp, %, kg, atau satuan lainnya. | 100.000 Rp |
 | Text Area | String | text | Menginput teks panjang multi-line. Cocok untuk deskripsi, catatan, komentar, atau alamat. | Ngaglik, Sleman |
Choice & Selection
| Gambar | Nama | Tipe Variable | Tipe Kolom Report | Deskripsi | Contoh |
|---|---|---|---|---|---|
 | Switch | Boolean | boolean | Menentukan keputusan on/off dengan nilai boolean (versi baru). Cocok untuk pilihan Ya/Tidak atau aktif/nonaktif. | true |
 | Switch (Legacy) | Integer | int8 | Versi lama Switch dengan nilai integer 0/1. Cocok untuk keputusan dua pilihan sederhana pada form lama. | 1 |
 | Toggle | Boolean | boolean | Mengubah status aktif/non-aktif dengan nilai boolean (versi baru). Cocok untuk menyalakan/mematikan fitur. | false |
 | Toggle (Legacy) | Integer | int8 | Versi lama Toggle dengan nilai integer 0/1. Cocok untuk penentuan status pada form lama. | 1 |
 | Dropdown | String | text | Memilih satu opsi dari daftar. Cocok untuk memilih kategori produk atau status pengajuan. | Pengajuan Fasilitas Kantor |
 | Multiple Select | String | text | Memilih beberapa opsi sekaligus dari dropdown. Cocok untuk memilih lebih dari satu kategori atau fitur. | ["1","2","3"] |
 | Radio Button | String | text | Memilih satu opsi dari beberapa pilihan. Cocok untuk kategori pelatihan atau jenis pengajuan. | training_skill |
 | Checkbox | String | text | Mencentang satu atau beberapa opsi independen. Cocok untuk memilih jenis pelatihan atau fasilitas tambahan. | ["a","b"] |
 | Remote Select | String | text | Memilih satu item dari daftar eksternal via API/database. Cocok untuk memilih user, divisi, atau nama tim. | user@example.com |
 | Remote Multiple Select | String | text | Memilih beberapa item dari daftar eksternal via API. Cocok untuk memilih beberapa user atau nama tim. | ["a@x.com","b@x.com"] |
 | Master Data Select | text | text | Memilih opsi dari Master Data di sistem. Cocok untuk kategori cuti, jenis dokumen, divisi, atau status. | Karyawan Tetap |
Date & Time
| Gambar | Nama | Tipe Variable | Tipe Kolom Report | Deskripsi | Contoh |
|---|---|---|---|---|---|
 | Date | String | text | Menginput tanggal (hari, bulan, tahun). Cocok untuk tanggal lahir atau tanggal pengajuan. | 10-02-2026 |
 | Time | String | text | Menginput waktu (jam & menit). Cocok untuk jam kerja atau jam kegiatan. | 13:00 |
 | Date Time | String | text | Menginput tanggal & waktu sekaligus. Cocok untuk waktu pertemuan, janji, atau pengajuan spesifik. | 10-02-2026 13:00 |
 | Month | String | text | Menginput bulan. Cocok untuk periode laporan atau bulan pengajuan. | 02 |
 | Year | String | text | Menginput tahun. Cocok untuk tahun anggaran atau tahun kegiatan. | 2026 |
Advanced
| Gambar | Nama | Tipe Variable | Tipe Kolom Report | Deskripsi | Contoh |
|---|---|---|---|---|---|
 | Expression Input | sesuai input | sesuai input | Menghitung nilai otomatis via formula dari field lain. Cocok untuk subtotal, diskon, pajak, atau total biaya. | 1250000 |
 | Rich Text | String | jsonb | Menyusun teks berformat (bold, italic, list, gambar). Cocok untuk konten panjang dengan penekanan khusus. | <p>...</p> |
 | File Upload | File | jsonb | Mengunggah file (dikirim sebagai binary). Cocok untuk melampirkan dokumen jpg, png, pdf, docx, atau xlsx. | dokumen.pdf |
Komponen Non-Input
Komponen berikut bersifat struktural/tampilan dan tidak menyimpan process variable, sehingga tidak memiliki mapping ke engine maupun properties General/Logic/Validation seperti komponen input.
Typography
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
Mengatur susunan dan struktur tampilan form (baris, kolom, atau grid).
| Gambar | Nama Field | Fungsi |
|---|---|---|
 | Row | Menyusun 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. |
 | Spacer | Memberi ruang kosong antar elemen. |
 | Separator | Memisahkan bagian form dengan garis/pemisah. |
Action
| Gambar | Nama Field | Fungsi |
|---|---|---|
 | Action | Mengirim data/memicu aksi tertentu (tombol tambahan selain submit/cancel). |
Technical
Menambahkan elemen teknis yang melibatkan integrasi atau fungsionalitas lanjutan.
| Gambar | Nama Field | Fungsi |
|---|---|---|
 | HTML Custom | Menyisipkan elemen HTML kustom dalam form. |
 | Iframe Custom | Menyematkan iframe untuk konten eksternal. |
 | Shadow Embed | Menyematkan elemen dalam shadow DOM. |
 | Micro Frontend | Mengintegrasikan aplikasi kecil (micro frontend) ke dalam form. |
Edit Element
Edit Element muncul ketika Anda mengklik dua kali sebuah komponen di dalam canvas. Umumnya terdiri dari tiga tab: General, Logic, dan Validation. Isi tab General berbeda tiap komponen (lihat halaman masing-masing), sedangkan Logic dan Validation mengikuti pola yang sama untuk semua komponen input.
General
Pengaturan dasar komponen. Selalu memuat minimal:
- Name — label/nama komponen yang ditampilkan ke pengguna, mendukung dua bahasa (EN & ID).
- Key — nama process variable yang menyimpan nilai komponen saat form disubmit (digenerate otomatis, bisa disesuaikan).
Selebihnya bergantung jenis komponen (Placeholder, Default Value, Options, Format, dsb.).
Best Practice: gunakan format snake_case atau camelCase untuk Key (mis.
jumlah_item,harga_satuan,subTotal).
Logic
Berisi field Hide If. Komponen akan disembunyikan ketika ekspresi FEEL yang dituliskan bernilai true, dievaluasi saat nilai field lain berubah. Contoh:
user_role == "Admin"
status != "inactive"
age >= 18
input-field == "value"
is_active == true
user_role == "Admin" && status == "active"
(age >= 18 || user_role == "Manager") && status != "pending"Validation
Memastikan data sesuai aturan form:
- Required — menjadikan field wajib diisi.
- Required If — ekspresi FEEL yang membuat field wajib diisi hanya jika kondisi terpenuhi (validasi bersyarat). Contoh:
user_type == "Admin",subscription_type == "Premium",(user_role == "Manager" || user_role == "Admin") && is_verified == true.
Layer
Panel Layer menampilkan susunan form dalam bentuk tree view sehingga struktur form terlihat jelas dan rapi.
- Membantu melihat urutan dan posisi tiap komponen.
- Mempermudah memilih komponen yang sulit di-klik di canvas.
- Mempercepat memindahkan, mengatur, atau menghapus komponen.
- Menunjukkan struktur layout bertingkat (row, column, dan field di dalamnya).
Design
Panel Design (opsional) untuk mempercantik tampilan form agar sesuai gaya perusahaan: Font Family, Font Size, gaya tulisan (Bold/Italic/Underline), posisi teks, warna teks, dan warna background.
Properties
Properties mengatur konfigurasi utama Form Builder:
- General — menampilkan Form ID, identitas unik yang menghubungkan form dengan proses BPMN.
- Select Process — menentukan proses BPMN yang dikaitkan dengan form ini, agar form tampil pada User Task yang tepat.
- Select Form Type — memilih tampilan form:
- Form: satu halaman, semua field ditampilkan sekaligus.
- Wizard: form bertahap yang dibagi menjadi beberapa langkah.