Add reports and custom HTML to a dashboard

Before you start

• Create a dashboard and choose who sees it

A dashboard can hold more than numbers. A Report block shows a report you already saved, and a Custom HTML block shows a panel you design yourself. Both sit in a section like a metric does.

Add a report block

1. Open the dashboard in the Page builder.
2. Drag Report into a section, or click Add block and choose Report. The block says Choose a report.
3. In the right panel, click a report under Report. Use Search reports to find it.
4. Change the Title if you want a different heading above the report.
5. Click Save.

The canvas draws a placeholder with the report’s name and “Drawn with live data on the dashboard”. The real chart or table shows to people in App space. A new block takes its title from the report. Label keys work in the Title, so the heading can follow each person’s language.

Save a report before adding it to a block. Choose an existing report from the list.

On the Style tab, Transparent background blends the report into the section instead of putting it on a card.

Add a custom HTML block

Use a Custom HTML block for custom content: a status banner, a checklist, a row of links.

1. Drag Custom HTML into a section. The code drawer opens on the HTML tab.
2. Write your markup. Put each changing value in ${name} form, for example ${overdue}.
3. Open the Variables tab. Each variable you wrote is listed there with an empty script box.
4. Write a Smart Script for each variable. The script’s result replaces the variable.
5. Check the Preview pane beside the code.
6. Close the drawer and click Save.

For example, this panel tells people how many invoices are overdue. The HTML tab holds:

<div class="overdue-note">
  <strong>${overdue}</strong> invoices are overdue.
</div>

The CSS tab holds:

.overdue-note { padding: 14px; font-size: 15px; }

And the script for the overdue variable, on the Variables tab, is:

var n = parseInt(FunctionManager.evaluateCount("cm_invoices", "WHERE cm_invoices.status = 'Overdue'"), 10);
isNaN(n) ? 0 : n;

The same script rules apply as for a metric: no return, convert text with parseInt or parseFloat, and guard lists that can be null. Show a number with a metric block has the detail.

What do the drawer tabs do?

Tab	What it holds
HTML	Your markup, with ${variables}
CSS	Styles for the block
Style links	Links to stylesheets. They load on the live dashboard
Variables	One script per variable, with a count on the tab

The note at the top of the drawer says “Changes apply as you type.”

On the Content tab, the Name is only for you, in Layers. Edit code reopens the drawer. The Style tab has Transparent background, which is on by default for a Custom HTML block. Turn it off for a Background colour or a Gradient.

Watch out

The builder keeps your CSS inside its own block, so the canvas looks tidy. On the live dashboard the same CSS applies to the whole page. Give your classes specific names, such as overdue-note, and avoid rules on plain tags like div or h2.

What did I get?

A dashboard with a chart or table from your reports and a panel of your own, each in a section. Use and switch dashboards shows what people see.