> 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/fundamental/ui-render-by-json.md).

# UI Render by JSON

Pendekatan Saba Framework dalam Pengkondisian UI Melalui File JSON.

Penyimpanan properti pada query string memiliki keterbatasan tertentu dalam mengkondisikan UI halaman. Ini karena kompleksitas dan jumlah kondisi yang mungkin terjadi pada halaman bisa sangat besar, dan query string memiliki keterbatasan dalam menangani semua variabel atau properti yang mungkin diperlukan.

Dengan menggunakan metode itu, sering kali ada keterbatasan dalam mengelola keadaan halaman dengan cara yang efisien atau terstruktur. Karenanya, Saba framework telah memperkenalkan pendekatan berbeda dengan <mark style="color:green;">**menggunakan file JSON terpisah**</mark> untuk menyimpan atribut-atribut yang berkaitan dengan suatu halaman. Ini memungkinkan untuk menentukan kondisi dan tampilan halaman secara lebih terperinci dan terstruktur, tanpa keterbatasan yang dialami oleh menyimpan properti pada query string.

Dengan memisahkan informasi atribut ke dalam file JSON terpisah untuk setiap halaman, kompleksitas dan variasi kondisi pada tampilan halaman dapat diatur dengan lebih baik dan lebih terkelola. Sehingga, framework ini memungkinkan pengembang untuk memiliki kontrol yang lebih baik terhadap tampilan dan perilaku halaman berdasarkan file JSON yang sesuai dengan nama dan lokasi path URL halaman tersebut.

{% hint style="info" %}
Misalnya, jika kita ingin membuat halaman Mahasiswa, path URL-nya akan menjadi <http://localhost:7010/dyn_pages/demoMahasiswa>, dan file **demoMahasiswa.json** harus disimpan dalam folder <mark style="color:blue;">**/pageAttributes/demoMahasiswa.json**</mark>. Jika ingin menambahkan subfolder, path URL-nya akan menjadi <http://localhost:7010/dyn_pages/folder_baru/demoMahasiswa>, dan file **demoMahasiswa**.json harus berada dalam folder <mark style="color:blue;">**/pageAttributes/folder\_baru/demoMahasiswa.json**</mark>.
{% endhint %}

Ketika halaman dimuat, framework akan mencari file JSON terkait dan menggunakan informasi di dalamnya untuk merender (menampilkan) semua properti yang didefinisikan dalam file .json tersebut sesuai dengan kebutuhan halaman.