# Form 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&#x26;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&#x26;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&#x26;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&#x26;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](https://saba-framework.gitbook.io/saba-framework-documentation/examples/dynamic-form "mention"). 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&#x26;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&#x26;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&#x26;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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://saba-framework.gitbook.io/saba-framework-documentation/examples/form-wizard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.