Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
In case you missed the SAP Fiori elements hands-on session (IIS160) during the excitement of TechEd 2021, I have great news: we have made all the material available so you can do the exercises on your own. I’m especially excited about this because these exercises allow you to try out some of the latest innovations in SAP Fiori elements and SAP Fiori tools, so we want as many people as possible to have access to the exercises.


In the hands-on session “Accelerate the Development of SAP Fiori Apps Using SAP Fiori Elements”, you have the opportunity to build an SAP Fiori elements app that uses many of the latest new features, including OData V4, SAP Cloud Application Programming Model (CAP), Flexible Programming Model, and SAP Fiori tools.

To complete the app, you will need access to SAP Business Application Studio, e.g. using a trial account on SAP Business Technology Platform.

In the exercises you will learn

  • How to generate an SAP Fiori elements app from a local CAP project

  • How it is now super easy to enhance and change the generated app using the SAP Fiori tools application modeler – not only, but also to comply with best practices in design

  • How the flexible programming model allows you to leverage building blocks to extend the app and still benefit from standard application behavior like draft or side-effects, all orchestrated by the SAP Fiori elements framework

The session consists of seven exercises in which you will build a travel app:

  1. Generating an SAP Fiori Elements App

  2. Enhancing the UI by Using the SAP Fiori tools Page Map

  3. Fine-Tuning the UI

  4. Flexible Programming Model: Extending the App with Fiori Elements Building Blocks

  5. Adding a Micro Chart to the Table Building Block

  6. Flexible Programming Model: Using the Chart Building Block

  7. Flexible Programming Model: Changing the Edit Flow by Implementing a Controller Extension

We designed the session to fit into the TechEd timeframe of around two hours, assuming you already have the trial account set up and know what you are doing. Actual results may vary. Since it is now self-paced, there is no need to rush. Having some experience with SAP Fiori elements and SAP Fiori tools is helpful, but not necessary. The purpose of the session is to introduce you to these solutions, especially the new functionality that we have introduced in the past year or so.

Here is the GitHub repository:

Have fun with it and let us know how you enjoy it or if you get stuck somewhere.