Skip to content

How to create a custom dashboard

Create your first custom dashboard in the dashboard visual editor. No YAML knowledge is needed.

A custom dashboard can belong to either of two component types:

  • A Dashboard Component has no DBC file, so it shows tags that other components already publish. Examples are a battery management system (BMS), a motor controller, or an industrial protocol client.
  • A Custom Component has its own DBC file, so it shows the signals that the DBC file decodes from the CAN bus.

Both start from the same template dashboard and use the same editor, so the steps on this page apply to either type, and only the tag paths differ.

Prerequisites

  • One of the following components in your profile:
    • A Dashboard Component (refer to Add a Dashboard Component), plus at least one other component that publishes the tags to show
    • A Custom Component (refer to Using a Custom Component) with a CAN database (DBC) file attached, because a signal has a tag to bind only when a DBC file is attached
  • The Modify dashboards permission, which allows dashboards to be edited

To practise without a device, load the Example Profile and replay example_log.csv, as described in the Quick start guide. Add a Dashboard Component and bind to a tag such as /Prohelion BMU/DBC/PackStateOfCharge/SOCPercent, where Prohelion BMU is the name of the BMU component in the Example Profile.

Open the dashboard editor

  1. Select your Dashboard Component or Custom Component in the sidebar.
  2. Select the pencil (Edit Dashboard) icon in the menu at the right of the dashboard title bar. The editor opens in DESIGN mode, which is the visual editor, with a "CUSTOM DASHBOARD" starter dashboard.

Add your first data binding

  1. In the dashboard tree, select the value element labelled CUSTOM DASHBOARD.
  2. In the Inspector, change the label to TEMPERATURE.
  3. In the Binding section, add a binding for the value property and choose the tag for the temperature.

In a Custom Component, a source that starts with DBC/ is relative to the component that owns the dashboard, such as DBC/Temperature/Value. In a Dashboard Component, which has no DBC file, start the source with / and the name of the component that publishes the tag, such as /My Device/DBC/Temperature/Value. Data binding describes the source paths in full.

Add more components

  1. In the dashboard tree, select the pill group that holds the value.
  2. Select Add, and choose Value (in pill) in the Add component window.
  3. Set its label to PRESSURE in the Inspector and bind it to the pressure tag in the Binding section.

To see or edit the YAML for what you built, select the YAML tab, as Visual Editor reference describes.

Validate and save

  1. Fix anything listed under Schema validation issues, because the editor blocks SAVE while any entry remains.
  2. Select SAVE when the list is empty.
  3. Close the editor to see the result on the dashboard, because DESIGN is an outline and not a live preview.

The dashboard now shows your two labelled values with live data.

Next steps