Designing Dashboards
The dashboard designer lets you create and arrange layouts for any display surface — from wall-mounted TVs to handheld tablets.
Dashboard Toolbar & Side Panel
The main designer shell has three areas:
Toolbar
| Control | Description |
|---|---|
| Home | Navigate back to the main POS home |
| Menu Toggle | Open/close the side panel |
| Hide Menu | Collapse the side menu bar |
| Theme Toggle | Switch between light and dark themes |
| API Status | Shows current connection status |
| Dashboard Switcher | Toggle buttons for switching between saved dashboards |
Designer Tools (Side Panel)
| Button | Description |
|---|---|
| Add Dashboard | Create a new blank dashboard |
| Edit Current | Open the dashboard properties dialog for the active layout |
| Save Required | Appears when changes are pending; saves the current layout to the server |
| Refresh | Reload the current dashboard from the server |
| Reset | Return to the dashboard selection view |
Widget Palette (Side Panel — Admin Only)
In admin mode, the side panel displays an accordion with four widget categories. Drag any widget from the palette onto the grid to add it:
| Category | Description |
|---|---|
| Analytics | Charts and data visualization widgets |
| Orders | Live order feeds, order totals, client info |
| Menus | Menu sections, categories, specials, products |
| Marketing | Images, text, YouTube videos, iframes |
Creating a Dashboard
Click Add Dashboard to open the dashboard properties dialog.
Settings Tab
| Field | Type | Description |
|---|---|---|
| Name | Text | Display name for the dashboard |
| Type | Toggle Buttons | Menu, Report, Seating/Table Layout, or Order |
| Enabled | Toggle | Whether the dashboard is active and selectable |
| Icon | Text | MDC icon name for the dashboard |
Background
| Field | Type | Description |
|---|---|---|
| Background Color | Color Picker | Sets the dashboard background color |
| Opacity | Slider (0–100) | Overall opacity of the background layer |
| Blend Mode | Dropdown | CSS blend mode for background image + color (normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity) |
| Background Image | File Uploader | Upload an image to AWS S3 for use as the background |
Dimensions
| Field | Description |
|---|---|
| Width | Pixel width for the target display (e.g., 1920px, 100%) |
| Height | Pixel height for the target display (e.g., 1080px, 100%) |
These dimensions ensure the layout fits the target screen. For TV displays and customer kiosks, enter the expected pixel resolution. For browser-based dashboards, use percentage values.
Grid Columns and Rows
| Field | Description |
|---|---|
| Columns | Number of grid columns (determines the width of each grid block) |
| Rows | Number of grid rows (determines the height of each grid block) |
More columns and rows produce smaller individual grid cells, allowing more widgets on the screen. Fewer columns/rows produce larger cells.
Permissions Tab
After saving the dashboard, the Permissions tab appears. It uses the Client Type Selection component to control which user types can view the dashboard:
| Setting | Effect |
|---|---|
| All unchecked | Dashboard is visible to all user types |
| Specific types selected | Only selected client types can view the dashboard |
Widget permissions still apply to data access, even if the dashboard is visible.
Working with the Grid
Adding Widgets
In admin mode, drag a widget from the side panel palette onto the grid. The widget is placed at the drop location and can be resized by dragging its edges.
Grid Behavior Settings
In designer mode, the grid settings card (bottom of the side panel) provides three toggles:
| Setting | Effect |
|---|---|
| Swap | Widgets can swap positions when dragged over each other |
| Swap Items While Dragging | Widgets swap immediately during the drag motion (not just on drop) |
| Push Items | Widgets push neighboring widgets out of the way when dragged |
These settings are toggled in real time and applied to the grid immediately.
Editing and Deleting Widgets
In designer mode, each widget shows a menu icon in its top-right corner:
| Action | Description |
|---|---|
| Settings | Opens the widget configuration dialog |
| Delete | Removes the widget from the grid (triggers a save) |
Saving Changes
As you modify the grid (add, remove, resize, reposition widgets), the system marks the dashboard as changed. The Save Required button appears in the side panel. Click it to persist the layout to the server. Changes are also saved automatically when you move or resize a widget.
Locked Mode
To display a dashboard in a read-only state (e.g., on a TV or customer kiosk), append ;locked=true to the URL:
http://yoursite.com/menu-board;id=1;locked=true
In locked mode:
- Dragging and resizing are disabled
- Widget menus and designer tools are hidden
- Only the rendered widget content is displayed
For details on configuring individual widgets, see Widgets.