Board Configuration
Boards are configured using the Board Configuration Panel. This panel is accessible from the toolbar when viewing a page or dashboard, or from the list of dashboards or pages.
The configuration options are slightly different depending on whether you are editing a Page or a Dashboard.
Board Configuration
When editing a page or a new dashboard, you can define the board's properties including: name, layout, refresh period, device emulation, time range, and CSS properties.
Board Properties
Name
Each dashboard requires a unique name, which is displayed in the list of dashboards. Pages do not have a name.
Layout Engine
Boards can use one of two layout engines to position widgets:
| Name | Description |
|---|---|
| Exact | Positions widgets with per-pixel accuracy. |
| Grid | Aligns widgets to a 20-pixel grid. |
The Grid layout engine is useful for creating structured layouts where alignment and consistency are important. It is also ideal when first creating a dashboard or page so you can easily position widgets on a grid.
The Exact layout engine is ideal for creating composite pages where widget boundaries are meant to be invisible. Widgets can overlap, providing complete creative control.
Resizing the Display
When the display is resized, the widgets will be resized to maintain their horizontal aspect ratio. This enables a single display to be responsive and adapt to different screen sizes. When using the Grid layout engine, the widgets will be resized to fit the grid.
Refresh Period
This setting defines the default refresh rate for metrics and data-driven widgets. The value is in seconds. Choose a reasonable period to avoid unnecessary load on your services.
Device Emulation
For designing mobile interfaces on a desktop, you can emulate a mobile device. Selecting the Mobile option will resize the board to the dimensions of an iPhone 15 Pro Max. This is a design aid; boards are responsive and will adapt to various screen sizes.
Time Range
You can set a default time range for data displayed in your widgets. This can be a relative period (e.g., "last 24 hours") or an absolute time range with specific start and end dates. If the board includes a Toolbar widget, users can modify the time range.
Styling
Board Styling
You can apply custom CSS to the entire board. For example, to set the background and foreground colors, you would provide:
| Name | Value |
|---|---|
| background | red |
| color | blue |
Default Widget Styling
You can define default CSS properties that will be applied to all widgets on the board. These defaults can be overridden for individual widgets in their respective configuration panels. A color picker is available to assist in selecting colors.
Widget Frames
Widgets can be displayed with or without a visible border or "frame".
- Framed widgets are suitable for grid-based dashboards where a clear separation between widgets is desirable.
- Frameless widgets are often used in composite page designs to create a seamless, integrated user interface.
It can be helpful to enable frames during the design phase for easier layout management and then disable them for the final presentation.
Framed widgets by default have a solid background color. Frameless widgets have a transparent background. This can be overridden by defining a CSS property for the widget's .card component and set the background to transparent.
