BPMN Adding Form

---

BPMN Editor menyediakan berbagai fitur untuk membantu Anda merancang proses, seperti mengelola Form dan melihat tampilan diagram dalam berbagai mode. Halaman ini menjelaskan cara mengakses Form Editor, menambahkan komponen, serta beralih antar mode tampilan seperti Design, Preview, dan XML.

Mengakses Form Editor

Untuk mengakses Form Editor, terdapat dua cara yang dapat Anda pilih:

---

Mengakses Melalui Tab Form

1. Login dan Akses Drive
   Masuk ke akun Alurkerja OnPremise Anda, kemudian navigasi ke menu Drive melalui halaman Studio.

   

2. Buka BPMN Editor
   Pilih file BPMN yang ingin Anda ubah.

   

3. Pada bagian atas BPMN Editor, Klik Tab Form
   Sistem akan menampilkan Form Editor yang berisi daftar Start Events dan User Tasks yang tersedia pada diagram BPMN.

   

4. Pilih Form Builder yang akan akan diedit
   Pada halaman Form Editor, klik salah satu kartu Start Event atau User Task yang ingin Anda buat atau ubah formnya. Sistem akan membuka halaman Form Builder untuk item yang dipilih.

   

5. Mulai Penyusunan Form
   Pada halaman Form Builder, pilih Tab Input untuk menambahkan dan mengatur komponen form. Tab Input menyediakan berbagai komponen seperti input teks, dropdown, dan elemen lainnya yang diperlukan dalam form.

   

Setelah menambahkan komponen yang diinginkan, buka tab Detail untuk mendesain tampilan Detail View dari User Task. Di dalam tab ini, Anda dapat menggunakan Detail View Builder untuk menata bagaimana tampilan detail form akan disajikan kepada pengguna.

Tab pada Form Editor

Setelah Anda memilih elemen pada diagram BPMN, Anda akan melihat dua tab yang tersedia pada Form Editor:

• Tab Input: Menyediakan fitur untuk mendefinisikan komponen form yang akan digunakan, seperti input, dropdown, dan lainnya.

  

• Tab Detail: Digunakan untuk mendesain tampilan Detail View dari User Task. Dalam tab ini, Anda dapat menggunakan Detail View Builder untuk menata bagaimana tampilan form akan disajikan kepada pengguna.

  

Tampilan Form dengan Preview

Pada halaman Form Builder, Anda akan melihat tampilan form yang bisa langsung dilihat dengan menggunakan Preview di sebelah kanan. Anda bisa mengedit form dan langsung melihat hasilnya di sisi kanan dalam tampilan Preview.

Mengakses Form Editor Melalui Start Event atau User Task

1. Buka BPMN Editor
   Pilih file BPMN yang ingin Anda ubah.

   

2. Klik langsung pada Start Event atau User Task
   Pada diagram BPMN, langsung klik pada Start Event atau User Task yang ingin Anda buat atau ubah formnya. Ini akan membuka halaman Form Builder untuk elemen yang dipilih.

   

3. Mulai Penyusunan Form
   Setelah halaman Form Editor terbuka, pilih tab Tab Input untuk menambahkan dan mengatur komponen form. Setelah selesai, pastikan untuk membuka ikon Preview untuk melihat hasilnya, lalu simpan perubahan.

   

Mengelola Form

---

Menambahkan Komponen

---

1. Pilih Komponen

   

   Di panel kiri, terdapat berbagai jenis komponen yang dikelompokkan menjadi:

   • Input: Digunakan untuk berbagai jenis input, seperti dropdown, multiple select, radio button, checkbox, expression input, upload file, editor, dan lainnya.
   • Typography: Digunakan untuk menampilkan teks seperti heading dan paragraph agar form lebih informatif dan terstuktur.
   • Layout: Digunakan untuk pengaturan tata letak komponen pada form, seperti layout row, layout column, layout grid 2x2, dan lainnya. - Action: Menambahkan aksi atau interaksi dalam form atau proses. - Technical: Digunakan untuk menambahkan komponen teknis berbasis embed atau integrasi, seperti HTML Custom, Iframe Custom, Shadow Embed dan Micro Frontend.

2. Drag 'n' Drop
   Klik dan tahan pada komponen yang Anda inginkan, lalu seret (drag) ke area Form di tengah. Lepaskan klik untuk menempatkan komponen tersebut.

   

3. Simpan Form
   Untuk menyimpan perubahan maka klik tombol Save pada pojok kanan atas.

Menghapus Komponen

---

Jika diperhatikan dipojok kanan atas pada setiap komponen pada form akan ada ikon hapus. Anda dapat menghapus konponen dari form dengan cara klik ikon tersebut.

Konfigurasi Form pada Event dan Task

Setiap komponen (field) yang Anda tambahkan ke Form dapat dikonfigurasi melalui Edit Element. Konfigurasi ini digunakan untuk mengatur identitas field, logika dan validasi input.

Membuka Edit Elemen

1. Masuk ke tab Form dan pilih Start Event atau User Task yang ingin Anda edit.

   

2. Pada halaman Form Builder, klik komponen/field yang ingin dikonfigurasi.

3. Sistem akan menampilkan pop-up Edit Element yang terdiri dari tiga tab: General, Logic dan Validation.

   Tab General

   Pada tab General, Anda dapat mengatur informasi dasar dari field:

   
   • Name: Nama field yang ditampilkan pada Form. Anda dapat mengisi label dalam dua bahasa yaitu English dan Indonesia.
   • Key: Identitas unik field yang digunakan sebagai penanda data (biasanya terisi otomatis).
   • Placeholder: Teks petunjuk singkat yang muncul di dalam field sebelum pengguna mengisi.
   • Field type: Jenis komponen field (misalnya input, dropdown dan lainnya) sesuai kebutuhan.
   • Tooltip: Aktifkan untuk menampilkan bantuan/petunjuk tambahan pada field, lalu isi pesannya pada kolom yang tersedia.
   • Disable: Aktifkan untuk membuat field tidak dapat diisi oleh pengguna (nonaktif).
   • Form Mapping: Digunakan untuk menghubungkan komponen dengan form lain ketika proses membutuhkan pemetaan data.

   Tab Logic

   Pada tab Logic, Anda dapat mengatur kondisi untuk menyembunyikan field.

   
   • Hide if: Isi ekspresi kondisi untuk menyembunyikan field ketika kondisi terpenuhi. Contoh format: user_role == "Admin" && status != "inactive" Gunakan tombol Show Examples untuk melihat contoh penulisan ekspresi.

   Tab Validation

   Pada tab Validation, Anda dapat mengatur aturan validasi input.

   
   • Required: Aktifkan untuk menjadikan field wajib diisi sebelum form dapat disubmit.

4. Simpan Perubahan Setelah mengatur field di Edit Element, klik Save Changes lalu simpan perubahan pada Form Builder dan terakhir simpan file BPMN agar seluruh perubahan tersimpan.

Menggunakan Mode Preview di BPMN Editor

BPMN Editor menyediakan beberapa mode tampilan untuk memudahkan Anda dalam memeriksa diagram.

Mengakses Mode tampilan

1. Buka diagram BPMN di Halaman Studio.

   

2. Gunakan tombol pada toolbar untuk memilih mode tampilan.

Jenis Mode yang Tersedia