Building Your Own Dashboard

Every dashboard in KvantumCI is editable. You can add and remove widgets, change how many columns a row has, drag widgets and whole rows into a new order, and create as many tabs as you need. The five tabs that ship are a starting point, not a fixed layout.

The same tools work on your main dashboards and on the per-project analytics dashboards.

Turning on edit mode

Nothing on a dashboard can be changed until you enter edit mode. Click Edit Dashboard in the toolbar at the top of the page. The button switches to Done, extra controls appear around each row, and the widgets themselves stop responding to clicks so that dragging them never navigates away.

If a tab is empty, the page tells you so and offers an Edit Dashboard button directly.

Edit mode is not remembered between visits. Every time you open a dashboard it starts in normal viewing mode.

Rows and columns

A dashboard tab is a stack of rows. Each row is divided into cells, and each cell holds one or more widgets.

Adding a row. With edit mode on, click Add Row at the bottom of the tab. You are asked to pick a column count first: 1, 2, 3 or 4.

Changing a row's columns. Hover over a row in edit mode and a small vertical 1 / 2 / 3 / 4 selector appears to its right. Click a number to re-split the row. Widening a row keeps your existing widgets in place and adds empty cells on the end. Narrowing a row drops the trailing cells, and any widgets in them, without asking for confirmation.

Removing a row. Hover over the row and click the remove control on its left. This is immediate and takes the row's widgets with it.

Reordering rows. Each row has a grip handle on its left in edit mode. Drag the handle to move the row up or down. Dragging the row body itself does nothing, which keeps accidental drags from happening while you work inside a row.

Adding a widget

Click an empty cell (it shows a dashed Add widget placeholder) to open the widget picker.

The picker splits widgets into Small Widgets and Large Widgets. Small widgets are single-number cards. Large widgets are charts, tables and multi-value panels. Use the search box at the top to filter by widget name or description.

Hovering a widget in the list renders a live preview of it on the right, using your real data, so you can see what you are about to add before you add it. Widgets that draw from live platform data are marked with an API badge.

Click a widget to place it in the cell and close the picker.

Stacking small widgets

A cell can hold more than one widget, as long as they are all small. Once a cell has a widget in it, an Add to stack control appears, and the picker opens in stacked mode where only small widgets are offered. A cell holds at most four stacked widgets. Large widgets always occupy a cell on their own.

Removing and moving widgets

Removing. In edit mode each widget carries a small remove control in its top-right corner. Clicking it takes the widget out immediately, with no confirmation.

Moving. Each widget has a grip handle that appears when you hover over it in edit mode. Drag the handle to move the widget into another cell. As you drag, valid drop targets highlight and invalid ones are outlined in red, so you can see before you release whether the drop will be accepted.

Three rules govern where a widget can land:

• A cell already holding four widgets will not accept another one.
• Dropping a widget onto another widget in the same cell reorders the stack.
• If either the widget you are dragging or the cell you are dropping onto involves a large widget, and the target cell is occupied, the two cells swap their contents instead of merging.

Tabs

The tab bar sits above the dashboard. In edit mode each tab gains controls for renaming, changing its icon, deleting and reordering.

Creating a tab. Click New Tab. The new tab is created empty, given a placeholder name, and becomes the active tab so you can start building immediately.

Renaming a tab and changing its icon. Hover a tab in edit mode and click the pencil. The name becomes an editable field: type a new name and press Enter, or click the confirm control. A blank name is rejected. While the name is being edited, clicking the tab's icon opens an icon picker; choosing an icon applies it as soon as you save the name.

Deleting a tab. Hover a tab in edit mode and click its remove control. There is no confirmation. You cannot delete the last remaining tab, so the control is hidden when only one is left. If you delete the tab you are currently viewing, the first remaining tab opens.

Reordering tabs. Drag a tab's grip handle left or right.

Starting over

Two reset controls sit in the toolbar, available only in edit mode. Neither asks for confirmation.

Clear empties the tab you are currently viewing. Every row and widget on it is removed, the tab itself stays.

Use Default discards all of your tabs across the whole dashboard and restores the five that ship with KvantumCI. This is not limited to the tab you are looking at, so use it only when you want to start the entire dashboard again from scratch.

How your layout is saved

There is no Save button. Every change you make, adding a widget, dragging a row, renaming a tab, is saved automatically about a second after you stop making changes. Moving to another page inside KvantumCI within that second saves immediately rather than waiting, but closing the tab or hard-refreshing the browser does not, so a change made in the last second before that would be lost. Leaving edit mode is not what saves your work; the work is already saved.

Layouts are stored on your tenant, not in your browser, so the same layout follows you to any browser or machine you sign in from. It is shared across your tenant rather than being personal to your user account.

A brand new tenant has no stored layout at all. Until you make your first edit, the dashboard shows the five default tabs without having saved anything; your first change is what writes a layout for the first time.

Your main dashboard layout and your project analytics layout are stored separately and never overwrite one another.

For the exact shape of the stored layout, see Saved Layout Format.