Card / fieldset

Card / fieldset digunakan untuk mengelompokkan beberapa field yang saling berkaitan di bawah satu judul, misalnya alamat pengiriman. Kartu bisa berisi field Text, Number, Textarea, Date, dan Dropdown, ditata dalam satu atau dua kolom.

Mapping ke Engine

Komponen ini tidak menyimpan process variable. Field di dalam kartu tetap menyimpan nilainya dengan Key masing-masing, sejajar dengan field di luar kartu. Contoh payload: { "recipient": "Dewi Kartika", "floor": 3 }, tanpa key milik kartu.

Properties

• Title: Judul kelompok dalam dua bahasa (EN dan ID).
• Key: Identitas kartu di dalam form. Terisi otomatis saat komponen diletakkan di kanvas. Field di dalam kartu memakai Key-nya sendiri.
• Description: Keterangan opsional dalam dua bahasa, satu atau dua baris di bawah judul.
• Fields: Daftar field di dalam kartu.
  • "Add field" menambah field Text, Number, Textarea, Date, atau Dropdown. Field juga bisa diseret langsung ke dalam kartu di kanvas.
  • Buka sebuah field untuk mengubah propertinya dan mengatur Required.
  • Urutan field diubah dengan tombol naik dan turun. Ikon hapus membuang field.
• Style: Bentuk kartu, pilih salah satu.
  • Card: Permukaan berbingkai dengan strip judul. Pengelompokan paling kuat.
  • Fieldset: Bingkai tipis dengan judul di atas garis, seperti formulir kertas.
  • Plain: Judul dan garis pemisah saja, tanpa bingkai.
• Columns: Pilih "1 column" atau "2 columns". Berlaku di desktop. Di ponsel selalu satu kolom, dan Textarea selalu selebar kartu.
• Show the title: Menampilkan judul. Bila dimatikan, judul tidak terlihat tetapi tetap dibacakan pembaca layar.
• Logic: Kartu tidak punya pengaturan Logic.
• Validation: Tidak ada aturan validasi untuk kartu. Required diatur per field di daftar Fields.

Save Changes nonaktif bila salah satu field bermasalah. Pesannya tampil di bawah field tersebut:

• "Only Text, Number, Textarea, Date and Dropdown fit in a card"
• "Give the field an English name"
• "A key is required"
• "Use lowercase letters, numbers and _ and start with a letter"
• "Another field in this card uses this key"
• "Another field in this form uses this key"
• "Add at least one option" (Dropdown tanpa opsi)

Perilaku saat diisi

• Field di dalam kartu divalidasi seperti field biasa, dengan pesan di bawah masing-masing field.
• Saat Complete Task gagal, judul kartu menampilkan angka merah sejumlah field bermasalah, dan bingkai kartu menjadi merah.
• Isi field di dalam kartu ikut tersimpan di draft dan tampil di history seperti field lain.
• Di tema gelap, kartu dan fieldset memakai warna latar gelap form. Judul, deskripsi, dan isi tetap terbaca.