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;
this._startMockServer(sServiceUrl);
oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,
true);
this._setModel(oModel);
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 sapui5tutors@gmail.com.
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
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Subscribe to:
Post Comments (Atom)
1 comments:
Click here for commentsasdfsdf
ConversionConversion EmoticonEmoticon