Lesson 1 of 6
App patterns
7 min
SAP S/4HANA has thousands of Fiori apps, but far fewer ways of building a screen. Most apps are generated from a small set of floorplans in a framework called SAP Fiori elements. Once you recognize the floorplan, you know where the filters are, how to open a record, where the actions sit and how saving works, before you have read a single label. That is the single biggest efficiency gain for a Fiori user.
The five floorplans
| Floorplan | What it is for | How you recognize it | Contoso example |
|---|---|---|---|
| List report | Finding, filtering and acting on many records | Filter bar on top, table below, row click opens details | Manage Sales Orders: Maria's open orders for sales area 1710 / 10 / 00 |
| Object page | Everything about one record | Header with key facts, anchor bar or tabs, sections, Edit button | Sales order 1000457 with items, partners, pricing and related documents |
| Worklist | Working through a list of items that need your action | Like a simplified list report, often without a full filter bar; focus on tasks | Items waiting for a clerk's review |
| Overview page | A role-based entry point summarizing an area | Cards with lists, charts and figures; click a card to drill in | A sales manager's overview of orders, deliveries and billing |
| Analytical list page | Analyzing data from several angles and drilling to records | Visual filters or KPIs in the header, chart and table together | Overdue receivables by customer, with the items behind each bar |
Not every app is a Fiori elements app. Some are freestyle apps built for a special job (planning boards, graphical tools); some are SAP GUI transactions or Web Dynpro applications started from the launchpad; and analytical apps include multidimensional reports. But in day-to-day work the five floorplans cover most of what business users touch.
How they connect
Floorplans are designed to chain together. An overview page card leads to a list report; a list report row opens an object page; an object page links to related objects, which open their own object pages. On wide screens many apps use the flexible column layout, showing the list and the record side by side in two or three columns, so you can click through records without losing your list.
- Overview pageCard "Orders blocked for delivery: 7" on the sales overview
- List reportManage Sales Orders opens, already filtered to the 7 blocked orders
- Object pageOrder 1000457 opens; the header shows the delivery block
- Related objectClick the customer to see Great Lakes Fleet Services' details
Display, edit and drafts
Transactional object pages open in display mode. Choosing Edit creates a draft: your changes are saved as you go, even before you choose Save, and other users see that the record is being edited. If your browser crashes, the draft is still there when you come back. Drafts are only made real when you choose Save; Discard throws them away. This is different from SAP GUI, where unsaved changes are simply lost.
Public Edition note
The patterns are the same in SAP S/4HANA Cloud Public Edition. The difference is that Public Edition users work only through the launchpad: there is no SAP GUI logon, so familiarity with the floorplans matters even more.
What would you do?
A new Contoso clerk complains that every app "looks different". What is the most useful thing to teach her first?
- Most Fiori apps use five Fiori elements floorplans: list report, object page, worklist, overview page, analytical list page.
- Floorplans chain together: overview card to list to object page to related objects.
- The flexible column layout shows list and details side by side.
- Edit creates a draft that is saved as you go; Save makes it real, Discard throws it away.
- Close drafts you do not need, or they can block colleagues.
Check your understanding · not graded
Lesson check
1. Which app pattern summarizes key information from several areas on cards?
2. What does choosing Edit on a transactional object page usually create?
3. Which floorplan shows a chart and table together for analysis?
4. What does the flexible column layout do?