> For the complete documentation index, see [llms.txt](https://saba-framework.gitbook.io/saba-framework-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://saba-framework.gitbook.io/saba-framework-documentation/examples/form-wizard.md).

# Form Wizard

Membuat Form menjadi sebuah wizard.

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FD3LggDweuwTkQA3srgAt%2Fimage.png?alt=media&amp;token=983026d9-b286-482f-858f-a31c8ecd8d35" alt=""><figcaption><p>Form Wizard Type 1</p></figcaption></figure>

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FNF2DmMxSl65NvTV3U36Q%2Fimage.png?alt=media&amp;token=4a13247f-3b11-4176-bf82-2dbd64721080" alt=""><figcaption><p>Form Wizard Type 2</p></figcaption></figure>

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FgxFUfEBbSDbjnBIZo262%2Fimage.png?alt=media&amp;token=dfda79ca-d749-439d-b906-ceb2459da324" alt=""><figcaption><p>Form Wizard Type 3</p></figcaption></figure>

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FQsRUUNi0KV68UkP9TZDn%2Fimage.png?alt=media&amp;token=e8618c93-bc5e-4d8b-9896-35949628244c" alt=""><figcaption><p>Form Wizard Type 4</p></figcaption></figure>

Form wizard ini pada dasarnya akan melihat attribute dari dynamic form, jadi syarat nya anda harus buat dulu attributes di [Dynamic Form](/saba-framework-documentation/examples/dynamic-form.md). 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:

&#x20;

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FKiWoRr6iaohDt7SHPsZO%2Fimage.png?alt=media&amp;token=31df8136-5ef7-4e43-811b-8b2a03ef09e6" alt=""><figcaption><p>JSON attribute structure</p></figcaption></figure>

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FEHKlYscJJNURukb37hzI%2Fimage.png?alt=media&amp;token=d4f922a8-939e-4864-9c85-c93462361c54" alt=""><figcaption><p>dynamicFormWizard</p></figcaption></figure>

<figure><img src="https://4009479446-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FELbr94H26l2v1l9CCypT%2Fuploads%2FJErpVToQUlBurGYcQ40o%2Fimage.png?alt=media&amp;token=15295994-4c28-48a7-a47b-f5e76e132d6a" alt=""><figcaption><p>dynamicForm</p></figcaption></figure>

isi dari dynamicFormWizard seperti ini:

```json
"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"
          ]
        }
      ]
```

<table data-full-width="true"><thead><tr><th width="205">Property</th><th width="103">Type</th><th width="115.80000000000001" data-type="checkbox">Required</th><th width="649">Description</th><th>Default</th></tr></thead><tbody><tr><td><strong>content</strong> </td><td>array</td><td>true</td><td>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.</td><td></td></tr><tr><td>title</td><td>string</td><td>false</td><td>Untuk mengeset judul yang akan ditampilkan pada button navigasi step &#x26; step header.</td><td>null</td></tr><tr><td>subtitle</td><td>string</td><td>false</td><td>Untuk mengeset sub judul yang akan ditampilkan pada button navigasi step &#x26; step header.</td><td>null</td></tr><tr><td>showContentHeader</td><td>boolean</td><td>false</td><td>Jika di set ke false, maka title &#x26; description tidak akan dimunculkan pada step header.</td><td>null</td></tr><tr><td>description</td><td>string</td><td>false</td><td>Untuk mengeset sub judul yang akan ditampilkan step header (dibawah judul).</td><td>null</td></tr><tr><td>icon</td><td>string</td><td>false</td><td>Untuk mengeset judul yang akan ditampilkan pada button navigasi step.</td><td>null</td></tr><tr><td>dynamicFormWizardType</td><td>number</td><td>false</td><td>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.</td><td></td></tr></tbody></table>