Profinity Dashboard Development Guide

The Profinity Dashboard system allows you to create dynamic, data-driven user interfaces using YAML configuration files. This guide will help you understand how to structure your dashboard, configure components, and implement data bindings.

CUSTOM DASHBOARDS ARE NEW

This feature is a new release that we are providing in Early Adopter form to our V2 Profinity clients. If you are having any issues, please let us know either via the feedback form or support system.

Prerequisites

Before creating dashboards, you should have:

Basic understanding of YAML syntax
Knowledge of CAN bus communication (for DBC files when using Custom Components)
An understanding of the DBC Messages and Signals produced by your device (when using Custom Components)

Getting Started

Profinity dashboards can be used in two main contexts:

Custom Components

Dashboards are used with Custom Components to create component-specific interfaces. To create a dashboard for a Custom Component:

Create a new Custom Component in the Profinity system
Define your CAN messages and signals in the DBC editor or load an existing DBC file
Create your dashboard layout in the YAML editor or load an existing dashboard
Validate your configuration - the system will check against the schema
Deploy your dashboard - once valid, your dashboard will be available for use

For more information on Custom Components, see the Custom Components documentation.

Profile Dashboards

Dashboards can also be used as profile-level home pages that replace the standard home page. To create a Profile Dashboard:

Create your dashboard layout in a YAML file
Upload the dashboard file via Profile settings ("Upload Default Dashboard" option)
The dashboard will replace the standard home page when the profile is active

For more information on Profile Dashboards, see the Profile Dashboard documentation.

Your First Dashboard: "Hello World"

When you open the dashboard editor, you'll see a template sample already loaded. You can also click the "New Template" button at any time to reset to the Hello World template. This template provides a simple starting point for creating your dashboard.

The Hello World Template

The template that loads when you click "New Template" or when you first open the editor looks like this:

dashboard:
    items:
        - row:
            direction: vertical
            items:
            - group:
                class: statscontainer
                items:
                    - pill:                        
                        icon:                      
                            image: nav_custom_active.svg
                        items:
                        - pillgroup:
                            items:
                            - value:
                                label: CUSTOM COMPONENT

This template creates a simple dashboard with: - A row container (vertical layout) - A group with styling (statscontainer class) - A pill component with an icon - A value readout showing "CUSTOM COMPONENT"

This is your starting point! You can modify this template to add your own components and data bindings.

Modifying the Template

Starting from the Hello World template, let's add a data binding to connect it to real component data. Here's how you can modify the template to show actual data:

dashboard:
    items:
        - row:
            direction: vertical
            items:
            - group:
                class: statscontainer
                items:
                    - pill:                        
                        icon:                      
                            image: nav_custom_active.svg
                        items:
                        - pillgroup:
                            items:
                            - value:
                                label: CUSTOM COMPONENT
                                precision: 1
                                bind:
                                  - target: value
                                    source: '{COMPONENT_NAME}.YourSignal.YourValue'

The bind section connects the value to live data from your component. Replace {COMPONENT_NAME} with your actual component name (this is automatically replaced by the system), and YourSignal.YourValue with the actual signal path from your DBC file.

Adding More Components

You can expand the template by adding more components. For example, to add multiple readouts:

dashboard:
    items:
        - row:
            direction: vertical
            items:
            - group:
                class: statscontainer
                items:
                    - pill:                        
                        icon:                      
                            image: nav_custom_active.svg
                        items:
                        - pillgroup:
                            items:
                            - value:
                                label: TEMPERATURE
                                precision: 1
                                bind:
                                  - target: value
                                    source: '{COMPONENT_NAME}.Temperature.Value'
                            - value:
                                label: PRESSURE
                                precision: 2
                                bind:
                                  - target: value
                                    source: '{COMPONENT_NAME}.Pressure.Value'

What You've Learned

Congratulations! You've started working with dashboards. You now know:

✅ The Hello World template structure that loads when you click "New Template"
✅ How to modify the template to add your own components
✅ How to add data bindings to connect dashboards to real component data
✅ How to expand the template with additional components

Next Steps

Now that you've created your first dashboard, you're ready to learn more:

Core Elements - Learn about the four core dashboard elements and how to structure more complex layouts
Data Binding - Master connecting your dashboard to real-time data from your components
Examples - See more examples from simple to complex
Component Reference - Explore all available components you can use in your dashboards

Schema Validation

The dashboard editor uses a schema to validate your YAML dashboard file. The editor provides:

Syntax highlighting and auto-complete for better development experience
Real-time validation errors to catch issues immediately
Schema compliance checking - invalid dashboards cannot be loaded
Save protection - prevents invalid configurations from being saved

This ensures that your dashboard configurations are always valid and will work correctly when deployed.

Viewing Dashboard Source

All the dashboards in Profinity are built using this dashboard system. Sometimes the best way to learn is to use our examples as a basis. To enable that, you can access the source YAML definition of any existing dashboard, by clicking on the small pencil icon on the top right on the toolbar if you have the security setting to change settings in Profinity.