Mock Data in SAP Web IDE

In this tutorial, I will explain how to run sap ui5 application with mock data in SAP Web IDE. This tutorial would be helpful for those who don’t have a backend connectivity with the server or don’t have  a network connectivity.
Here we will create a kapsel master detail sample project from Web IDE smart templates. We would be requiring only to provide basic information regarding the northwind Odata service.
Before starting with the tutorial, I am assuming that you have a free trial access of web IDE. If you don’t have the  access to it, then do register for a free trial version of SAP HANA Cloud Platform.
Okay, now let’s start with the tutorial. First of all, we will create a SAPUI5  Kapsel app with SAP Web IDE.
Open SAP Web IDE
Click on File>New>Project from Template

Select the SAPUI5 Master Detail Kapsel Application template and click on Next

Enter a Project Name and click on next

Now click on Service URL and provide NorthWind URL here, and specify the service you want to access.


Enter the necessary information you want to get from the service and click on Next


Now click on next and Finish.

Now Run the Project as Web Application, everything would be working fine.

Now we, will generate some random data, i.e mock data. For that, follow the steps:
Open the model folder located under the project we have just created in SAP Web IDE
Right click on the metadata.xml file and select Edit Mock Data

In the new screen, select one by one all the collections displayed in the list and for each one click on the Generate Random Data button. And Click on Ok button

Now in the project directory, within the model folder, a new file named Orders.json file will be generated. Similarly if you have generated other random data, it will be created in the model folder.

Now to enable the application to take the mock data, i.e to enable the application to take always mock data. Now change the init function in the Component.js file.
Replace the entire statement within if and else statement  at line no. 84 in component.js with the following code:
var sServiceUrl = mConfig.serviceConfig.serviceUrl;
oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);

This code will force the application to use always the mock server with the JSON files we have just generated
Save the Component.js file and run the application again in the desktop to check that it's now taking data from the mock server
So, this was all about running  sap ui5 application using mock data with SAP Web IDE. You should take a look at my previous tutorial using Mock Server in eclipse.
For any queries, mail me at If you loved my tutorials, comment down below your views. It always inspires me for making better blogs and stay tuned for more tutorials!!

Next Post »


Click here for comments
Thomas Joe
13 January 2021 at 03:38 ×


Congrats bro Thomas Joe you got PERTAMAX...! hehehehe...