Element Block – an HTML element that can be clicked and open a popover¶
The element block is a container that is drawn as an HTML element of your choice – div, section,
a, ul, li. It groups its child blocks, can react to a click as a whole, and can open another form
of the same record as a popover next to it.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Groups blocks in one element; makes the whole group clickable; opens a popover |
| Typical use | A card that opens the record it shows; a contact card in a popover; a list built from ul and li |
| Related | Button Block, Vertical Stack Block |
2. Settings¶
| Setting | Meaning | Default / required |
|---|---|---|
| "Element" | The HTML tag, as a text expression – div, section, a, ul, li |
Required. Empty draws nothing at all, not even the children. |
| "Tooltip" | Text shown when the pointer rests on the element | none |
| "HTML Attributes" | Further attributes of the element – role, aria-label, data-state, the href of an a element. Opens a list with "Name" and "Value" per attribute. |
none |
| "Click Action" | Action run when the element is clicked, against the record of the form. Not run while a popover form is set. | none |
| "Shift-Click Action", "Ctrl-Click Action", "Alt-Click Action" | Actions run on a click with the Shift, Ctrl or Alt key held | none |
| "Popover Form" | A form of the same entity that opens as a popover when the element is clicked | none |
| "Popover Position" | Side on which the popover opens: Auto (the first side with enough room), Left, Right, Top, Bottom | Auto |
| "Disabled" | Condition under which the element reacts to no click and no popover | not disabled |
In a form without an entity, the click actions and the popover form run without a record. In addition, the block has the settings every block has, except "Flush".
HTML attributes¶
| Entry | Meaning |
|---|---|
| "Name" | Name of the attribute, for example aria-label or data-state. An entry without a name is skipped. |
| "Value" | Expression for the value. Left empty, the attribute is written without a value, as a yes/no attribute like hidden needs it. An expression that yields nothing leaves the attribute out – so an expression can switch it on and off. |
class and style are added to the styling of the block instead of replacing it. id is reserved
for the block itself, event handler attributes (onclick and the like) are not written, and a value
that could run a script is left out.
3. Behaviour¶
- Without any click action and without a popover form, the element is a plain container: clicks pass through to whatever surrounds it.
- With a popover form, a plain click opens the form next to the element; a click outside closes it. The popover form shows the same record – what is changed in it changes the record of the form, and the form around the element shows it. Shift-, Ctrl- and Alt-click still run their actions.
- "Disabled" only changes something on an element that reacts to clicks: it then reacts to none and is drawn as disabled. A plain container is never drawn as disabled.
4. Examples¶
A clickable card. An element block with "Element" = div, padding, border and a shadow, with
an avatar and two labels inside. "Click Action" opens the customer the card shows. The whole card
is the click target, not only a button inside it.
A contact card on demand. An element block around the name of the requester with "Popover Form" = "Requester Card" (a small form of the ticket with phone, email and department) and "Popover Position" = Right. One click shows the details without leaving the ticket.
Accessible state. "HTML Attributes": role = status, aria-label = the text expression
Ticket is overdue, data-state = the field "Status". A stylesheet can then style
[data-state="Escalated"].