kx-flex-panel

FlexPanel — Fixed Region + Flexible Content

key: "FlexPanel" · definitionId: "1011"

Also read kx-dashboard-core for envelope, screen/widget wrapper, data sources, and ViewState.

---

When to Use

Use FlexPanel when the user asks for a pinned/fixed header, footer, or sidebar. For all other layouts use Panel (definitionId: "50").

---

⚠️ Hazards

1. Fixed region is always widgets[0], main content is always widgets[1] — this applies to every orientation without exception.
2. horizontalbottom is counter-intuitive — the footer is widgets[0] even though it renders at the bottom of the screen. The layout value controls screen position, not array order.
3. Exactly 2 children — a third widget will not render.
4. "row": null, "column": null on every child layout — but rowSpan/colSpan are still required.
5. minSize is pixels, not grid units. Typical: 60–120 header, 40–60 footer, 200–280 sidebar.

---

Ordering Rule

widgets[0] → fixed region   Text, Dropdown, Button, SelectionControls,
                            NavigationMenu, DatePicker, Breadcrumbs,
                            PlayBack, DataFilter, TreeView

widgets[1] → main content   Datagrid, ChartGL, Datatable, PieJS,
                            Heatmap, Panel, Tabs, nested FlexPanel

The layout option only sets where the fixed region appears on screen:

layout	Fixed region renders at
"horizontaltop"	Top (header)
"horizontalbottom"	Bottom (footer) — widgets[0] is still first in array
"verticalleft"	Left sidebar
"verticalright"	Right sidebar

---

Schema

{
  "id": "<flexpanel-uuid>",
  "key": "FlexPanel",
  "containerId": null,
  "components": [],
  "definitionId": "1011",
  "hasOnSettingsChange": true,
  "options": {
    "version": "4.7.7",
    "Basics": {
      "Name": "",
      "layout": "horizontaltop",  // horizontaltop | horizontalbottom | verticalleft | verticalright
      "minSize": 80,               // pixel height (horizontal) or width (vertical) of fixed region
      "maxSize": 0                 // 0 = no cap; fixed region stays at minSize
    },
    "Style": { "advanced": "" }
  },
  "widgets": [
    {
      // ── widgets[0]: FIXED REGION (header / footer / sidebar) ──────────
      "id": "<fixed-widget-uuid>",
      "layout": { "row": null, "column": null, "rowSpan": 3, "colSpan": 36 },
      "component": {
        // Text, Dropdown, Button, SelectionControls, NavigationMenu, DatePicker …
        // See kx-text, kx-dropdown, kx-selectioncontrols, etc.
      }
    },
    {
      // ── widgets[1]: MAIN CONTENT (fills remaining space) ──────────────
      "id": "<main-widget-uuid>",
      "layout": { "row": null, "column": null, "rowSpan": 21, "colSpan": 36 },
      "component": {
        // Datagrid, ChartGL, Panel, Tabs, nested FlexPanel …
        // See kx-datagrid, kx-chartgl, kx-tabs, etc.
      }
    }
  ]
}