Skip to main content

​
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.
PropertyTypeRequired?Description
idStringYesThe unique identifier for the node. For compound trees, this will be prefixed (e.g., group-123, cat-456).
nameStringYesThe primary display text shown to the user in the list. This is generated by the backend from the option_text_fields.
textStringYesAn alias for name. Both are provided for compatibility.
nodeObjectYesThe 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.
PropertyTypeRequired?Description
childrenArray<Node>YesAn 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.
_hasChildrenBooleanYesCrucial 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.
PropertyTypeRequired?Description
_selectableBooleanYesDetermines if the user can select this node. If false, the frontend will disable the checkbox/radio and apply a “disabled” style.
_typeStringOptionalA 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'.
_expandedBooleanYesAn 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.
PropertyDescription
isOpenA reactive boolean that tracks if the node is currently open or closed in the UI. It’s initialized from _expanded.
_isLoadingChildrenA flag used during lazy loading to show a spinner while the frontend is fetching the node’s children.
_childrenLoadedA 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.
PropertiTipeWajib?Deskripsi
idStringYaPengenal unik untuk node. Untuk pohon gabungan (compound tree), ID ini akan memiliki awalan (misal, group-123, cat-456).
nameStringYaTeks utama yang ditampilkan kepada pengguna di dalam daftar. Dihasilkan oleh backend dari konfigurasi option_text_fields.
textStringYaAlias untuk name. Keduanya disediakan untuk kompatibilitas.
nodeObjectYaObjek 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.
PropertiTipeWajib?Deskripsi
childrenArray<Node>YaSebuah 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.
_hasChildrenBooleanYaPenting 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.
PropertiTipeWajib?Deskripsi
_selectableBooleanYaMenentukan apakah pengguna dapat memilih node ini. Jika false, frontend akan menonaktifkan checkbox/radio dan menerapkan gaya “disabled”.
_typeStringOpsionalPengenal string untuk tipe node (misal, 'group', 'category'). Frontend menggunakan ini untuk menampilkan ikon yang berbeda untuk tipe item yang berbeda. Defaultnya adalah 'node'.
_expandedBooleanYaInstruksi 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.
PropertiDeskripsi
isOpenSebuah boolean reaktif yang melacak apakah node saat ini terbuka atau tertutup di UI. Nilai awalnya diambil dari _expanded.
_isLoadingChildrenSebuah penanda yang digunakan selama lazy loading untuk menampilkan spinner saat frontend sedang mengambil data turunan dari node.
_childrenLoadedSebuah penanda untuk mencegah frontend mengambil ulang data turunan yang sudah pernah dimuat dalam skenario lazy-loading.