UiBuilder Class

Administration UI Builder Class

---

The UiBuilder class is a sophisticated, high-level layout engine introduced in GeniXCMS v2.0.0. It is designed to construct professional, consistent, and responsive administrative interfaces — including dashboards, complex forms, data tables, and interactive stat cards — using a declarative array-based Schema approach.

---

✨ Modern ERP Interface Features

• 📌 Sticky Header System: Automated, top-pinned navigation fragment with icon, title, subtitle, and multiple action buttons that shrinks on scroll.
• 🏗️ Declarative Layouts: Define rows, columns, and nested cards using pure PHP arrays, eliminating manual HTML.
• 🎨 Rich Component Library: Native support for Stat Cards, Tables, Modals, Accordions, Charts (Chart.js), Bulk Actions, and more.
• 🗂️ Tabbed Navigation: Supports both URL-based (link mode) and JavaScript (js mode) tab switching.
• 📱 Responsive by Default: Automatically calculates Bootstrap 5 grid widths.

---

🏗️ Building an Interface

Define a nested schema and trigger the rendering engine:

// 1. Define the UI Schema
$schema = [
    'header' => [
        'title'    => _('Inventory Manager'),
        'subtitle' => _('Track and manage physical assets.'),
        'icon'     => 'bi bi-box-seam-fill',
        'buttons'  => [
            ['type' => 'button', 'name' => 'add_item', 'label' => _('New Entry'), 'class' => 'btn btn-primary rounded-pill'],
            ['type' => 'link', 'url' => '?page=export', 'label' => _('Export'), 'icon' => 'bi bi-download']
        ]
    ],
    'default_tab' => 'overview',
    'tabs' => [
        'overview' => ['label' => 'Overview', 'icon' => 'bi bi-grid', 'content' => [ /* elements */ ]],
        'settings' => ['label' => 'Settings', 'icon' => 'bi bi-gear', 'content' => [ /* elements */ ]],
    ]
];

// 2. Render
$ui = new UiBuilder($schema);
$ui->render();

---

📝 Available UI Elements

The renderElement(array $el) method dispatches based on the type key:

Layout Elements

Type	Description	Key Parameters
row	Bootstrap grid row	items (array of columns with width and content)
grid	Generic CSS grid wrapper	class, content (array of elements)
col / column	Grid column	class, content (array of elements)
card	Bootstrap shadow card	title, icon, subtitle, body_elements, footer, no_padding, header_action
stat_cards	Analytics metric row	items[] with label, value, icon, color, footer_link

Navigation & Structure

Type	Description	Key Parameters
tabs_nav	In-content tab navigation	id, style (pills/tabs), tabs[]
tab_content	Tab pane wrapper	id, active, body_elements
breadcrumb	Navigation trail	items[] with label, url, active
accordion	Collapsible sections	id, items[] with header_html, body_elements, active
modal	Bootstrap modal dialog	id, title, size, header, body_elements, footer

Data Display

Type	Description	Key Parameters
table	Sortable data table	headers, rows, empty_message
list_group	Flush list items	items[] with icon, title, subtitle, badge
chart	Chart.js integration	id, chart_type (line/bar/etc.), chart_data, chart_options, height
progress	Progress bar	label, value (0-100), color
badge	Colored badge	text, color, pill

Form Elements

Type	Description	Key Parameters
form	Form wrapper	action, method, hidden, fields, attr
input	Text/email/etc. input	name, label, input_type, value, placeholder, required
textarea	Multi-line input	name, label, value, rows, class
select	Dropdown select	name, label, options, selected, help
button	Submit/action button	name, label, icon, class, btn_type
search_group	Inline search form	name, action, placeholder, value, hidden
bulk_actions	Bulk operation bar	options (key=>label), button_label

Utility Elements

Type	Description	Key Parameters
alert	Inline contextual alert	style (success/danger/info/warning), content, dismissible
dropdown_button	Action dropdown	label, class, align, items[] with type, url, icon, label
pagination	Pagination wrapper	html (raw pagination HTML)
heading	Section title	text, icon, subtitle, class
raw / html	Raw HTML passthrough	html

---

📊 Chart Integration Example

Charts use Chart.js, automatically loaded on demand:

[
    'type'       => 'chart',
    'id'         => 'views-chart',
    'chart_type' => 'line',
    'height'     => '250px',
    'chart_data' => [
        'labels'   => ['Jan', 'Feb', 'Mar'],
        'datasets' => [[
            'label' => 'Page Views',
            'data'  => [120, 340, 280],
            'backgroundColor' => 'rgba(59,130,246,0.2)',
            'borderColor'     => '#3b82f6',
            'tension'         => 0.4,
        ]]
    ],
]

---

⚡ Rendering Methods

• render(): The primary entry point that assembles the entire interface (header + tabs + content).
• renderHeader(): Outputs only the top-level sticky header section.
• renderElement(array $el, bool $return = false): Renders a single UI element. Pass true to return HTML instead of echoing.

---

---

---

See Also

• Token Class — Securing UiBuilder forms against CSRF.
• OptionsBuilder Class — Building specialized theme/module settings panels.
• Dashboard Guide — How core GeniXCMS screens utilize this engine.