Pages, Layouts, and User Interface
This domain covers how the UI is assembled: layouts and placeholders, snippets versus building blocks, data containers, widget binding, page parameters, navigation profiles, and the action a button or link triggers.
Layouts and reuse
Every page is placed on a layout. The layout provides the chrome - header, menu, content placeholder - and the page fills the placeholder. Building blocks are ready-made compositions you drag from the toolbox; snippets are fragments you author and reuse across pages or layouts. A popup page uses a popup layout rather than the standard responsive one.
Data containers and widgets
- Data view binds a single object; list view binds a list; data grid 2 renders a tabular list.
- Input widgets must sit inside a data container and bind to an attribute of that container's entity.
- Page parameters pass an object (or primitive) into a page; the caller supplies the value in a Show page action.
- Actions available to buttons: microflow, nanoflow, show page, create object, close page, sign out, open link, call a JavaScript action.
Worked example
A page must show one customer with an editable form and a list of that customer's orders. Reasoning: retrieve the Customer (usually a page parameter passed from the overview), drop a data view on it, place input widgets for the attributes, then add a list view inside the data view that follows the Customer–Order association. Do not retrieve orders with a separate database query: navigating the association guarantees you only show that customer's orders and matches the security rules on the association.
Traps
- Snippets and building blocks are not interchangeable: a snippet you create and maintain, a building block is a starter template you then adapt.
- A widget outside any data container cannot bind an attribute.
- Placeholders are defined by the layout; you cannot invent new ones on the page.
- Use microflow for server logic and nanoflow for client-side logic; mixing them up in a button action is a common mistake.