App shell
The frame every signed-in screen sits in, and the screens an App compiles for each Noun and Verb a Persona may use.
The shell is the frame around every signed-in screen of an App: navigation, the Tenant switch, the reader's inbox and the ask control. Inside it, each screen compiles from a Noun or a Verb the reader's Persona may use.
The frame
| Part | Component | What it holds |
|---|---|---|
| Navigation | Navigation | One entry per Noun the reader's Role may read, in the declaration's order |
| Tenant switch | TenantSwitcher | Every Tenant the reader belongs to |
| Profile | UserMenu | Profile, sign-in methods, notification choices and sign-out |
| Inbox | TaskInbox | The Tasks and Approvals waiting on the reader |
| Ask | AgentChat | A plain-language request to the Startup's agents, answered in place |
A manager at Riverside Property sees leases in the navigation and the renewals waiting on her in the inbox. A resident's navigation has one entry, leases, and no button that changes one.
Screens per Noun and Verb
| Screen | Component | Compiled from |
|---|---|---|
| List | DataTable | The Noun's properties, filters by state, and the reader's Permissions |
| Record | ThingDetail | Properties, relationships, history and a StateBadge |
| Verb sheet | VerbSheet | The Verb's inputs, with its price and any Approval beside the button |
| Progress | ActionStatus | The Action a form started, until it is done or refused |
A record shows only the Verbs its state allows and the reader may call. Grant the Role one more Verb, and its button appears on the next request. A Verb the reader may not call never renders, so nothing is hidden with CSS.
First run
A Flow is the path one Persona takes from first sign-in to an Offer's activation Event. Leaseline's manager Flow adds units, imports leases, sends the first notice and ends at Customer.activated.
Each step is a screen that ends in the Verb that opens the next. Where a new Customer stalls, the step that holds them shows in the Flow's numbers.
Every screen, three ways
Each screen renders as HTML for people, Markdown for an Agent's context and JSON for a native client, from the same frame. An agent reading a lease's screen gets the facts a manager sees, with no scraping.
Next
- Customize: replace one part and keep the rest compiling.
- UI components: every Component, its props and renderers.