Form

Multi-step wizard

Membagi form menjadi beberapa langkah dengan tombol Back dan Next

Multi-step wizard

Multi-step wizard digunakan untuk membagi form panjang menjadi beberapa langkah, satu langkah per layar. Pengguna berpindah langkah dengan Back dan Next, lalu menekan Complete Task di layar terakhir. Cocok untuk pengisian berurutan seperti data karyawan baru. Komponen ini ada di grup Layout pada palette.

Mapping ke Engine

Komponen ini tidak menyimpan process variable. Setiap field di dalam langkah tetap menjadi process variable sendiri di tingkat atas payload, misalnya {"full_name": "Rizky Pratama", "birth_date": "14-03-1998"}. Key wizard tidak ikut dikirim. Field Date terkirim dengan format DD-MM-YYYY, sama seperti field Date biasa.

Properties

  • Name: Nama wizard dalam dua bahasa (EN & ID).
  • Key: Identitas node di dalam form, bukan process variable. Bila dua wizard memakai key yang sama, muncul "Duplicate Wizard key: … Each Wizard must have a unique key." dan Save Changes nonaktif.
  • Wizard steps: Daftar langkah, 2 sampai 8 langkah ("… of 8 steps"). Langkah ditambah lewat Add step, diurutkan naik turun, dan dihapus. Saat wizard diletakkan di kanvas, isinya 2 langkah.
    • Step key: Identitas langkah, misalnya personal_data.
    • Step name (English) dan Nama langkah (Indonesia): Nama langkah yang tampil ke pengguna.
    • Description (English) dan Deskripsi (Indonesia): Keterangan singkat di bawah nama langkah. Opsional.
    • Fields in this step: Field di dalam langkah, ditambah lewat Add field. Tipe yang tersedia hanya Text, Number, Textarea, Date, dan Dropdown. Klik field untuk mengubah pengaturannya. Key ganda di langkah yang sama ditandai "Duplicate field key: …".
    • Required: Switch per field ("This field must be filled in").
  • Progress indicator: Numbered steps menampilkan daftar langkah bernomor. Progress bar menampilkan bilah progres dengan teks "Step 2 of 4". Di ponsel bilah progres selalu dipakai.
  • Review step at the end: Menambah layar Review setelah langkah terakhir. Layar ini memuat semua jawaban sebelum Complete Task.
  • Allow going back: Mengizinkan pengguna kembali ke langkah sebelumnya. Bila mati, tombol Back nonaktif dan tombol Edit di layar Review tidak tampil.
  • Jump to visited steps: Tersimpan sebagai jump_to_visited. Pada versi ini daftar langkah belum bisa diklik, jadi switch ini belum mengubah perilaku form.
  • Show the name above the steps: Menampilkan Name di atas penunjuk progres.
  • Hide If: Ekspresi FEEL untuk menyembunyikan komponen. Komponen disembunyikan ketika ekspresi bernilai true, dievaluasi ulang saat nilai field lain berubah.
  • Validation: Wizard tidak punya Required. Tab Validation berisi pilihan When to validate:
    • On Next: Langkah yang terbuka dicek saat pengguna menekan Next.
    • Only on Complete Task: Next selalu lanjut tanpa pengecekan. Semua langkah dicek saat Complete Task.

Perilaku saat diisi

  • Pada On Next, Next ditolak bila ada field wajib kosong di langkah itu. Kursor pindah ke field pertama yang bermasalah. Pesan hilang begitu field diisi.
  • Complete Task hanya berlaku di layar terakhir. Bila ditekan sebelumnya, form tidak dikirim dan muncul "Go through every step before completing (you are on step 1 of 4)". Jumlah layar termasuk layar Review.
  • Di layar terakhir tampil "Last step — press Complete Task to send." menggantikan tombol Next.
  • Complete Task di layar terakhir mengecek semua langkah. Bila ada masalah, langkah bermasalah pertama dibuka dan daftar langkah memberi angka merah.
  • Layar Review berjudul "Review your answers" dengan teks "Check everything before you press Complete Task.". Field wajib yang kosong ditandai "Missing". Dropdown menampilkan label opsi, bukan key-nya.
  • Saat form read-only atau disabled, Back dan Next tetap jalan dan Complete Task tidak ditahan oleh wizard.
  • Langkah yang sedang terbuka tidak disimpan. Draft menyimpan isian semua langkah, tetapi saat dibuka lagi wizard mulai dari langkah 1.