Skip to Content
Product Information
Author's profile photo Stefanie Hager

Now Available: SAP Fiori elements add-on for OpenUI5

With OpenUI5 1.85, we have released the SAP Fiori elements add-on for OpenUI5. It includes the open.fe library, which is the OData V4 stack of SAP Fiori elements contained in the commercial SAPUI5 version. The open.fe library contains the List Report / Object Page floorplans and leverages the SAP Fiori elements metadata- and template-driven approach to SAP Fiori app development.

SAP Fiori elements makes it fast and easy to build enterprise-grade SAP Fiori apps. Making SAP Fiori elements available for OpenUI5 addresses a request that many customers and partners have voiced: to make SAP Fiori elements available to a wider community.

Highlights of the SAP Fiori elements floorplans for OData V4 include:

  • SAP Fiori elements floorplans for OData V4 generates a complete application based on the data structure exposed by an OData V4 service
  • Developers can add supplemental annotations, which provide additional semantics, and thus adopt the user experience
  • SAP Fiori elements applications automatically adhere to the latest SAP Fiori design guidelines
  • Thanks to the flexible programming model, it is possible to add custom UI5 freestyle coding on different levels of the application (page, section, actions, columns, selection fields).

Check SAP Fiori elements now supports OData V4 for additional information on the SAP Fiori elements functionality for OData V4. The SAP Fiori elements add-on for OpenUI5 is a full-fledged, unlimited deployment of the SAP Fiori elements for OData V4 functionality, but it can of course only leverage functionality that is available in the OpenUI5 library. This means there will be some constraints, e.g. no SAP Fiori launchpad services, no charting, but this is gracefully handled through the resilient architecture of the SAP Fiori elements floorplans for OData V4.

I hope I got you interested, so read on if you are ready to try it!

Building a SAP Fiori elements app leveraging the SAP Fiori elements add-on for OpenUI5 using an OData V4 service


Step 1: Provide an OData V4 service

First you need to provide an OData V4 service. Ideally, you should use your own OData V4 service, but for these setup instructions we’ll use a CAP node.js project which is provided via the SAP Samples github.

  1. Open a terminal in VSC and clone the Git repo as
    git clone remote-odata-service​
  2. Change to the recently cloned repository
    cd remote-odata-service
  3. Run the following commands one by one
    npm i
    npm i -g @sap/cds-dk
    cds watch fiori
  4. The services are now accessible at http://localhost:4004/

Step 2: Generate a SAP Fiori elements List Report Object Page (LROP) app with Fiori tools

Now you will generate a SAP Fiori elements app of type List Report Object Page (LROP) based on the OData V4 service.

  1. In VSC open the command palette (ctrl+shift+p on Windows, cmd+shift+p on Mac) and start the SAP Fiori tools application generator (>Fiori: Open Application Generator)
  2. Choose SAP Fiori elements applicationstart
  3. Select List Report Object Page – next
  4. Select Connect to an OData Service as Data source and enter as URL http://localhost:4004/browse – next
  5. Choose Books as the Main entity and texts as Navigation entity – next
  6. Complete the mandatory information module name (e.g. bookshop) and Project folder path for storing your app. Of course, you can also fill in the optional information. – finish

The SAP Fiori elements app has now been generated, but you are not quite done yet. If you were using SAPUI5 this would give you an already functioning app that could now be adopted and enhanced. But since you want to leverage OpenUI5, you have to do a few post-generation steps.

Step 3: Make changes in package.json and ui5.yaml required for using OpenUI5

You need to make a few changes in the package.json and the ui5.yaml files in order to switch the app to run with OpenUI5. The package.json file includes the dependencies like open.fe module which is a required library to run an OData V4-based List Report/Object Page application, while the ui5.yaml file is needed to use the UI5 Tooling configuration.

In the ui5.yaml, you have to add OpenUI5 as framework to switch the framework to OpenUI5 and install additional libraries from OpenUI5 like sap.m, sap.ui.core, sap.uxap etc.

  1. Go to your project folder (which was created in step 2) using the cd command or by right-clicking on the folder in the explorer in VSC and selecting open in terminal
  2. Open the package.json file and add @sap/open.fe under ui5/dependencies

    	"ui5": {
    		"dependencies": [
  3. Add @sap/open.fe as dependencies
    	"dependencies": {
    		"@sap/open.fe": "1.85.0"
  4. Open the ui5.yaml file to use the UI5 Tooling configuration to switch to the OpenUI5 framework and do the following changes:
    1. Change the specVersion to 2.2
    2. Remove the entry ui5Theme: sap_fiori_3
    3. Remove the complete ui5 configuration under server/customMiddleware (6 lines)
    4. Add the following framework entry right after the type entry:
      type: application  
        name: OpenUI5  
        version: "1.85.0"  
        - name: sap.m  
        - name: sap.ui.core  
        - name: sap.uxap
        - name: themelib_sap_fiori_3

Step 4: Run the V4 application:

  1. Go to your project folder
    Run the following commands one by one to install dependencies and start the application. ‘npm i’ will install the node modules including open.fe. ‘npm start’ will install the OpenUI5 framework.
    npm i
    npm start
  2. The List Report and Object Page application is now available at the URL http://localhost:8080/index.html
    Note: Clicking on the Go button in List Report application might request  user and password. Please enter user alice, no password.

We are very much interested in your feedback! Add a comment below or email me to let me know how you are using SAP Fiori elements with OpenUI5.

Special thanks to Vinod S Nair and Shrinivasan Neelamegam who were instrumental to creating this blog.
For the SAP Fiori elements product team, Stefanie Hager.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Ronnie André Bjørvik Sletta
      Ronnie André Bjørvik Sletta

      This is very good news. It's nice to see SAP put more and more of their technology stack into the open source space. 😊

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Unfortunately, the add-on is not open source.

      Author's profile photo Marco Beier
      Marco Beier

      Fantastic news and a nice blog post alongside with it!

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      CAP porting to other dbs will provide rocket fuel to the adoption of OpenUI5. Congrats to people waiting for Fiori elements in OS stake.

      Author's profile photo Octav Onu
      Octav Onu

      Great news.

      Will we see in the future an OpenUI5 Fiori App in Google/Apple/Windows stores? 🙂

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Is there a plan to actually open source open.fe? It would be nice if it could be available on GitHub.

      Author's profile photo Stefanie Hager
      Stefanie Hager
      Blog Post Author

      There are currently no plans to provide open.fe as open source.

      Author's profile photo Christian Pfisterer
      Christian Pfisterer

      Hello Stefanie Hager ,

      I just found this gem. Is the package still actively maintained? I did find version 1.115.0 which suggests the package is under active development.

      Are there any plans for a more detailled technical blog post?

      I can't get it to run so far. Also looking at the open question from Marian Zeis suggestes SAP is not really interested that people actually user this package?!

      Would be great if you could support us here.

      Thank you.


      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Peter Spielvogel,

      can you please direct this to the responsible person as Stefanie Hager isn't part of the Fiori Elements team anymore?

      Best Regards

      Author's profile photo Peter Spielvogel
      Peter Spielvogel

      Hi Gregor,

      Working on tracking this down. Slower than I had hoped since so many colleagues are on vacation.Please stay tuned...


      Author's profile photo Christian Pfisterer
      Christian Pfisterer

      Hi Peter Spielvogel ,

      any update on this topic?



      Author's profile photo Peter Spielvogel
      Peter Spielvogel

      Hi Christian,

      We continue to update SAP FIori elements for OpenUI5 in parallel with our updates to the standard SAP Fiori elements (for SAPUI5). As you can see in the downloads, usage is relatively small.


      Author's profile photo Christian Pfisterer
      Christian Pfisterer

      Ok this is good news.

      Maybe another detailled blog or tutorial would increase the adoption among devs. So far neither Marian or me got it running.

      Thank you.