Use the Text widget to display headings, instructions, and explanatory text on a page.
When to use it #
A Text widget writes to the page. It does not read a dataset, and users cannot type into it.
Use it for:
- a short introduction explaining what a page is for;
- instructions above a form;
- a heading that separates one part of a page from another;
- a sentence that includes a value from the page, such as the name of the object being viewed.
Where you want to display a property of an object in a structured layout, use a Text Grid widget instead. Where you want a single value to stand out, use a Card widget.
Add a Text widget #
To add a Text widget:
- Open the page and enable Layout edit mode.
- Select Add a widget.
- Select the Text tile, or drag it onto the page.
- Enter a Widget Title and a Description.
- Add the text elements the widget should show.
- Select Create.
- Save the page layout.
Configuration #
Widget Title and Description #
Widget Title is required. It appears as the widget’s heading.
Description appears beneath the title as a subheading.
Each has an eye icon beside it, whose tooltip reads Toggle title visibility or Toggle description visibility. The icon controls whether that text is shown to users, not whether it exists, and both start hidden. A widget can therefore carry a title that helps you recognize it while building, and show nothing to users.
Text Elements #
The body of a Text widget is the Text Elements list. Each entry has its own content and alignment, so a widget with three entries produces three blocks of text stacked in order.
Select Add Text to add an element. Each element has:
- the text itself – the content to display;
- Horizontal Align – left, centre, or right;
- Vertical Align – top, middle, or bottom;
- Move up and Move down – change the element’s position in the list;
- Preview – swap the field for the rendered Markdown, after which the same icon reads Edit;
- Remove element – delete it.
Remove element appears only while the widget has more than one element, so the last element cannot be removed from the list.
Vertical alignment only becomes visible when the widget is taller than its text, which happens when you resize it on the grid. Use it to pin a caption to the bottom of a tall widget, or to centre a single line in a block.
Markdown formatting #
Text elements accept Markdown, indicated by the Markdown supported hint. Use it for emphasis, lists, and links:
**bold**and*italic*;# Headingthrough###### Heading;- itemfor a bulleted list,1. itemfor a numbered one;[link text](https://example.com)for a link;- tables, task lists, and fenced code blocks, since GitHub-flavoured Markdown is enabled.
Values from the page #
Write $(parameterName) inside a text element and Auclio replaces it with the value of that page parameter when the page opens. On an account details page with a parameter named account, the text
You are viewing $(account).
shows the name of the account the user opened.
The field offers an inserter so you do not have to type parameter names by hand. Parameters that do not exist on the page resolve to nothing, so check the spelling if a value fails to appear.
See Pages for detailed instructions on page parameters.
Validation #
Auclio refuses to save the widget when:
- the Widget Title is empty;
- there are no text elements;
- every text element is empty.
A new Text widget opens with one empty element, so in practice it is the third rule you meet: fill in at least one element before saving. An element may be empty as long as at least one other has content, which is occasionally useful for spacing.
Recommendations #
When using Text widgets:
- keep each widget to one idea, and use separate widgets rather than one long block;
- write instructions in the same voice as the rest of the application;
- use Markdown headings sparingly, because the widget already has a title;
- prefer a parameter over repeating an object’s name in the text;
- check the text at a narrow width, since a centred line wraps differently on a phone.