Display form control

Info card

<ut-info-card>

Info, success, warning, error or neutral callout that can show up to six other form values, formatted for the reader, as text or a key / value list.

Officialv1.0.0 Self-contained

Download .utpkg 15 KB Install in your workspace

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

Approval check

Value the form receives

null

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

Give people the context they need right where they act: a warning that a request is over budget, a success note once checks have passed, the key facts of a request (cost centre, amount, date raised) at the top of an approval form, or plain guidance on what to do next.

Write a title and text with {{field1}} to {{field6}} placeholders and map each to another field of the form; numbers and dates are formatted for the reader's locale and line breaks are kept. The text is always plain text, never HTML, so values typed by requesters can't change the page. Switch to the key / value layout to list the mapped fields with your own labels. Each variant has its own colour and icon, and screen readers hear the variant first ("Warning: Over budget for Marketing"), so colour is never the only signal.

Good for

Over-budget or policy warning on an approval step
Key facts of a request (cost centre, amount, date) at the top of a review form
Guidance or next steps for the person filling in the form

After installing

Install the package: Info card appears in Extensibility → Form controls and in the form designer's palette under Custom.
Drag Info card onto a form, choose the variant and type the title and text.
To show other values, map Field 1 … Field 6 (context) to fields of the form and use {{field1}} … {{field6}} in the title or text, or switch the layout to Key / value and give each field a label.

Reference

Value, properties and accessibility

Value

string

Stored as the field's value (type string), validated by the server against the control's schema.

Read-only views (completed tasks, mobile, emails) show {{props.card_title}}.

Keyboard and screen readers

Role: note, named by the field label.

Display only: nothing to operate. A note (warning and error cards are a polite status region) named by its title, with the variant read first ("Warning: …"); the icon is decorative.

Properties (set in the form designer)
Property	Type	Default	What it does
Variant `variant`	Info / Success / Warning / Error / Neutral	info
Title `card_title`	string	Before you approve	May use {{field1}} … {{field6}}.
Text `body`	text	Check the amount against the budget for this cost centre.	Plain text; line breaks are kept. {{field1}} … {{field6}} are replaced by the mapped fields' values.
Layout `layout`	Callout (title and text) / Key / value list (the mapped fields with labels)	callout
Field labels `labels`	list	—	For the key / value layout: the labels of field 1 … field 6, in order.
Value format `format`	Automatic (numbers and dates for the reader's locale) / As stored	auto
Show icon `show_icon`	boolean	yes

Context (other fields it reads)

field1 — Field 1: Another field whose value the card shows as {{field1}}
field2 — Field 2: Another field whose value the card shows as {{field2}}
field3 — Field 3: Another field whose value the card shows as {{field3}}
field4 — Field 4: Another field whose value the card shows as {{field4}}
field5 — Field 5: Another field whose value the card shows as {{field5}}
field6 — Field 6: Another field whose value the card shows as {{field6}}

The designer maps each one to a field of the same form; the control receives those values read-only.

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on Info card. Or download form-control-info-card-1.0.0.utpkg and drag it onto Automations → Packages.
The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
Drag the control onto a form in the designer and set its properties.

With the CLI

shell

curl -fLO https://usertasks.com/gallery/form-control-info-card-1.0.0.utpkg
usertasks packages inspect form-control-info-card-1.0.0.utpkg
usertasks packages install form-control-info-card-1.0.0.utpkg

Verify the download

File SHA-256: 0eca4432d269956da43e2f975d2908993795bb5c293beb75b033388cf57fa552
Package checksum (what is signed): sha256:240a02e6c674813bbecc0a53ea79b33a1c642ff58613071cb149d43cc1f2298d
<ut-info-card> module SHA-256: d3a73d3d2a4ef2005d91d02f87ccafe97b28578c701bc3f2d93de5ea70fea3e3
Signer: UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls