Form Wizard

Membuat Form menjadi sebuah wizard.

Form Wizard Type 1

Form Wizard Type 2

Form Wizard Type 3

Form Wizard Type 4

Form wizard ini pada dasarnya akan melihat attribute dari dynamic form, jadi syarat nya anda harus buat dulu attributes di Dynamic Form. Cara kerjanya attribute pada dynamicFormWizard ini yaitu mengubah visibilitas pada dynamic form sesuai step/urutan yang di deklarasikan dan akan mem-validasi input pada form ketika tombol next di klik.

contoh struktur json attribute diubah menjadi seperti ini:

JSON attribute structure

dynamicFormWizard

dynamicForm

isi dari dynamicFormWizard seperti ini:

"dynamicFormWizard": [
        {
          "title": "Judul 1",
          "subtitle": "ini subtitle 1",
          "description": "ini adalah deskripsi 1",
          "icon": "material:account_box",
          "content": [
            "id_unit",
            "parent_id",
            "id_unit2",
            "id_jtrans",
            "no_dokumen",
            "column_1"
          ]
        },
        {
          "title": "Judul 2",
          "showContentHeader": false,
          "subtitle": "ini subtitle 2",
          "description": "ini adalah deskripsi 2",
          "icon": "material:assignment",
          "content": [
            "column_2"
          ]
        },
        {
          "title": "Judul 3",
          "showContentHeader": false,
          "subtitle": "ini subtitle 3",
          "description": "ini adalah deskripsi 3",
          "icon": "material:assignment",
          "content": [
            "column_3"
          ]
        },
        {
          "title": "Judul 4",
          "showContentHeader": false,
          "subtitle": "ini subtitle 4",
          "description": "ini adalah deskripsi 4",
          "icon": "material:assignment",
          "content": [
            "column_4",
            "status"
          ]
        }
      ]

Property	Type	Required	Description	Default
content	array		array yang berisi value dari nama "fieldName" yang berada di dynamic form. Bisa juga memasukan fieldName untuk sebuah type kolom seperti yang terlihat dari contoh diatas.
title	string		Untuk mengeset judul yang akan ditampilkan pada button navigasi step & step header.	null
subtitle	string		Untuk mengeset sub judul yang akan ditampilkan pada button navigasi step & step header.	null
showContentHeader	boolean		Jika di set ke false, maka title & description tidak akan dimunculkan pada step header.	null
description	string		Untuk mengeset sub judul yang akan ditampilkan step header (dibawah judul).	null
icon	string		Untuk mengeset judul yang akan ditampilkan pada button navigasi step.	null
dynamicFormWizardType	number		Properti untuk menyetel tema layout wizard. Terdapat 4 pilihan, jika di isi 1 atau 4 maka akan tampil wizard horizontal, jika diisi 2 atau 3 makan maka akan tampil wizard vertical. Penempatan properti ini pada dibawah object crudOpt seperti pada contoh gambar.