---
title: Creating a Dashboard
description: Step-by-step guide to creating a dashboard in ControlCom Connect: the create dialog, the editor and its widget palette, adding widgets, and publishing.
source: https://documentation.controlcomtech.com/platform/dashboards/creating
---

# Creating a Dashboard

A dashboard is a grid of widgets that you assemble in the dashboard editor and publish to your Organization. This guide
walks the whole path once: create the board, learn the editor, add and size two widgets, publish the change, and open
the result the way everyone else in your Organization will see it.

> **Workflow Stage: Visualize**

## What you will build

You will build a board called Building Operations for a facilities Organization: a full-width heading that labels the
board, a note card that explains what the board covers, and a graph plotting a power reading from one of your Devices.

The heading and the note render static content, so those steps work on a brand new Organization that has no Devices
reporting yet. The graph binds a Device Variable, so it needs a Device with readings; if your hardware is not online
yet, skip that step and come back once data arrives.

## Before you start

Creating a dashboard requires the Create Dashboard permission, which the Administrator role has by default.

Widgets that plot values need the earlier stages of the workflow finished: your hardware Connected through the Edge
Server, readings Collected from it, and those readings Stored in the platform. The board itself does not wait on any of
that, so it is reasonable to lay out a dashboard first and bind the widgets to Variables once data starts arriving.

## Video walkthrough

Video: [Creating Your First Dashboard in ControlCom Connect](https://www.youtube.com/watch?v=2rz_z_vWYaw)

Part of the Visualize stage in the ControlCom Connect data workflow.

## Creating the dashboard

Open **Visualization → Dashboards** in the sidebar. The list shows every board in the Organization, with tabs for
**Public**, **My Dashboards** and **Components**, a name search, and filters for status, Device and owner.

![The Dashboards list in ControlCom Connect showing two existing boards with search and filter controls](https://documentation.controlcomtech.com/images/dashboards/01-dashboards-list.png)

*The Dashboards list, with the Dashboard button in the top right*

Click **Dashboard** in the top right. The create dialog asks for four things:

| Field                      | What it does                                                                                   |
| -------------------------- | ---------------------------------------------------------------------------------------------- |
| **Name of your dashboard** | The name shown in the list, the breadcrumb and search.                                         |
| **Lock Dashboard Updates** | When on, only you can edit the board. Leave it off for a board your team maintains together.   |
| **Public**                 | On by default. Public boards can be viewed by every user in the Organization.                  |
| **Limited to Device**      | Scopes the board to a single Device. Leave it on All Devices for a board that spans your site. |

![The create dashboard dialog with the name Building Operations entered](https://documentation.controlcomtech.com/images/dashboards/02-create-dashboard-modal.png)

*Naming the board before creating it*

Click **Create**. The board is created and ControlCom Connect opens it directly in the editor.

## The dashboard editor

![The empty ControlCom Connect dashboard editor with the Add Widget palette on the left and an empty canvas](https://documentation.controlcomtech.com/images/dashboards/03-dashboard-editor.png)

*The editor on a new board: widget palette on the left, empty canvas on the right*

The top bar holds **Exit**, the board name (click the pencil to rename it), and three tabs. **Dashboard** is the canvas
you design on, **Parameters** defines values the board can be filtered by, and **Layouts** manages the per screen size
layouts. On the right, **History** lists previously published versions and can restore one, **Preview** opens the
published board in a new tab, and **Publish** saves your work.

The row underneath holds the widget actions (copy, duplicate, delete, group, find and replace, and move), the
breakpoint toggles for ultra wide, desktop, tablet and mobile, a dark mode toggle, the refresh interval, and the
**View** and **Edit** switch that flips between designing the board and seeing it as a viewer does.

The left rail switches the panel between **Widgets**, **Elements**, **Branding**, **Tools** and **Settings**. The
**Widgets** panel is the Add Widget palette, which carries 15 widget types in four groups. Press `/` to jump into its
search box.

| Group                 | Widgets                                          |
| --------------------- | ------------------------------------------------ |
| **Display**           | Generic, Status, List, Asset Table, Radial, Text |
| **Visualization**     | Graph, Diagram                                   |
| **Interactive**       | Control, Menu                                    |
| **Layout & Advanced** | Section, Logic, Component, IFrame, Group         |

Most Display and Visualization widgets read a Device Variable: Status shows a current value with a label, Radial draws
it as a gauge, and Graph plots a time series. Asset Table fills itself from your Assets, grouped by Location. Control
sends commands back to a Device, and Diagram embeds an interactive HMI diagram. Section, Text and Menu need no data at
all, which is why this guide starts with them.

The canvas itself is a 12 column grid on desktop. Widgets snap to it, so boards stay aligned as they grow.

## Adding widgets

Click a widget in the palette, or drag it onto the canvas. Either way the widget lands at the bottom of the grid and
its settings panel opens straight away.

Start with **Section**, under Layout & Advanced. A Section spans the full grid width and gives the board a heading. Set
its **Name** to `Campus Overview` and click **Save**.

Now add **Text** from the Display group. Its settings panel is split: a live preview of the widget on the left, and the
settings on the right.

![The Text widget settings panel showing General Settings, Content and Text Formatting sections with a live preview](https://documentation.controlcomtech.com/images/dashboards/04-widget-settings.png)

*Text widget settings, with the live preview updating as you type*

**General Settings** holds the widget **Name**, which appears as the small label above the content. Under **Content**,
leave **Bind to Variable** off to write fixed text in the **Text Content** box, or switch it on to pull the value from
a Device Variable instead. **Text Formatting** controls font size, weight, alignment, italics and color, and **Card
Appearance** covers the widget background and border.

Set the name to `Board Notes` and the text content to a short description of the board, then click **Save**. The panel
closes and the widget appears on the canvas.

New widgets arrive at a default size, and the Text widget arrives one column wide, which is narrow for a sentence. To
change that, click the move button in the toolbar row (or press `Shift+M`), drag the widget by the handle in its bottom
right corner until it is the size you want, then click **Done**. Move mode also lets you drag widgets to reposition
them.

## Adding a graph

Now for a widget that reads data. Add **Graph** from the Visualization group and set its **Name** to the reading it
will plot, such as `Utility Demand`.

A graph plots one or more series, each bound to a Device Variable. Under **Series**, click **Add Serie**, then click
the **Variable** button to open the picker. It browses your Organization in three columns: pick the Device, then the
Variable, and confirm. Each series has an aggregation (average by default), a line or area type, and fill options, and
the preview on the left redraws with real data as you configure it.

![The Graph widget settings panel with a bound Variable, aggregation and fill options, and a live preview of the curve](https://documentation.controlcomtech.com/images/dashboards/08-graph-widget-settings.png)

*The Graph settings: the series bound to a Variable, with the live preview on the left*

The panel's other cards add more: **Thresholds** draws limit lines on the chart, **Trend Prediction** extends the
series with a forecast, **Weather Series** overlays outside weather for a Location, and **Computed Series** derives a
series from the others. Click **Save**, then resize the graph in move mode so the curve has room to read.

![The dashboard editor canvas with a Section heading, a note card and a Utility Demand graph showing a daily load curve](https://documentation.controlcomtech.com/images/dashboards/05-widget-added.png)

*All three widgets in place: the heading, the resized note card and the graph*

## Publishing your changes

Everything you have done so far lives in the editor only. Click **Publish** to write it to the platform.

![The Publish Dashboard dialog with a comment describing the change](https://documentation.controlcomtech.com/images/dashboards/06-publish-dashboard.png)

*Every publish is recorded with a comment you can find again in History*

The dialog asks for a **Comment**. It is worth writing something specific, because that comment is what identifies the
version later in **History**, where you can restore it.

If someone else published the same board while you were working, ControlCom Connect stops and tells you so rather than
overwriting their work. You can load their version and lose your edits, or overwrite it with yours.

## Viewing the dashboard

Click **Exit** to return to the list, then open the board by name.

![The published Building Operations dashboard in view mode with its heading and notes widget](https://documentation.controlcomtech.com/images/dashboards/07-dashboard-view.png)

*The published board as everyone with access sees it*

The header under the title reports the widget count, the active configuration, when the board was last updated and how
often it refreshes. To the right, **Configure** opens the viewing options, **Report** generates a report from the
board, and the remaining controls set the refresh interval, refresh immediately, go full screen, and reopen the editor.

Anyone with access to the Organization can open a public board from **Visualization → Dashboards**. Full screen mode
makes a board usable on a wall display in a control room.

## Next steps

Before you fill a board with charts, it helps to know which readings are worth watching. That is the job of the Analyze
stage: use the [Data Explorer](https://documentation.controlcomtech.com/platform/explorer) to query and compare your Variables, then bring the ones that matter
onto a board with the Graph, Status and Radial widgets.

For a schematic view of the equipment behind those numbers rather than the numbers themselves, build a
[diagram](https://documentation.controlcomtech.com/platform/diagrams-detail/overview) instead. Both live in the Visualize stage and can be combined, since a
dashboard can embed a diagram through the Diagram widget.

After Visualize comes the Report stage, where Assets Reports turn the same stored data into formatted compliance
reports. For the wider picture of what dashboards do and how access works, see the
[dashboards overview](https://documentation.controlcomtech.com/platform/dashboards/overview).