Skip to main content

Module 18: Fiori Elements – Fundamentals

Fiori Elements is SAP's metadata-driven UI framework that allows developers to build standard Fiori applications with minimal UI code.

This module explains:

  • What Fiori Elements is
  • Core floorplans (List Report & Object Page)
  • Role of annotations
  • CDS + UI annotation concept
  • When to choose Fiori Elements vs Freestyle UI5

1. What is Fiori Elements?​

Definition​

Fiori Elements is a UI framework that:

  • Generates UI automatically
  • Uses OData metadata & annotations
  • Requires little or no UI coding
  • Follows SAP Fiori design standards by default
Key Idea

In Fiori Elements, metadata drives the UI.

What You Don't Write in Fiori Elements​

  • XML views
  • Controllers (mostly)
  • Layout logic
  • Table definitions
SAP Goal

Reduce UI development effort and enforce consistency.

2. Fiori Elements Architecture​

High-Level Architecture​

CDS View
  ↓ (Annotations)
OData Service (SEGW / RAP)
  ↓
Fiori Elements Runtime
  ↓
Generated UI
Full-Stack View

CDS + Annotations = UI

3. Core Fiori Elements Floorplans​

SAP provides predefined floorplans.

3.1 List Report​

What is a List Report?​

A List Report:

  • Displays a list of business objects
  • Includes filter bar
  • Supports sorting, filtering, grouping

Typical Use Cases​

  • Sales Orders
  • Purchase Orders
  • Business documents

List Report Features​

  • Smart Filter Bar
  • Smart Table
  • Variant management
  • Export to Excel
Enterprise Reality

Most transactional apps start with a List Report.

3.2 Object Page​

What is an Object Page?​

An Object Page:

  • Displays details of a single business object
  • Supports sections and subsections
  • Handles header + items

Typical Sections​

  • Header information
  • General information
  • Line items
  • Related objects

Object Page Features​

  • Automatic layout
  • Draft support (with RAP)
  • Action buttons
  • Navigation
SAP Pattern

List Report + Object Page is the most common Fiori flow.

4. Annotations Overview​

What are Annotations?​

Annotations are metadata instructions that tell Fiori Elements:

  • What to display
  • How to display it
  • Where to display it

Types of Annotations​

TypePurpose
UIUI layout
CommonLabels, texts
ConsumptionQuery behavior
ODataService behavior
Key Concept

Annotations replace UI coding.

5. CDS + UI Annotations (Intro)​

Example: UI Annotation in CDS​

@UI.lineItem: [
  { position: 10, label: 'Sales Order' }
]
SalesOrderID;

Object Page Header Example​

@UI.headerInfo: {
  typeName: 'Sales Order',
  title: { value: 'SalesOrderID' }
}
ABAP Developer Advantage

CDS annotations feel natural to ABAP developers.

6. Behavior Without UI Code​

In Fiori Elements:

  • Tables are auto-generated
  • Forms are auto-generated
  • Navigation is auto-wired
Productivity Gain

UI logic moves from JavaScript to metadata.

7. When to Use Fiori Elements vs Freestyle UI5​

Comparison Table​

AspectFiori ElementsFreestyle UI5
UI CodingMinimalHigh
FlexibilityLimitedFull
Standard UXEnforcedDeveloper-defined
Development SpeedFastSlower
Custom UXNoYes

Use Fiori Elements When​

Recommended For
  • Standard CRUD apps
  • Reporting apps
  • Transactional apps
  • RAP-based apps

Use Freestyle UI5 When​

Required For
  • Highly custom UI
  • Non-standard flows
  • Complex animations
  • Canvas / charts-heavy UI

8. Fiori Elements in ECC vs S/4HANA​

SystemSupport
ECCLimited
S/4HANAFull
RAPNative
SAP Direction

Fiori Elements + RAP is the strategic UI model.

9. Common Beginner Mistakes​

Avoid These
  • Trying to customize layout heavily
  • Ignoring annotation-driven mindset
  • Mixing freestyle logic unnecessarily
  • Expecting pixel-perfect control

10. Interview-Grade Explanation​

Q: What is Fiori Elements and when do you use it?

Answer:

Fiori Elements is a metadata-driven UI framework that generates standard Fiori applications using OData services and annotations. It is best suited for standard transactional and analytical applications where consistency, speed, and SAP UX compliance are required.

11. Summary​

  • Fiori Elements is metadata-driven UI
  • Requires minimal UI coding
  • List Report & Object Page are core floorplans
  • Annotations control UI behavior
  • CDS is the primary source of annotations
  • Ideal for standard S/4HANA apps

12. What's Next?​

➡️ Module 19: Advanced Fiori Elements & Extensions

Learning Tip

If your UI is standard, don't code it — annotate it.