S/4HANAbeginner
SAP Fiori Design Principles & Fiori Elements
SAP's modern UX approach: role-based, responsive, simple, coherent design and the Fiori Elements floorplan templates.
SAP GUI screens show every field a power user might ever need. Fiori apps show what one person needs to do one job.
Fiori Elements is like ordering a custom suit from a tailor's standard pattern book by giving your measurements (CDS annotations) rather than sewing every seam by hand (freestyle UI5) - you get a well-fitting, consistent result far faster, reserving fully bespoke tailoring for the rare cases the pattern book genuinely can't cover.
Key Concepts
1
That is the shift, and the design principles are how SAP describes it.
2
The five principles.Role-based — an app serves one persona doing one task, rather than one transaction serving everybody.
VA01 creates every kind of sales order for every kind of user; a Fiori app creates the one kind this role
handles.
VA01
3
Responsive — one app adapts from desktop to phone, instead of a separate mobile build.
4
Simple — the common path is on screen; the rest is reachable but not competing for attention.
5
Coherent — the same visual language and interaction patterns everywhere, so learning one app transfers to
the next.
6
Delightful — pleasant to use, which sounds like marketing and in practice means adoption.
7
Fiori Elements: the screen is generated, not written. Most business apps are the same few shapes, so
SAP provides templates called floorplans:
8
List Report a filterable, sortable list of records
Object Page the detail view of one record
Overview Page cards and KPIs, a dashboard
Worklist items awaiting my action9
The layout comes from annotations on the CDS view.
@UI.lineItem: [{ position: 10 }]
@UI.selectionField: [{ position: 20 }]
customer_id;10
That annotation says this field appears as a column and as a filter. There is no XML view, no controller,
no layout code. Change the annotation and the app changes.
11
What you gain and what you give up. A standard list-and-detail app takes hours instead of weeks, and it
automatically follows every Fiori pattern — sorting, filtering, variants, draft handling, accessibility.
12
What you give up is arbitrary layout. Fiori Elements does what the floorplans express. For a screen that
does not fit one, you write freestyle SAPUI5 and build it by hand.
13
So the choice is straightforward. Standard CRUD over a business object: Fiori Elements. A genuinely
unusual interaction — a planning board, a configurator, a graphical designer: freestyle.
14
Choosing freestyle for a standard list is the common mistake, and it costs the maintenance of every screen
element forever.
15
The Launchpad is the way in. It aggregates tiles from potentially several backend systems into one
role-based home page, so the user sees the apps their role grants and nothing else. That is where
role-based design becomes visible rather than theoretical.
16
What the interviewer is probing.1. "What are the Fiori design principles?" Probing: whether you know more than the look.
Stalls: "It is responsive." Moves up: role-based, adaptive, simple, coherent and delightful —
the role-based part is what actually changes how apps are scoped.
17
2. "Why prefer Fiori elements over freestyle SAPUI5?" Probing: the engineering argument.
Stalls: "Less code." Moves up: the UI is generated from CDS annotations, so it stays consistent
and upgrades with the framework instead of being hand-maintained.
18
3. "When does freestyle become necessary?" Probing: judgement. Stalls: "Never." Moves up:
when the interaction does not fit a standard floorplan — a canvas, a custom wizard, or heavy
client-side logic.
19
4. "What is a floorplan?" Probing: the vocabulary. Stalls: "A layout." Moves up: a
standard app pattern such as list report, object page, overview page or analytical list page, each
with expected behaviours.