Skip to Content
Event Information
Author's profile photo Christian Kolbowski

Access the SAP Fiori elements hands-on session from TechEd 2021

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.

SAP%20Fiori%20elements%20OData%20V4%20app

 

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: https://github.com/SAP-samples/teched2021-IIS160

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

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Kishore Gokara
      Kishore Gokara

      Show Page Map is giving the error "Could not find any SAP Fiori Projects in workspace".

      Author's profile photo Christian Kolbowski
      Christian Kolbowski
      Blog Post Author

      Hi Kishore,

      the page map is accessible once you have generated a Fiori elements app on top of the sample service. This is described in exercise 1.

      For issues and questions about the hands-on exercises, you can also create an issue in the GitHub repository: https://github.com/SAP-samples/teched2021-IIS160/issues

      Best regards

      Christian

      Author's profile photo Kishore Gokara
      Kishore Gokara

      Hello Christian,

      Yes. I have completed exercise 1 and I am getting this error in Exercise 2 - Configuring the UI by Using the SAP Fiori tools Page Map

      Let me try again.

       

      Author's profile photo Christian Kolbowski
      Christian Kolbowski
      Blog Post Author

      You can also access the page map via the Fiori Application Modeller view accessible via the vertical toolbar on the left side.

      It should look like this:

      Let me know whether it worked for you. If you are still facing problems, please open an issue on the GitHub repository and attach the downloaded version of the project state.
      (select all project files except for node_modules, then select via menu File -> Download)

      Author's profile photo Kishore Gokara
      Kishore Gokara

      Hello Christian,

      I created a new dev space and its working. Not sure why its not working on my existing dev space.

      Thanks,

      Kishore.

       

      Author's profile photo Christian Kolbowski
      Christian Kolbowski
      Blog Post Author

      Hello Kishore,

      Good to hear that you were able to get it running.

      For tools issue analysis, you can access the tools log via menu View -> Output, and in the output view, select Fiori tools - Application Modeller in the top right drop down.

      Regards,

      Christian