SAP Fiori & SAPUI5 Training

Understand what Fiori is as a design system and as an architecture before writing any code.

• Fiori design principles and the UX vision
• App types: transactional, analytical, factsheet
• Fiori elements versus freestyle SAPUI5
• The Fiori architecture on S/4HANA
• Embedded versus hub deployment of the front-end server
• SAP Fiori apps reference library
• SAP Fiori for Web and the current design language
• Where the classic GUI still fits

Learn the framework properly, because most Fiori problems are SAPUI5 problems.

• Bootstrapping and the SAPUI5 runtime
• MVC: views, controllers and models
• XML views and control hierarchy
• Common controls and the sap.m library
• Data binding: property, aggregation, expression
• JSON, resource and OData models
• Formatters, types and validation
• Fragments, dialogs and reuse

Build a real multi-page app rather than a single screen demo.

• Component-based app structure and manifest.json
• Routing configuration and route matching
• Navigation between views and passing parameters
• Master detail patterns and the flexible column layout
• Busy indicators, messages and error handling
• Internationalisation with i18n
• Device adaptation and responsive design
• Fiori launchpad intent-based navigation

Connect the front end to real SAP data, and know what to do when the service misbehaves.

• OData v2 and v4 differences that matter in practice
• Reading, creating, updating and deleting
• Filtering, sorting, paging and expand
• Batch requests and deferred groups
• Mock server and local testing
• CORS, destinations and the app router
• Gateway service troubleshooting
• Performance patterns for large data sets

Deliver apps faster by describing them in annotations instead of writing UI code.

• Fiori elements floorplans: list report, object page, overview page
• Annotation-driven UI explained
• UI annotations in CDS views
• Selection fields, line items and facets
• Value help and text arrangement
• Actions, determinations and draft behaviour
• Extending a Fiori elements app with custom sections
• When to choose elements over freestyle

Configure how users actually reach the apps, which is the part that most projects underestimate.

• Launchpad architecture and the app descriptor
• Semantic objects, actions and target mappings
• Catalogs, groups, spaces and pages
• Role design with PFCG for Fiori
• Business roles and business catalogs in S/4HANA
• Rapid activation of Fiori content
• Launchpad theming with UI theme designer
• Troubleshooting a tile that does not appear

Change standard apps without forking them, keeping upgrades manageable.

• Key user adaptation in the browser
• Adaptation projects in Business Application Studio
• Controller extensions and view modifications
• Extension points in Fiori elements
• Custom fields and logic with in-app extensibility
• Side-by-side extensibility on BTP
• Versioning and transporting adaptations
• Testing extensions against a new release

Ship the app and keep it running, including the parts that only appear in production.

• Deploying to the ABAP repository (BSP application)
• Deploying to SAP BTP with the app router
• Build tooling: UI5 tooling and CI basics
• Unit testing with QUnit and OPA5
• Browser debugging and the UI5 diagnostics tool
• Performance: bundling, caching and the index
• Monitoring usage and adoption
• Support handover and documentation