🧭 Applied SAP Fiori – UX, SAPUI5, Fiori Elements & End-to-End Application Development
Goal: Master SAP Fiori application design and development — from UX strategy and launchpad setup through SAPUI5, OData, Fiori Elements, annotations, security, deployment and performance optimization — via practical, industry-based use cases.
Duration: 80 Hours (40 sessions × 2 hrs/day)
Structure: Kanban – Planned → In Progress → Completed
Delivery Style: 60% Hands-on Labs, 30% Application Projects, 10% Concept Reviews
🗂️ Mentoring/Coaching Schema
Status | Session | Focus Area | Objective | Deliverable / Output | Tags |
🔵 Planned | 1. SAP Fiori UX Strategy | SAP Fiori Introduction | Understand SAP Fiori design principles, role-based UX and business value | UX strategy map for a sample enterprise scenario | #fiori #ux #foundation |
🔵 | 2. SAP Fiori Architecture Overview | SAP Fiori Introduction | Understand Fiori architecture, frontend server, backend system, SAP Gateway and Launchpad | Annotated Fiori architecture diagram | #architecture #gateway #launchpad |
🔵 | 3. Fiori App Types & Design Guidelines | SAP Fiori Introduction | Compare transactional, analytical and fact sheet apps; apply Fiori design guidelines | App-type classification matrix with design rules | #design #app-types |
🔵 | 4. Fiori Development Landscape Setup | SAP Fiori Introduction | Set up BAS, SAPUI5 tooling, destination concepts and development prerequisites | Verified Fiori development environment checklist | #bas #setup |
🔵 | 5. SAPUI5 Project Anatomy | SAPUI5 Fundamentals | Understand project folders, manifest.json, Component.js and bootstrap flow | Initialized SAPUI5 project with documented folder anatomy | #sapui5 #fundamentals |
🔵 | 6. MVC Pattern in SAPUI5 | SAPUI5 Fundamentals | Implement Model-View-Controller separation using XML views and controllers | Simple MVC-based SAPUI5 application | #mvc #views #controllers |
🔵 | 7. Controls & Layouts I | SAPUI5 Fundamentals | Use common controls such as Text, Input, Button, Table and Form | Responsive form and table layout | #controls #layout |
🔵 | 8. Controls & Layouts II | SAPUI5 Fundamentals | Use page, shell, flex and responsive layout patterns for enterprise apps | Responsive master-detail style screen | #responsive #layout |
🔵 | 9. Data Binding Fundamentals | SAPUI5 Fundamentals | Apply property binding, aggregation binding and expression binding | Data-bound UI with JSON model | #binding #jsonmodel |
🔵 | 10. Models in SAPUI5 | SAPUI5 Fundamentals | Compare JSONModel, ResourceModel, ODataModel and device model | Multi-model SAPUI5 sample app | #models #odata |
🔵 | 11. Internationalization & Resource Bundles | SAPUI5 Fundamentals | Implement i18n texts, resource bundles and language-ready UI labels | Localized SAPUI5 app with resource model | #i18n #localization |
🔵 | 12. SAPUI5 Fundamentals Mini-Project | SAPUI5 Fundamentals | Combine MVC, controls, layouts, models and data binding into one app | Working employee directory app | #project #hands-on |
🔵 | 13. Fiori Launchpad Concepts | Fiori Launchpad | Understand Launchpad shell, tiles, target mappings and navigation intent | Launchpad concept map with app navigation flow | #launchpad #navigation |
🔵 | 14. Catalogs & Groups | Fiori Launchpad | Configure catalogs, groups and tile visibility for role-based access | Role-based catalog and group configuration plan | #catalogs #groups |
🔵 | 15. Spaces & Pages | Fiori Launchpad | Configure modern Launchpad spaces and pages for business roles | Space/page layout for a department persona | #spaces #pages |
🔵 | 16. Launchpad Content Manager Lab | Fiori Launchpad | Use content manager concepts to organize apps and assign content | Launchpad content governance checklist | #content-manager #governance |
🔵 | 17. OData & SAP Gateway Overview | OData Services | Understand OData protocol, entity sets, metadata and SAP Gateway role | OData metadata analysis worksheet | #odata #gateway |
🔵 | 18. Gateway Service Consumption | OData Services | Consume OData services in SAPUI5 using ODataModel | SAPUI5 app reading backend data | #odata-model #consumption |
🔵 | 19. CRUD Operations I: Read & Filter | OData Services | Implement read, filter, sort and search scenarios | Searchable list report-style UI | #crud #read #filter |
🔵 | 20. CRUD Operations II: Create & Update | OData Services | Implement create and update operations with validation and messages | Create/edit business object form | #crud #create #update |
🔵 | 21. CRUD Operations III: Delete & Error Handling | OData Services | Implement delete scenarios, confirmation flows and backend error handling | CRUD app with user-friendly error handling | #crud #delete #errors |
🔵 | 22. OData Integration Lab | OData Services | Combine read, create, update and delete operations in one service-driven app | End-to-end service-connected SAPUI5 app | #odata #lab |
🔵 | 23. Views, Controllers & Event Handling | SAPUI5 Development | Build interactive screens using controller logic, events and UI states | Interactive task-management screen | #views #controllers #events |
🔵 | 24. Routing & Navigation I | SAPUI5 Development | Configure routes, targets and navigation between views | Two-screen SAPUI5 app with routing | #routing #navigation |
🔵 | 25. Routing & Navigation II: Object Pages | SAPUI5 Development | Pass parameters, bind object detail pages and handle not-found routes | List-to-detail navigation flow | #object-page #routing |
🔵 | 26. Forms, Validation & Messaging | SAPUI5 Development | Implement form validation, MessageToast, MessageBox and message handling | Validated create/edit form | #forms #validation |
🔵 | 27. Tables, Filters & Personalization | SAPUI5 Development | Build table views with filters, sorting, growing and personalization concepts | Enterprise list screen with filtering | #tables #filters |
🔵 | 28. SAPUI5 Development Mini-Project | SAPUI5 Development | Combine views, controllers, routing, forms and service integration | Working purchase request approval app | #project #sapui5 |
🔵 | 29. Fiori Elements Overview | Fiori Elements | Understand template-driven development and when to use Fiori Elements | Fiori Elements fit-gap decision matrix | #fiori-elements #templates |
🔵 | 30. List Report Application | Fiori Elements | Generate and configure List Report applications using metadata | Generated List Report app | #list-report #metadata |
🔵 | 31. Object Page Application | Fiori Elements | Configure object page sections, facets and field groups | Configured Object Page with sections | #object-page #facets |
🔵 | 32. Fiori Elements Extension Points | Fiori Elements | Extend generated apps using supported extension patterns | Extended Fiori Elements app with custom behavior | #extensions #fiori-elements |
🔵 | 33. CDS Annotations I: UI Vocabulary | Annotations | Apply UI.LineItem, UI.FieldGroup, UI.Identification and UI.Facets | Annotated CDS model driving Fiori UI | #cds #annotations #ui |
🔵 | 34. CDS Annotations II: Value Help & Semantics | Annotations | Configure value helps, semantic keys, labels and criticality indicators | Enhanced app with value help and semantic annotations | #value-help #semantics |
🔵 | 35. Metadata Extensions Lab | Annotations | Use metadata extensions to separate UI annotations from core data model | Metadata extension file with clean annotation structure | #metadata-extensions #clean-design |
🔵 | 36. Fragments & Dialogs | Advanced UI5 | Create reusable XML fragments and dialogs for modular UI development | Reusable dialog fragment with controller integration | #fragments #dialogs |
🔵 | 37. Reuse Components | Advanced UI5 | Design reusable components and component-based application structure | Reusable component embedded in a SAPUI5 app | #reuse #components |
🔵 | 38. Security, Deployment & Performance Readiness | Security, Deployment & Optimization | Apply roles, authentication basics, BAS deployment flow, transport concepts, debugging and best practices | Production-readiness checklist for Fiori apps | #security #deployment #performance |
🟡 In Progress | 39. Real-Time Project Build | Real-Time Project | Build an end-to-end Fiori application with Launchpad integration, OData consumption and role-ready UX | Working end-to-end Fiori application | #project #end-to-end |
🟢 Completed | 40. Real-Time Project Presentation & Review | Real-Time Project | Present the Fiori app, demonstrate business flow, review code quality and capture lessons learned | Live demo + review report + improvement backlog | #presentation #review |
🧱 Board Columns (Kanban)
Create a Board View in Notion from this table with these columns:
- 📝 Planned – upcoming or scheduled sessions
- ⚙️ In Progress – current development module
- ✅ Completed – finished sessions with notes, screenshots or demo evidence
You can drag cards between these statuses as you deliver/learn.
🧰 Optional Properties for Each Card
Add these properties to each Notion page/card for richer management:
Property | Type | Example |
Duration | Number | 2 hrs |
Level | Select | Beginner / Intermediate / Advanced |
Resource Link | URL | |
Lab File | File | XML views, controllers, manifest.json, annotation files |
Evaluation | Number (1–5) | 4 |
Instructor Notes | Text | Key takeaways, debugging points or learner blockers |
Industry Focus | Multi-select | Manufacturing, Retail, Finance, Logistics, HR Tech |
🧠 Bonus Automation Ideas (for Notion + Pabbly or Zapier)
You could integrate:
- ✅ Automatic Status Updates after each session checklist
- 📬 Daily Reminder ("Today's Fiori topic: Routing & Navigation")
- 📊 Progress Dashboard showing completion % by learner, module and project milestone
- 🧪 Lab Submission Tracker for screenshots, Git links and review comments
- 🚦 Quality Gate Alerts for code review, performance checks and deployment readiness
📑 Master Syllabus – SAP Fiori
Sr. No | Topic Name | Sub-Topics | Duration (Hours) |
1 | SAP Fiori Introduction | UX Strategy, Fiori Architecture | 4 |
2 | SAPUI5 Fundamentals | MVC, Controls, Data Binding | 10 |
3 | Fiori Launchpad | Catalogs, Groups, Spaces, Pages | 6 |
4 | OData Services | Gateway Services, CRUD Operations | 8 |
5 | SAPUI5 Development | Views, Controllers, Routing | 10 |
6 | Fiori Elements | List Report, Object Page | 8 |
7 | Annotations | CDS Annotations, Metadata Extensions | 6 |
8 | Advanced UI5 | Fragments, Reuse Components | 8 |
9 | Security & Authorization | Roles, Authentication | 4 |
10 | Deployment | BAS, Transport Management | 4 |
11 | Performance Optimization | Debugging, Best Practices | 4 |
12 | Real-Time Project | End-to-End Fiori Application | 8 |
Total | 80 hrs |
SAP Fiori 80-Hour Learning Curriculum
40-Day Program (2 Hours Per Day)
Day | Module | Topic | Learning Objectives | Case Study Focus | Hours |
1 | SAP Fiori Introduction | SAP Fiori UX Strategy | Understand SAP Fiori design principles, user-centric design, role-based UX and enterprise usability goals | A manufacturing firm redesigning approval workflows for managers | 2 |
2 | SAP Fiori Introduction | SAP Fiori Architecture | Understand Launchpad, frontend server, backend system, SAP Gateway and app deployment landscape | Architecture workshop for a multi-system Fiori rollout | 2 |
3 | SAPUI5 Fundamentals | SAPUI5 Project Anatomy & Bootstrap | Understand project structure, Component.js, manifest.json and bootstrap process | Creating a standard app scaffold for a delivery team | 2 |
4 | SAPUI5 Fundamentals | MVC Pattern in SAPUI5 | Build XML views and controllers using clean MVC separation | Employee profile viewer with controller-based actions | 2 |
5 | SAPUI5 Fundamentals | Controls, Layouts & Responsive Pages | Use common SAPUI5 controls and responsive layouts for enterprise screens | Responsive request form for field employees | 2 |
6 | SAPUI5 Fundamentals | Data Binding & Models | Apply property binding, aggregation binding, expression binding and model concepts | Product catalogue powered by JSON model | 2 |
7 | SAPUI5 Fundamentals | i18n, Formatters & Mini-Project | Use resource bundles, formatters and reusable UI logic | Localized supplier list with formatted status values | 2 |
8 | Fiori Launchpad | Launchpad Concepts, Tiles & Target Mappings | Understand shell, tiles, semantic objects, actions and intent-based navigation | Navigation design for procurement approval apps | 2 |
9 | Fiori Launchpad | Catalogs, Groups & Role-Based Content | Configure catalogs and groups for user roles and app visibility | Manager vs employee Launchpad content model | 2 |
10 | Fiori Launchpad | Spaces, Pages & Content Governance | Organize apps using spaces and pages aligned to business roles | Department-specific Launchpad layout for HR operations | 2 |
11 | OData Services | OData & SAP Gateway Fundamentals | Understand entity sets, metadata, service documents and Gateway service exposure | Analyzing a sales-order OData service | 2 |
12 | OData Services | Consuming OData in SAPUI5 | Connect SAPUI5 apps to backend OData services using ODataModel | Customer list app connected to backend service | 2 |
13 | OData Services | CRUD Operations I: Read, Filter & Sort | Implement read operations, search, filters and sorters | Inventory lookup with search and filter capability | 2 |
14 | OData Services | CRUD Operations II: Create, Update, Delete | Implement create, update and delete flows with validation and confirmations | Maintenance request CRUD application | 2 |
15 | SAPUI5 Development | Views, Controllers & Event Handling | Build interactive UI logic using events, handlers and controller lifecycle methods | Approval cockpit with status actions | 2 |
16 | SAPUI5 Development | Routing & Navigation I | Configure routes, targets and navigation patterns | List-to-detail navigation for purchase requests | 2 |
17 | SAPUI5 Development | Routing & Navigation II | Pass route parameters, bind object pages and handle not-found states | Object detail page for vendor records | 2 |
18 | SAPUI5 Development | Forms, Validation & Messaging | Build validated forms and apply MessageToast, MessageBox and message handling patterns | Travel request creation with validation rules | 2 |
19 | SAPUI5 Development | Tables, Filters & Personalization | Build table-based screens with filters, sorting and personalization concepts | Operational dashboard for open service tickets | 2 |
20 | Fiori Elements | Fiori Elements Overview | Understand template-driven development and fit-gap between freestyle SAPUI5 and Fiori Elements | Selecting app type for finance reporting scenarios | 2 |
21 | Fiori Elements | List Report Application | Generate List Report apps from OData metadata and annotations | Vendor invoice list report | 2 |
22 | Fiori Elements | Object Page Application | Configure object page sections, facets and field groups | Invoice object page with header and item sections | 2 |
23 | Fiori Elements | Extensions & Adaptation | Use supported extension points and adaptation concepts | Adding a custom action to a Fiori Elements app | 2 |
24 | Annotations | CDS Annotations I: UI Vocabulary | Apply UI.LineItem, UI.FieldGroup, UI.Facets and UI.Identification | Annotation-driven procurement list and object page | 2 |
25 | Annotations | CDS Annotations II: Value Help & Criticality | Configure value helps, labels, semantic keys and criticality indicators | Traffic-light status display for order exceptions | 2 |
26 | Annotations | Metadata Extensions | Use metadata extensions to organize UI annotations cleanly | Clean annotation layer for a sales app | 2 |
27 | Advanced UI5 | Fragments & Dialogs | Create reusable XML fragments and dialog components | Reusable approval confirmation dialog | 2 |
28 | Advanced UI5 | Reuse Components | Build modular reusable components for enterprise applications | Shared address component for multiple apps | 2 |
29 | Advanced UI5 | Custom Controls & Formatters | Use formatters and custom control concepts for reusable UI behavior | Reusable status indicator for operational KPIs | 2 |
30 | Advanced UI5 | Advanced UI5 Integration Lab | Combine fragments, reuse components and advanced UI patterns | Reusable approval workflow UI module | 2 |
31 | Security & Authorization | Roles & Authentication | Understand authentication flow, business roles, catalogs and app authorization concepts | Role model for manager, processor and auditor personas | 2 |
32 | Security & Authorization | Authorization Testing | Validate app visibility, service access and role-based behavior | Authorization test checklist and evidence log | 2 |
33 | Deployment | BAS Build & Deployment | Build and deploy Fiori apps using Business Application Studio concepts | Deployable Fiori app package | 2 |
34 | Deployment | Transport Management | Understand deployment movement, transport governance and release readiness | Transport plan from development to quality system | 2 |
35 | Performance Optimization | Debugging SAPUI5 Apps | Use browser developer tools, SAPUI5 diagnostics and network tracing | Debugging runbook for common Fiori issues | 2 |
36 | Performance Optimization | Performance Best Practices | Optimize models, bindings, payloads, lazy loading and table performance | Performance checklist with before/after findings | 2 |
37 | Real-Time Project | Project Kick-off & UX Design | Define project scope, personas, app flow, data model and Launchpad entry points | Project charter + UX wireframe + role map | 2 |
38 | Real-Time Project | Project Build I: SAPUI5 & OData | Build core views, controllers, routing and OData integration | Working service-connected app foundation | 2 |
39 | Real-Time Project | Project Build II: Fiori Elements, Security & Deployment | Add Fiori Elements or annotations, role readiness and deployment packaging | Deployable end-to-end Fiori application | 2 |
40 | Real-Time Project | Project Presentation & Review | Demonstrate the business process, review UX, validate performance and capture next steps | Live demo + assessment rubric + improvement backlog | 2 |
📊 Learning Path Summary
Week 1 (Days 1–7): Foundations – Fiori UX, architecture, SAPUI5 project structure, MVC, controls, data binding and first mini-project
Week 2 (Days 8–14): Launchpad & OData – Launchpad content, catalogs, spaces/pages, SAP Gateway, OData consumption and CRUD operations
Week 3 (Days 15–19): SAPUI5 Development – Views, controllers, routing, forms, validation, messaging and table-based enterprise screens
Week 4 (Days 20–26): Fiori Elements & Annotations – List Report, Object Page, extension points, CDS annotations and metadata extensions
Week 5 (Days 27–32): Advanced UI5 & Security – Fragments, dialogs, reuse components, custom behavior, roles and authorization testing
Week 6 (Days 33–36): Deployment & Performance – BAS build/deployment, transport management, debugging and optimization best practices
Weeks 7–8 (Days 37–40): Real-Time Project – End-to-end Fiori app from UX design to live demonstration
🎯 Key Differentiators
- UX-to-Code Coverage: Connects SAP Fiori UX principles directly to SAPUI5 and Fiori Elements implementation
- Hands-On Practice: Every module includes practical labs using enterprise-style app scenarios
- Launchpad Readiness: Covers catalogs, groups, spaces, pages and role-based app access
- Service Integration: Builds confidence in consuming OData services and implementing CRUD operations
- Template + Freestyle Balance: Includes both Fiori Elements and freestyle SAPUI5 development patterns
- Production Mindset: Adds security, deployment, transport, debugging and performance optimization
- Project-Based Outcome: Ends with a complete real-time Fiori application suitable for demonstration and portfolio evidence
📚 Recommended Resources
- SAP Fiori Design Guidelines: UX patterns, controls and design recommendations at experience.sap.com
- SAPUI5 SDK: API reference, controls, samples and documentation at sapui5.hana.ondemand.com
- SAP Learning: Fiori, SAPUI5, Gateway and development learning journeys at learning.sap.com
- SAP Developer Tutorials: Guided tutorials for SAPUI5, Fiori Elements and BAS
- SAP Community: Blogs, sample applications and troubleshooting discussions
- Business Application Studio: Primary development environment for modern Fiori application development
🎓 Assessment & Outcomes
After completing this 80-hour SAP Fiori curriculum, learners will be able to:
- Explain SAP Fiori UX strategy, architecture and app types
- Build SAPUI5 applications using MVC, XML views, controllers, controls and data binding
- Configure Launchpad catalogs, groups, spaces, pages and intent-based navigation concepts
- Consume OData services and implement CRUD operations in SAPUI5
- Develop enterprise screens with routing, forms, validation, messages and tables
- Generate and configure Fiori Elements List Report and Object Page applications
- Apply CDS annotations and metadata extensions to drive Fiori UI behavior
- Use fragments, dialogs and reuse components for modular SAPUI5 development
- Understand role-based access, authentication and authorization testing
- Build, deploy and transport Fiori applications using BAS-oriented delivery practices
- Debug and optimize SAPUI5/Fiori applications using practical performance techniques
- Deliver a complete end-to-end Fiori application with demo evidence and review documentation