Chapter 19 · Modern ABAP
Fiori & OData
How your RAP business object becomes a modern, browser-based SAP application — Fiori Elements, OData V4, and UI annotations.
In Chapter 17 and 18, you built a RAP business object. It has CDS Views, a Behavior Definition, validations, determinations, and actions. It is functionally complete — but you have not seen it yet. It lives in the backend, invisible.
This chapter makes it visible. Fiori is SAP’s modern UI framework. OData is the protocol that carries data between your RAP business object and the browser. Together, they turn your backend code into a real, usable application — with sorting, filtering, editing, and buttons — all without writing a single line of JavaScript.
🎯 What You Will Learn in This Chapter
- What SAP Fiori is and why it replaced classic SAP GUI
- The difference between Fiori Elements and Freestyle apps
- What OData is and how it carries data over HTTP
- The difference between OData V2 and OData V4
- How to create a Service Binding and expose a RAP business object
- How to add UI annotations to control the Fiori app layout
- How to preview your app in the browser from Eclipse ADT
- What SAPUI5 is and where Fiori Elements fits
📘 What is SAP Fiori?
SAP Fiori is SAP’s modern User Experience (UX) framework. It defines how SAP applications should look and behave — consistently across every product, every device, every role.
Before Fiori, users worked in SAP GUI — the classic desktop client with grey screens and T-codes. Fiori replaces all of that with a browser-based, mobile-friendly interface based on modern web standards.
Fiori vs SAP GUI — the mindset shift
| Aspect | SAP GUI (Classic) | SAP Fiori (Modern) |
|---|---|---|
| Interface | Desktop client, grey screens | Browser-based, responsive |
| Navigation | T-codes, transaction trees | Role-based tiles, search |
| Device support | Desktop only | Desktop, tablet, mobile |
| Design | Functional, ugly | Modern, minimalist |
| User type | Trained professionals | Everyone, including casual users |
| Technology | Dynpro (ABAP) | SAPUI5 (JavaScript/HTML5) |
- Role-based — Each user sees only what they need
- Responsive — Works on any screen size
- Simple — Clean, focused on the task
- Coherent — Consistent across all apps
- Delightful — Pleasant to use
🎨 Fiori Elements vs Freestyle
There are two ways to build a Fiori app. This is one of the most common interview questions, so understand it clearly.
| Aspect | Fiori Elements | Freestyle (SAPUI5) |
|---|---|---|
| How it is built | Metadata-driven — from CDS annotations | JavaScript code — hand-written UI |
| Code written | Zero UI code | Full UI code (JS, XML views) |
| Time to build | Hours | Days or weeks |
| Flexibility | Limited to predefined templates | Unlimited |
| Consistency | Guaranteed by SAP | Developer’s responsibility |
| Use case | 80% of business apps — CRUD scenarios | Complex custom dashboards, non-standard UX |
| Skill required | ABAP + CDS + annotations | ABAP + JavaScript + SAPUI5 |
Common Fiori Elements templates
| Template | What It Shows |
|---|---|
| List Report | A table of records with filters, sorting, and paging |
| Object Page | Detail view of a single record with sections |
| Analytical List Page | List with charts and KPIs on top |
| Overview Page | Card-based dashboard |
| Worklist | List focused on task processing |
🔌 What is OData?
OData (Open Data Protocol) is a REST-based protocol for accessing data over HTTP. It is the standard interface between SAP backends and web frontends.
When your Fiori app calls the backend, it does not use RFC or plain HTTP. It uses OData. The URL looks like a REST API:
// Read all Travel records
GET /sap/opu/odata4/sap/zui_travel/srvd/sap/ztravel/0001/Travel
// Read one Travel by key
GET /sap/opu/odata4/sap/zui_travel/srvd/sap/ztravel/0001/Travel(TravelId='00000001')
// Create a new Travel
POST /sap/opu/odata4/sap/zui_travel/srvd/sap/ztravel/0001/Travel
// Update an existing Travel
PATCH /sap/opu/odata4/sap/zui_travel/srvd/sap/ztravel/0001/Travel(TravelId='00000001')
// Delete a Travel
DELETE /sap/opu/odata4/sap/zui_travel/srvd/sap/ztravel/0001/Travel(TravelId='00000001')⚖️ OData V2 vs OData V4
There are two versions of OData in SAP. This distinction matters for RAP development.
| Feature | OData V2 | OData V4 |
|---|---|---|
| Standard | Older OASIS standard | Latest OASIS standard |
| REST-native | Partially | Fully REST-native |
| Batch requests | Supported | Supported, cleaner syntax |
| Metadata format | XML only | XML or JSON |
| Actions and functions | Limited | Full support, cleaner syntax |
| RAP support | Legacy scenarios | ✅ The standard for RAP |
| Used by | S/4HANA classic Fiori apps | All new RAP and Clean Core apps |
🔗 Service Definition & Service Binding
You met these in Chapter 17. Here is what they do at the OData level.
Service Definition
A Service Definition declares which CDS entities of your business object are exposed. It is a short piece of code:
@EndUserText.label: 'Travel Service Definition'
define service ZUI_TRAVEL {
expose ZC_Travel as Travel;
}Service Binding
A Service Binding makes the Service Definition accessible as a real OData endpoint. It chooses the protocol version, generates the URL, and provides the preview.
| Property | Options |
|---|---|
| Protocol | OData V2 (legacy) or OData V4 (recommended) |
| Binding type | ODATA (standard) or UI (for Fiori preview) |
| URL | Generated automatically — copyable and shareable |
| Preview | Click to open in browser — no coding needed |
🏷️ UI Annotations — The Layout Language
Fiori Elements builds its UI by reading annotations from your CDS View. No JavaScript — just annotations. Here are the ones you will use most.
The essential @UI annotations
| Annotation | Where It Shows |
|---|---|
@UI.lineItem | List report columns |
@UI.identification | Object page header fields |
@UI.selectionField | Filter bar on the list report |
@UI.facet | Grouped sections on the object page |
@UI.headerInfo | Title and subtitle of the object page |
@UI.hidden | Hide a field completely |
@UI.dataPoint | KPI tiles (for analytical apps) |
A fully annotated consumption view
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Travel App'
@UI.headerInfo: {
typeName: 'Travel',
typeNamePlural: 'Travels',
title: { type: #STANDARD, value: 'TravelId' }
}
define view entity ZC_Travel
as select from ZI_Travel
{
@UI.lineItem: [{ position: 10 }]
@UI.identification: [{ position: 10 }]
key TravelId,
@UI.lineItem: [{ position: 20 }]
@UI.selectionField: [{ position: 10 }]
AgencyId,
@UI.lineItem: [{ position: 30 }]
CustomerId,
@UI.lineItem: [{ position: 40 }]
BeginDate,
@UI.lineItem: [{ position: 50 }]
EndDate,
@UI.lineItem: [{ position: 60 }]
@Semantics.amount.currencyCode: 'CurrencyCode'
TotalPrice,
@Semantics.currencyCode: true
CurrencyCode,
@UI.lineItem: [{ position: 70 }]
Status
}@UI.lineItem becomes a column in the list view. Each @UI.identification becomes a field in the detail header. Each @UI.selectionField becomes a filter. The position value controls the order. All without writing a single line of code outside the CDS.
👀 Previewing Your App in the Browser
This is the moment everything comes together. In Eclipse ADT, you can preview the Fiori app directly — no deployment, no configuration.
In ADT, navigate to your Service Binding. Double-click to open it.
Click Activate (Ctrl+F3). The service is now live.
In the Service Binding editor, click the Preview button. A browser window opens showing the Fiori Elements app.
You can now:
- See all Travel records in the list report
- Click a row to open the object page
- Click Create to add a new Travel
- Edit a field and see the change reflected
- Click Approve (if you added the action in Chapter 18)
- Watch a validation fire if you save invalid data
🧱 SAPUI5 — What Sits Underneath
SAPUI5 is the JavaScript framework that powers all Fiori apps. It is SAP’s version of React or Angular — a library of UI controls, data binding, and routing.
What SAPUI5 provides
- UI Controls — Tables, forms, buttons, charts, dialogs
- Data Binding — Model-View-Controller pattern
- Routing — Navigation between screens
- Theming — Consistent look across SAP apps
- OData Model — Built-in support for OData V2 and V4
The layers
| Layer | What It Is | Who Builds It |
|---|---|---|
| SAPUI5 | JavaScript framework — controls, binding, routing | SAP provides; developers use |
| Fiori Elements | Templates that generate apps from annotations | Developers configure via annotations |
| Freestyle Fiori | Custom apps built directly on SAPUI5 | Frontend developers write JavaScript |
| RAP + CDS | Backend that provides the OData service | ABAP developers (you) |
⚖️ Fiori vs Web Dynpro — The Generational Shift
Before Fiori, SAP’s web UI framework was Web Dynpro ABAP. Understanding the difference helps in interviews, especially when someone asks “why are companies moving to Fiori?”
| Aspect | Web Dynpro ABAP | SAP Fiori |
|---|---|---|
| Technology | ABAP-based | SAPUI5 (JavaScript/HTML5) |
| Rendering | Server-side | Client-side |
| Design | Functional | Modern, minimalist |
| Mobile | Poor | Full support |
| Still supported | Yes | Yes — the future |
| Recommended for new | No | Yes |
📝 Chapter Summary
- SAP Fiori is SAP’s modern UI framework, replacing SAP GUI with browser-based, responsive apps.
- Fiori Elements generates apps from CDS annotations — no JavaScript needed. It is the primary tool for ABAP developers.
- Freestyle Fiori uses SAPUI5 code for custom layouts — used for non-standard apps.
- OData is the REST protocol between Fiori and ABAP backends. RAP generates OData services automatically.
- OData V4 is the modern standard — always use it for new development.
- Service Definition exposes CDS entities; Service Binding turns it into a real OData endpoint.
- UI annotations control the Fiori layout — lineItem for lists, identification for detail pages, selectionField for filters.
- You can preview the Fiori app directly in Eclipse ADT from the Service Binding.
- SAPUI5 is the JavaScript framework underneath all Fiori apps.
🎤 Interview Questions & Answers
Fiori and OData questions are asked in almost every modern ABAP interview, especially when the project involves S/4HANA or BTP. Know these cold.
SAP Fiori is SAP’s modern user experience (UX) framework for building browser-based applications. It provides a consistent, role-based design language across all SAP products. Fiori apps run in any modern browser (Chrome, Edge, Safari), are responsive across devices, and are built on top of the SAPUI5 and OpenUI5 JavaScript frameworks.
Fiori Elements apps are generated from metadata (CDS annotations and OData services) — no JavaScript is written. Freestyle apps are built with SAPUI5 code, giving complete control over layout and behavior. Fiori Elements is faster to build and used for 80% of standard apps. Freestyle is used when a truly custom UI is required.
OData (Open Data Protocol) is a REST-based protocol for accessing data over HTTP. It provides a standard way to query, create, update, and delete data using URLs and JSON. SAP Fiori apps consume OData services exposed from the ABAP backend. OData is the standard interface between SAP backends and web frontends.
OData V4 is the modern version of the OData standard. It is REST-native, supports batch requests, has better performance, and is what RAP uses. OData V2 is the older version still common in legacy SAP systems. For new development, especially with RAP and S/4HANA, always use OData V4.
A Service Binding in RAP exposes a Service Definition as an OData service. It chooses the protocol (OData V2 or V4), generates a runtime endpoint, and provides a preview URL. Without a Service Binding, a RAP business object cannot be consumed by Fiori apps or external systems.
UI annotations are CDS annotations prefixed with @UI that control how a RAP business object is rendered in a Fiori app. Examples: @UI.lineItem puts a field in the list view, @UI.identification puts a field in the detail header, @UI.selectionField adds a filter, and @UI.facet groups fields into sections. UI annotations replace the need to write JavaScript UI code.
@UI.lineItem controls which fields appear in the list view (the main table). @UI.identification controls which fields appear in the detail header (the object page). Both accept a position property that determines field order. Use lineItem for list columns, identification for object page fields.
In Eclipse ADT, open the Service Binding and click the Preview button. This launches a browser window showing the Fiori Elements app connected to your RAP business object. You can navigate, create, edit, and delete data directly — verifying that your CDS annotations, behavior, and validations work end to end.
SAPUI5 is SAP’s JavaScript framework for building web applications. It provides UI controls (tables, forms, buttons, charts), data binding, routing, and MVC architecture. Fiori apps are built on SAPUI5. Fiori Elements is a higher-level abstraction built on top of SAPUI5 that generates apps from metadata.
Web Dynpro is SAP’s older web UI framework, used mainly in NetWeaver and classic ABAP systems. Fiori is the modern UI framework based on HTML5, CSS, and JavaScript (SAPUI5). Fiori apps are responsive, mobile-friendly, and role-based. Fiori replaced Web Dynpro as the recommended UI for S/4HANA and BTP.
🛠 Practice Task for This Chapter
Take the RAP business object you built in Chapter 17 and expose it as a full Fiori app.
- Enhance your consumption view: Open
ZC_Traveland add@UI.lineItemannotations to at least 5 fields. Add@UI.selectionFieldto 2 fields for filtering. - Add header info: Add
@UI.headerInfoto declare the object page title (TravelId) and plural name (“Travels”). - Create a Service Definition: If you have not already done so, create
ZUI_TRAVELthat exposesZC_Travel as Travel. - Create a Service Binding: Choose OData V4 – UI as the binding type. Activate the binding.
- Click Preview: A browser opens with your Fiori app. Verify:
- All Travel records appear in the list
- Clicking a row opens the object page
- Selection fields appear in the filter bar
- The Create button works (new rows can be added)
- Test business logic: Try to save a Travel with invalid dates (end before begin). Your Chapter 18 validation should trigger and block the save.
- Test the action: Click the Approve button on a row (if you added it in Chapter 18). The Status field should change to ‘A’.
Test: Kon Banega Crorepati?
5 questions. ₹1 Crore. Prove you understood Fiori & OData. No pressure — restart anytime.
Explore Our Instructor-Led SAP & IT Courses
Self-study works. But if you want guided training, real project practice, and placement support — here are the courses we offer. Book a free demo before you decide.
WhatsApp us