Skip to Content

Fiori Reference Apps Step-By-Step Guide

The SAP Fiori Reference Apps are part of the SAP Web IDE. In this blog post I will show you how to access them.


  1. Getting an app
  2. Running the app with mock data
  3. Running the app against a real backend

1. Getting an app

Start the SAP Web IDE.

a) You can get the SAP Fiori Reference Apps from the Home Screen:

b) Or you can choose “File -> New -> Project from Sample Application”:

Have a look at the available apps and choose the app you want to try out:

We have selected the “Approve Purchase Orders”. Accept the terms and click finish:

The SAP Fiori Reference app is now copied to your SAP Web IDE workspace.

2. Running the app with mock data

To start a project we will first run it with mock data. At the end of the blog post you’ll find a link on how to run it with a real backend.

Open the folder “webapp -> test” and right-click the file flpSandboxMockServer.html or testOVPwithMock.html.

Choose “Run -> Run as -> Web Application”.

If you see the SAP Fiori Launchpad you can click on the first tile to start the app, otherwise the app starts automatically (Procurement Overview app).

Now you see the running application:

3. Running the app against a real backend

Please check out this blog post how to run the app agains a real backend.

Link collection

You must be Logged on to comment or reply to a post.
  • is it possible to run this with real data. is there a tutorial showing how to switch from mock data to real data assuming the odata service/destinations is ready


    • For running the apps in WebIDE against a real backend, the neo-app.json file of each app refers to a logical destination "RefAppsBackend". So either you create such a destination pointing to the desired backend (or Cloud Connector) within your cloud dashboard, or you change it in the neo-app.json to an already existing logical destination that points to the backend you would like to use.

      Regards, Hans-Juergen