Callout
A coloured info block with an icon, note, tip, warning, or success.
A coloured info block with an icon and optional title, for important information that should not blend into the surrounding form. Tone variants: note (blue), tip (orange), warning (red), success (green).
For full-width attention-grabbing banners (across the whole form), use
Banner instead.
Properties
| Property | Description |
|---|---|
titlestring default: Heads up | Optional heading shown above the body text. Leave empty for a title-less block. |
textstring default: A short callout for important information. | The body copy of the callout. |
severity'info' | 'success' | 'warning' | 'error' | 'neutral' default: info | Tone / colour of the block, info (blue), success (green), warning (orange), error (red), neutral (grey). |
JavaScript recipes
The Callout is a display block, so it has no value. Give it an Internal name
in the designer to address it with f365.control(...).
Show or hide based on another field
f365.events.onChange('Status', (status) => {
const note = f365.tryControl('OverdueNote');
if (note) note.visible = status === 'Overdue';
});
Hide a callout for everyone except admins
f365.events.onLoad(async () => {
const isAdmin = await f365.user.isInGroup('Site Owners');
const note = f365.tryControl('AdminNote');
if (note) note.hidden = !isAdmin;
});
Rewrite the body text at runtime
f365.events.onChange('Amount', (amount) => {
const note = f365.tryControl('LimitNote');
const body = note?.el()?.querySelector('p');
if (body) body.textContent = `You have $${10_000 - Number(amount)} of budget left.`;
});