Interfaces and User Experience
What you must know
Interfaces are built with SAIL components: layouts (a!headerContentLayout, a!cardLayout), inputs (a!textField, a!dropdownField), displays (a!gridField, a!richTextDisplayField), and buttons. Understand rule inputs (typed parameters), local variables (a!localVariables), and how saves (a!save) mutate local variables or rule inputs. Know validation (a!validationMessage, validations on inputs) and conditional display (showWhen).
Know the difference between a record view (auto-generated from a record type) and a custom interface; know when to use a!gridField versus a!gridLayout. Understand dynamic behavior (refreshing variables on change via a!save and refreshAlways/refreshAfter). Know accessibility basics (labels, alt text) and responsive layouts.
Traps
- Assuming a local variable persists across page loads; it does not.
- Forgetting that a save only runs when the component's saveInto is triggered (e.g., button or input change).
- Confusing showWhen (display) with disabled (interaction).
- Using a gridField for editable data when a gridLayout or editable grid is required.
- Ignoring that rule inputs are read-only inside the interface unless saved back.
Rule of thumb
If a value must survive navigation, back it with a record or a process variable; if it only drives the current screen, a local variable is fine. Always pair a save with a refresh when dependent components must update.
Worked example
A dropdown selects a customer; a grid shows that customer's orders. Use a!localVariables with local!customerId, save the dropdown value into it, and set the grid's data to a query filtered by local!customerId with refreshAfter: "local!customerId".