Pattern: suite home
Who uses it: anyone whose work spans modules — a controller touching Finance and Purchasing, an ops lead across Warehouse and Reports; the screen behind the brand link and the switcher's "home". How often: between tasks, and first thing after sign-in when no single role owns the day. What "done" looks like: cross-module status in one glance, and any module one click away — the sidebar at this level lists modules, not one module's screens (the Fiori "My Home" / Dynamics areas shape). Not for one role's daily queue — a buyer who lives in Purchasing all day wants role home, which shows their work, not the suite; and not just a launcher — a pure tile grid with no live status is app launch.
The screen
Your apps
The frame is the app frame; what makes this screen the SUITE's home is the sidebar level — modules, with Home itself the current entry — and a main region aggregating status across them. Entering a module swaps the whole sidebar to that module's nav.
Markup
<!-- Suite home = the app frame with the sidebar at SUITE level:
entries are MODULES (the Dynamics areas / Fiori "My Home" shape), and
main is a cross-module overview. Everything is shipped primitives —
stat widgets, an elevated-alert list, the launcher's tile grid. -->
<nav class="bo-sidebar-nav bo-app-shell__sidebar" aria-label="Modules">
<ul role="list">
<li><a class="bo-sidebar-nav__link" href="/home" aria-current="page">…Home…</a></li>
<li><a class="bo-sidebar-nav__link" href="/finance">…Finance…</a></li>
<li><a class="bo-sidebar-nav__link" href="/purchasing">…Purchasing…</a></li>
<li><a class="bo-sidebar-nav__link" href="/warehouse">…Warehouse…</a></li>
</ul>
</nav>
<main class="bo-app-shell__main">
<div class="bo-widget-grid" style="--bo-widget-min: 14rem">
<section class="bo-widget"> …stat: open approvals, all modules… </section>
<section class="bo-widget bo-widget--span-2"> …needs attention, cross-module… </section>
</div>
<div class="bo-widget-grid" style="--bo-widget-min: 8rem"> …favourite app tiles… </div>
</main>Anatomy
- Module sidebar —
sidebar nav, one entry per
module the user may open, Home current;
aria-label="Modules"says which level this sidebar is. - Cross-module "needs you" stat — a widget with one number and its breakdown; links into the inbox.
- Across-your-modules list — module badges + one line each; every row links to the screen that resolves it (the journey rule: an exit lands at the next decision).
- Favourite apps — the launcher's own tile mechanism (app launch) at a smaller size; personal, server-persisted.
Data contract
| Request | Returns / on failure |
|---|---|
| GET /home | sidebar + tiles render immediately (role-filtered server-side); the two status widgets may arrive as follow-up fragments |
| GET /home/status | the cross-module widgets, aggregated server-side — the page never fans out N module requests from the browser. On failure: the widgets show their error state inline; sidebar and tiles are unaffected |
| 4xx | expired session → full navigation to login; a module gone from the user's role → its entry is simply absent on the next render |
States
| State | What ships |
|---|---|
| Nothing needs you | the stat reads 0 with "all clear" text — a zero is a fact, not an empty state |
| Status unavailable | the two widgets show an inline error with retry; sidebar and tiles keep working — partial failure never takes the frame |
| Single-module user | this screen is WRONG for them — route straight to their role home or the module; a one-module suite home is a corridor with one door |
| New user, no favourites | the tile row seeds from role defaults, never renders empty beside a working suite |
| Narrow | the shell's icon rail, same as every screen in the frame |
| No JS | fully functional — every element here is links and server-rendered content; there is nothing to enhance |
Components used
complexity 2 of 4