For the complete documentation index, see llms.txt. This page is also available as Markdown.

Dashboard Overview

DashboardJS is a tree of components. Each one owns its own DOM node, its own slice of config, and its own children.

Dashboard                     the root, and what you construct
β”œβ”€β”€ UserProfile               the sidebar profile card
β”œβ”€β”€ Tabs                      the tab strip
β”‚   └── Tab                   one per entry in config.tabs
β”‚       β”œβ”€β”€ DataManager       rows, paging, sorting, filtering, fetching
β”‚       β”œβ”€β”€ Sorting           the sort control
β”‚       β”œβ”€β”€ Filtering         the keyword box
β”‚       β”œβ”€β”€ ViewSwitcher      Cards / List toggle
β”‚       β”œβ”€β”€ Paging            the pager
β”‚       └── Recordset         the grid or list of records
β”‚           └── Record        one per row
β”‚               β”œβ”€β”€ Field     one per entry in fields
β”‚               └── Action    one per entry in actions
└── FieldHeaderContainer      column headers, List view only

Every box in that tree except DataManager inherits from Component, so setText, addClass, getChild, remove and the rest work the same way on all of them.

The config mirrors the tree

Where a component sits in the tree is where its options sit in the config:

Component
Configured by

Dashboard

the top level β€” language, profile, initialActiveTab

Tab

an entry in tabs

Field

an entry in fields

Action

an entry in actions

Walking the tree

Inside a callback you rarely need to walk anything β€” the context object hands you component, record, el and dashboard directly.

Lifecycle

  1. init β€” config is copied onto the component; deprecated keys are rewritten; computed properties are set aside.

  2. render β€” the template is cloned and the DOM node created.

  3. processEvents β€” visibility, icon and url are resolved, click handlers are attached, then onRender fires.

  4. mount β€” the component is appended to its parent, and onMount fires.

  5. removal β€” remove() consults onBeforeRemove, then delete() detaches the node.

A record is built once for Card view and once for List view, so onRender fires for each β€” keep it idempotent.

The classes

Class
Page

Component

Dashboard

Recordset

DataManager

Last updated