A new hands-on tutorial is now available to accompany the Devtoberfest session UI5 Middleware FE Mockserver in Practice — Setup, Use Cases, Live Coding. It’s a guided, step-by-step journey showing how to use @sap-ux/ui5-middleware-fe-mockserver productively with Fiori Elements and beyond covering setup, data strategies, actions, multi-service scenarios, tenant isolation, offline E2E testing with wdi5, and recording real backend traffic for offline replay.
Why this tutorial matters
The mockserver lets you develop and test Fiori apps locally and offline with metadata-accurate data, predictable scenarios, and action implementations without waiting on backend availability. The tutorial distills best practices into small exercises you can run immediately.
What you’ll learn (exercise overview)
| Exercise | Focus | Key Takeaways |
| 1. Basic Setup – Generated Data | Zero-config mock data from metadata | Start fast; remove backend proxy for true offline; draft simulation |
| 2. Custom JSON Data | Predictable datasets | Stable testing scenarios; relationships; consistent IDs and referential keys |
| 3. JavaScript Logic | Dynamic data + actions | Implement getInitialDataSet and executeAction; validations; latency simulation |
| 4. Multiple Services | Bookshop + Reviews | Microservices-style config with distinct metadata and datasets |
| 5. Cross-Service Communication | Service-to-service flows | Trigger operations across services (e.g., promotion creates review) |
| 6. Context-Based Isolation | Tenant-specific data | Use ?sap-client= to switch tenants; optional tenant-aware logic |
| 7. Error Handling | Business and system errors | Return 400/404/422/500/501 with helpful messages for UI testing |
| 8. Offline E2E Testing | wdi5 + mockserver | Reliable CI-ready tests without backend dependency |
| 9. Record Live OData | ui5-middleware-odata-recorder | Capture real backend traffic → generate mock datasets for offline replay |
How to get started
The tutorial is available in the README and is designed to run locally in small, focused apps per exercise. You’ll find commands, file locations, and ready-to-run configurations.
- Tutorial (GitHub README): ui5-fe-mockserver-tutorial
- Open UX OData repository: github.com/SAP/open-ux-odata | Docs: API & guides
- Mockserver API references: getInitialDataSet | base API
- OData traffic recorder: ui5-middleware-odata-recorder | documentation
- Generate a Fiori Elements app (optional): Create App with Fiori Tools | EasyUI5 Generator
Session context
This tutorial was introduced in the Devtoberfest session UI5 Middleware FE Mockserver in Practice — Setup, Use Cases, Live Coding, featuring live coding around configuration, data providers, offline mode, tenant-specific datasets with fallbacks, cross-service scenarios, and wdi5 integration for robust E2E tests. You can rewatch the session now.
Links
- Devtoberfest event page: Session details
- Devtoberfest event: YouTube Live Stream
- Tutorial (GitHub README): ui5-fe-mockserver-tutorial
- Open UX OData repo & docs: Repository | Documentation
- Recorder middleware: GitHub | README
Read More Technology Blog Posts by Members articles
#abap