Module 1: Introduction to SAPUI5 & Fiori
SAPUI5 is SAP’s enterprise-grade JavaScript framework used to build responsive, role-based, and device-independent applications following the SAP Fiori design paradigm.
This module lays the foundation for all UI5 and Fiori development.
1. What is SAPUI5?
Definition
SAPUI5 is a client-side JavaScript UI framework for building enterprise web applications that:
- Run in any modern browser
- Are responsive by default
- Integrate tightly with SAP backend systems
Key Characteristics
- MVC architecture
- Rich UI control library
- Built-in data binding
- Internationalization (i18n)
- Theming & accessibility
- Tight OData integration
SAPUI5 is designed for business-critical applications, not generic websites.
2. SAPUI5 vs OpenUI5
What is OpenUI5?
OpenUI5 is the open-source core of SAPUI5, released under Apache 2.0 license.
Comparison Table
| Aspect | SAPUI5 | OpenUI5 |
|---|---|---|
| License | SAP proprietary | Open source |
| Controls | Full SAP control set | Core controls only |
| SAP Integration | Tight | Limited |
| Fiori | Full support | Partial |
| Support | SAP-supported | Community |
Say: “OpenUI5 is UI5 core; SAPUI5 adds enterprise and SAP-specific layers.”
3. SAP Fiori Design Principles
SAP Fiori defines how enterprise apps should look and behave.
3.1 Fiori Principles
| Principle | Meaning |
|---|---|
| Role-Based | Tailored per user role |
| Adaptive | Works on all devices |
| Simple | Focused, minimal UI |
| Coherent | Consistent experience |
| Delightful | Smooth & responsive |
Fiori is UX philosophy, not a technology.
3.2 Fiori App Types
- Transactional Apps
- Analytical Apps
- Fact Sheet Apps
4. SAPUI5 Architecture
4.1 High-Level Architecture
Browser
↓
SAPUI5 Framework
↓
Models (JSON / OData / Resource)
↓
SAP Gateway / RAP / Backend
4.2 MVC in UI5
| Layer | Responsibility |
|---|---|
| Model | Data & business state |
| View | UI definition |
| Controller | Event handling |
Use XML Views for clarity and separation.
5. UI5 vs Classical Web Development
Classical Web Development
- HTML + CSS + JS manually
- Custom MVC
- Manual responsiveness
- Manual data binding
SAPUI5 Approach
| Feature | Classical | SAPUI5 |
|---|---|---|
| MVC | Manual | Built-in |
| Data Binding | Manual | Automatic |
| Responsiveness | Custom | Built-in |
| i18n | Manual | Built-in |
| Theming | Custom | Centralized |
UI5 reduces custom boilerplate and enforces consistency.
6. SAPUI5 in ECC vs S/4HANA
SAPUI5 in ECC
- OData via SEGW
- Fiori Launchpad (Hub or Embedded)
- Limited CDS usage
- Mostly Freestyle UI5 apps
SAPUI5 in S/4HANA
- CDS + OData (SEGW / RAP)
- Embedded Fiori Launchpad
- Fiori Elements
- Draft-enabled apps
- RAP-based services
Comparison Table
| Aspect | ECC | S/4HANA |
|---|---|---|
| OData | SEGW | RAP / CDS |
| UI Pattern | Freestyle | Fiori Elements |
| Backend Model | Function Modules | CDS + RAP |
| Future-Proof | ❌ | ✅ |
ECC + UI5 → Maintenance S/4HANA + UI5/RAP → New Development
7. Where SAPUI5 Fits Today
UI Layer → SAPUI5 / Fiori
Service Layer → OData (SEGW / RAP)
Data Layer → CDS / HANA
UI5 + RAP + CDS = Modern SAP Application Stack
8. Common Beginner Mistakes
- Treating UI5 like plain JavaScript
- Ignoring Fiori design principles
- Mixing logic in views
- Hardcoding text (no i18n)
- Ignoring backend design
9. Interview-Grade Explanation
Q: What is SAPUI5 and how is it different from classical web frameworks?
Answer:
SAPUI5 is an enterprise-grade JavaScript framework with built-in MVC, data binding, theming, and SAP integration, designed to build Fiori-compliant business applications with minimal boilerplate and high consistency.
10. Summary
- SAPUI5 is SAP's enterprise UI framework
- OpenUI5 is its open-source core
- Fiori defines UX principles
- MVC and data binding are central
- S/4HANA drives UI5 + RAP adoption
11. What's Next?
➡️ Module 2: UI5 Development Environment
Before writing UI5 code, understand why UI5 exists—it will shape every design decision.