Custom HTML in forms and dashboards

Before you start

• Smart Script: the language of Beezr

Custom HTML puts your own markup where Beezr’s own components do not fit: a scoring card, a checklist that saves its answers, a panel that shows data from the record. It exists on forms and on dashboards. They work differently, so each has its own section.

How does a Custom HTML component work on a form?

On a form the template is a Smart Script that builds an HTML string. Beezr fills in the record’s data first, runs the script, and shows the string it ends with. Inputs you mark with data-field are saved with the record.

1. Open Forms and choose the form.
2. Add a Custom HTML component to a block. Its panel is called HTML Custom Component.
3. Write the script under HTML Template.
4. Click Check Configuration. It lists missing fields, duplicate data-field names and other issues.
5. Click Save.

○ ○ ○Beezr

×

The Syntax Reference lists the tokens and the data-field attribute.
HTML Template is where the script goes.
Write captured inputs to another module turns on cross-module mode.
Check Configuration reviews the template before you save.

A small component

This shows the contract’s title and saves a reviewer’s note into the field reviewer_note of the same module.

var title = $title$;
var rootId = "review_card_1";
var html = [];
html.push('<div id="' + rootId + '">');
html.push('<p>Reviewing: <strong>' + title + '</strong></p>');
html.push('<label>Reviewer note</label>');
html.push('<textarea data-field="reviewer_note" rows="3"></textarea>');
html.push('</div>');
html.join("");

• $title$ is replaced before the script runs. Text arrives in quotes, so var title = $title$; is a complete line. See Tokens and placeholders.
• The last expression, html.join(""), is the HTML the form shows.
• data-field="reviewer_note" is the capture. Beezr saves the textarea’s value to that field when the form is saved, and fills it again when the record opens.

Tokens are filled when the form loads, with the record as it was then.

Patterns that keep a component tidy

• Match names exactly. A data-field is the field’s system name, not its label.
• Give the component its own root element with a unique id, and look up elements inside it. Several components can share one form.
• Use plain form controls: text, number, date, checkbox, radio, textarea and select. Checkboxes and multiple selects save as comma-separated text.
• Show a calculated value in a read-only input with a data-field, and set its value from your script. The final value is saved.
• Keep CSS inside a style tag under the root element.
• Guard script that runs in the browser with a flag such as data-bound, so it binds once.

How do I save the inputs to another module?

Turn on Write captured inputs to another module to save a child record, for example a review for each contract.

Setting	What to choose
Target Module	The module that receives the values
Relation Field (in Target Module)	The field there that stores this record’s key
Parent Key Source	Leave it on Use Primary Key (default) unless another field holds the key
Prefill Mappings	Parent fields copied into a new child record. Click + Add Mapping for each pair

Then every data-field names a field of the target module. When the form opens, Beezr looks for the child record whose relation field equals this record’s key. If it finds one, the inputs show its values. If not, they start empty, and the prefill mappings fill them. When the form is saved, Beezr creates or updates the child record and writes the relation field itself,.

$field$ tokens still read the parent record.

How do I use Custom HTML on a dashboard?

On a dashboard the block is HTML and CSS with ${variables}. Each variable gets a Smart Script on the Variables tab, and its result replaces the variable. The steps are on Report and Custom HTML blocks. A good script for a variable follows the same rules as a metric: end with an expression, parse numbers, guard empty results. Script a dashboard metric has examples.

Tip from a Beezr Consultant

Name CSS classes after what they show, such as overdue-note. The CSS applies to the whole dashboard page when people open it.