This guide shows you how to run a SAP Fiori Reference App using the SAP Web IDE. In this case the Shop App.

  • Start the SAP Web IDE using the link you received
    from the SAP HANA Marketplace.
  • Log on with your user and password.
  • To start the create wizard, choose File New Project from Sample Application.
  • Alternatively you can use the button “New Project from Sample Application” on the main screen of the SAP Web IDE.
  • Select the app you want to run.
  • Select SAP
    Fiori Reference Applications
    from the dropdown box.
  • Choose e.g. Shop.
  • Choose Next.
  • Check the SAP Evaluation license agreement
  • scroll down the text and click the check box “I agree”.
  • Choose Finish
    to finalize the wizard.
/wp-content/uploads/2014/12/5_760276.png A new project including this Reference App is created in your workspace.

  • Check the project structure.
  • You can browse all subfolders. For example, View includes all user interfaces that are included in the Shop App.
/wp-content/uploads/2014/12/6_760385.png To run the App please click on the button Run.
/wp-content/uploads/2014/12/8_760386.png A new browser window starts. You can now choose to run the app with test data (local mock data).

Alternatively you can choose to run with real data when you have a proper connection to a backend system.

/wp-content/uploads/2014/12/9_760387.png The app now start in the selected mode..

  • You can select different view sizes.
  • Now you can do the following:
    1. Search for some products
    2. Add them to the shopping cart
    3. View the shopping cart
    4. Go to
      the checkout


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

  1. prasad badal

    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


    1. Hans-Juergen Richstein

      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


Leave a Reply