Advanced Tree Selector Data Format

Documentation: Data Format for the Advanced Tree Selector

This document defines the JSON object structure for a single “node” as expected by the SelectAdvancedDialog.vue component and generated by the Laravel AdminController’s tree-related methods (postGetOptionTree, postGetOptionCompoundTree).

Anatomy of a Single Node

Each item in the tree, whether it’s a root element or a child, is an object with a standardized set of properties.

{
  "id": "cat-110112",
  "name": "110112 - Mandiri Current Account",
  "text": "110112 - Mandiri Current Account",
  "node": {
    "_id": "60d5ecb0ef1a00002c004f7a",
    "accountCode": "110112",
    "accountName": "Mandiri Current Account",
    "parentId": "cat-1101"
  },
  "children": [],
  "_type": "category",
  "_expanded": false,
  "_hasChildren": false,
  "_selectable": true
}

Property Breakdown

Properties are grouped by their purpose: Core Data, Hierarchy, and UI Control. Properties starting with an underscore _ are considered metadata to control UI behavior.

Core Properties

These properties contain the essential data for the node.

Property	Type	Required?	Description
`id`	`String`	Yes	The unique identifier for the node. For compound trees, this will be prefixed (e.g., `group-123`, `cat-456`).
`name`	`String`	Yes	The primary display text shown to the user in the list. This is generated by the backend from the `option_text_fields`.
`text`	`String`	Yes	An alias for `name`. Both are provided for compatibility.
`node`	`Object`	Yes	The original, raw data object (the full database document or row). This is useful for accessing any other data associated with the item after selection.

Hierarchy Properties

These properties define the tree structure and enable lazy loading.

Property	Type	Required?	Description
`children`	`Array<Node>`	Yes	An array containing child node objects. In eager-load mode, this is fully populated. In lazy-load mode, it’s initially empty and filled by the frontend after an API call.
`_hasChildren`	`Boolean`	Yes	Crucial for Lazy Loading. A flag from the backend indicating if this node has children, even if the `children` array is currently empty. The frontend uses this to decide whether to show an expander icon.

UI State & Behavior Properties

These properties are generated by the backend to directly control how the node is rendered and behaves in the user interface.

Property	Type	Required?	Description
`_selectable`	`Boolean`	Yes	Determines if the user can select this node. If `false`, the frontend will disable the checkbox/radio and apply a “disabled” style.
`_type`	`String`	Optional	A string identifier for the type of node (e.g., `'group'`, `'category'`). The frontend uses this to display different icons for different types of items. Defaults to `'node'`.
`_expanded`	`Boolean`	Yes	An instruction from the backend. If `true`, the frontend will render this node in an expanded state by default. This is primarily used when a search result needs to reveal the full path to a nested item.

Frontend-Managed Properties

The Vue component will add these properties to the object in memory for its internal state management. They are not sent by the backend.

Property	Description
`isOpen`	A reactive boolean that tracks if the node is currently open or closed in the UI. It’s initialized from `_expanded`.
`_isLoadingChildren`	A flag used during lazy loading to show a spinner while the frontend is fetching the node’s children.
`_childrenLoaded`	A flag to prevent the frontend from re-fetching children that have already been loaded in a lazy-loading scenario.

Dokumentasi (Bahasa Indonesia)

Format Data untuk Pemilih Pohon (Tree Selector) Lanjutan

Dokumen ini mendefinisikan struktur objek JSON untuk sebuah “node” tunggal yang digunakan oleh komponen SelectAdvancedDialog.vue dan dihasilkan oleh metode-metode terkait pohon data di AdminController Laravel (postGetOptionTree, postGetOptionCompoundTree).

Anatomi Sebuah Node Tunggal

Setiap item di dalam pohon, baik elemen akar maupun turunan, adalah sebuah objek dengan properti yang terstandarisasi.

{
    "id": "cat-110112",
    "name": "110112 - Mandiri Current Account",
    "text": "110112 - Mandiri Current Account",
    "node": {
    "_id": "60d5ecb0ef1a00002c004f7a",
    "accountCode": "110112",
    "accountName": "Mandiri Current Account",
    "parentId": "cat-1101"
},
    "children": [],
    "_type": "category",
    "_expanded": false,
    "_hasChildren": false,
    "_selectable": true
}

Rincian Properti

Properti dikelompokkan berdasarkan tujuannya: Data Inti, Hirarki, dan Kontrol UI. Properti yang diawali dengan garis bawah _ dianggap sebagai metadata untuk mengontrol perilaku UI.

Properti Inti (Core Properties)

Properti ini berisi data esensial untuk sebuah node.

Properti	Tipe	Wajib?	Deskripsi
`id`	`String`	Ya	Pengenal unik untuk node. Untuk pohon gabungan (compound tree), ID ini akan memiliki awalan (misal, `group-123`, `cat-456`).
`name`	`String`	Ya	Teks utama yang ditampilkan kepada pengguna di dalam daftar. Dihasilkan oleh backend dari konfigurasi `option_text_fields`.
`text`	`String`	Ya	Alias untuk `name`. Keduanya disediakan untuk kompatibilitas.
`node`	`Object`	Ya	Objek data asli yang mentah (dokumen atau baris database lengkap). Berguna untuk mengakses data lain yang terkait setelah item dipilih.

Properti Hirarki (Hierarchy Properties)

Properti ini mendefinisikan struktur pohon dan memungkinkan lazy loading.

Properti	Tipe	Wajib?	Deskripsi
`children`	`Array<Node>`	Ya	Sebuah array yang berisi objek-objek node turunan. Dalam mode eager-load, array ini terisi penuh. Dalam mode lazy-load, array ini awalnya kosong dan diisi oleh frontend setelah panggilan API.
`_hasChildren`	`Boolean`	Ya	Penting untuk Lazy Loading. Sebuah penanda dari backend yang menunjukkan jika node ini memiliki turunan, bahkan jika array `children` saat ini kosong. Frontend menggunakan ini untuk memutuskan apakah akan menampilkan ikon ekspansi.

Properti Status & Perilaku UI (UI State & Behavior Properties)

Properti ini dihasilkan oleh backend untuk mengontrol secara langsung bagaimana node ditampilkan dan berperilaku di antarmuka pengguna.

Properti	Tipe	Wajib?	Deskripsi
`_selectable`	`Boolean`	Ya	Menentukan apakah pengguna dapat memilih node ini. Jika `false`, frontend akan menonaktifkan checkbox/radio dan menerapkan gaya “disabled”.
`_type`	`String`	Opsional	Pengenal string untuk tipe node (misal, `'group'`, `'category'`). Frontend menggunakan ini untuk menampilkan ikon yang berbeda untuk tipe item yang berbeda. Defaultnya adalah `'node'`.
`_expanded`	`Boolean`	Ya	Instruksi dari backend. Jika `true`, frontend akan me-render node ini dalam keadaan terbuka secara default. Ini terutama digunakan saat hasil pencarian perlu menampilkan jalur lengkap ke item yang bersarang.

Properti yang Dikelola Frontend (Frontend-Managed Properties)

Komponen Vue akan menambahkan properti-properti ini ke dalam objek di memori untuk manajemen status internalnya. Properti ini tidak dikirim oleh backend.

Properti	Deskripsi
`isOpen`	Sebuah boolean reaktif yang melacak apakah node saat ini terbuka atau tertutup di UI. Nilai awalnya diambil dari `_expanded`.
`_isLoadingChildren`	Sebuah penanda yang digunakan selama lazy loading untuk menampilkan spinner saat frontend sedang mengambil data turunan dari node.
`_childrenLoaded`	Sebuah penanda untuk mencegah frontend mengambil ulang data turunan yang sudah pernah dimuat dalam skenario lazy-loading.

Data View

Base Functions

References

Advanced Tree Selector Data Format

Documentation: Data Format for the Advanced Tree Selector

Anatomy of a Single Node

Property Breakdown

Core Properties

Hierarchy Properties

UI State & Behavior Properties

Frontend-Managed Properties

Dokumentasi (Bahasa Indonesia)

Format Data untuk Pemilih Pohon (Tree Selector) Lanjutan

Anatomi Sebuah Node Tunggal

Rincian Properti

Properti Inti (Core Properties)

Properti Hirarki (Hierarchy Properties)

Properti Status & Perilaku UI (UI State & Behavior Properties)

Properti yang Dikelola Frontend (Frontend-Managed Properties)

​Documentation: Data Format for the Advanced Tree Selector

​Anatomy of a Single Node

​Property Breakdown

​Core Properties

​Hierarchy Properties

​UI State & Behavior Properties

​Frontend-Managed Properties

​Dokumentasi (Bahasa Indonesia)

​Format Data untuk Pemilih Pohon (Tree Selector) Lanjutan

​Anatomi Sebuah Node Tunggal

​Rincian Properti

​Properti Inti (Core Properties)

​Properti Hirarki (Hierarchy Properties)

​Properti Status & Perilaku UI (UI State & Behavior Properties)

​Properti yang Dikelola Frontend (Frontend-Managed Properties)

Documentation: Data Format for the Advanced Tree Selector

Anatomy of a Single Node

Property Breakdown

Core Properties

Hierarchy Properties

UI State & Behavior Properties

Frontend-Managed Properties

Dokumentasi (Bahasa Indonesia)

Format Data untuk Pemilih Pohon (Tree Selector) Lanjutan

Anatomi Sebuah Node Tunggal

Rincian Properti

Properti Inti (Core Properties)

Properti Hirarki (Hierarchy Properties)

Properti Status & Perilaku UI (UI State & Behavior Properties)

Properti yang Dikelola Frontend (Frontend-Managed Properties)