Skip to main content

Build a UI Page with Widgets

Goal: create a custom dashboard page — charts, gauges, cameras, weather, status displays — and make it available on a UI.

A UI Page is a freeform layout composed of widgets, separate from the standard control pages. Use it for purpose-built information displays.

Before you start​

  • You're logged in as an administrator.
  • A UI exists to host the page (see Create a UI).

1. Create the page​

  1. Open UI Pages.

    Open UI Pages

  2. Create a new page and set its Page Title — the name shown in navigation.

2. Add widgets​

Add widgets to the page and arrange them. Widgets flow and resize responsively, so the layout adapts to phone, tablet, and wall-panel screens.

  • GEM ships with a library of built-in widgets (charts, gauges, cameras, weather, and more).

  • Need something bespoke? Build a custom widget in the UI Widgets developer environment — a Svelte editor with live preview that compiles widgets server-side — then add it to your page.

    Open UI Widgets

3. Preview​

Use Preview Page to open a live rendering with the actual theme. You can switch themes in the preview to check the page looks right across them.

4. Save and publish to a UI​

  1. Save Page to persist the title, enabled state, and layout.
  2. Link the page to one or more UIs so it appears in their navigation. A page can be shared across multiple UIs.

Tips​

  • Copy Page duplicates an entire page and its widgets into an independent copy — use a polished page as a template.
  • Deleting a page removes its widget assignments, not the widgets themselves.