Skip to Content
Technical Articles
Author's profile photo Philippe Daucourt

The Subtle Way to Test SAPUI5 App with OData Mock Data with SAP Web IDE

In the SAPUI5 SDK Documentation, there are several topics explaining how to configure an OData Mock Server to test your app:

All these resources describe how to manually set up an OData Mock Server in your app but, if you use the SAP Web IDE, there is a more subtle way to do it without the need to painfully configure the server as stated in the aforementioned documentation.

This feature is officially described in the SAP Web IDE Documentation.

In SAP Web IDE, open your SAPUI5 project “Run Configurations” dialog and select the “Run with mock data” checkbox.

Then you have to configure the Mock Data usage in your SAPUI5 project settings. Don’t forget to save your settings once done.

“Root URI” and “Metadata” are not editable here because they are already set in app manifest.

If you choose to mock data from JSON files, you have to create a JSON file for each entity set in the localService/mockdata folder (here the entity set is called “Details”). If an entity set has no corresponding file in this folder, data are automatically generated by the Mock Server.

(If you prefer, you can also edit your Mock Data with the SAP Web IDE built-in Mock Data Editor as mentioned in this blog.)

If you run your new configuration, you’ll see your Mock Data in your application.

Subtle, isn’t it?

Actually the Mock Server is initialized for you by the SAP Web IDE in a runtime generated file called “extended_runnable_file.html” that appears in the “Sources” tab of your browser developer tools.

As you can see in the next picture, a script tag has been injected in the original “index.html” file with the code required to create an instance of sap.ui.core.util.MockServer with the configuration previously set in your project.

That’s all Folks!

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Manoj Mohanty
      Manoj Mohanty

      Hi Philippe,

      I am facing an issue with my custom Fiori application with Mock data.

      As there is a provision to maintain only one metadata file path in the Project Setting, I want to understand if the app will have multiple OData services used in different pages (like my application), how the app will pick mock data created using either Generated Data or JSon ?

      In the debugger, I am seeing the model is holding the mock data. But when it is coming to render the view, it is getting empty.

      One doubt - Is it required to create Mockserver.js like the steps mentioned in the odata-mock-data-editor