How to embed mock data in a SAPUI5 mobile application

Introduction

You might wonder how to create a mobile app with SAP Web IDE which contains all the data inside of it. This could be useful for example if you need to do a demo and you don't have any connectivity with the backend server or if you simply want to test your mobile application.

Well, this is the right blog for you!

Of course there is nothing in this blog related to offline capabilities of a mobile app: what I'll show here is just a way to create an app which contains all the data inside of it.

Prerequisites

• SAP Web IDE 1.7 and later (you can register at SAP HANA Cloud Platform to get your development environment)
• Hybrid Application Toolkit 1.1.0+ downloadable from here

Walkthrough

This is the list of all the steps we'll go through:

1. Create a SAPUI5 Kapsel app with SAP Web IDE
2. Generate random data
3. Deploy and run the app on the mobile device
4. (Optional) Save real data to the JSON files

Let's get started!

Create a SAPUI5 Kapsel app with SAP Web IDE

The first thing you need to do is to create your mobile application using one of the Kapsel templates provided out of the box from SAP Web IDE. For this example I'm using the SAPUI5 Master Detail Kapsel Application template.

• Open SAP Web IDE
• From the File menu choose New --> Project from Template
• Select the SAPUI5 Master Detail Kapsel Application template and click on Next

• Enter a project name and click on Next

• Provide your data connection details and click on Test. For this example I'm using the service /sap/opu/odata/sap/zgwsample_srv/ located on the public gateway service http://sapes1.sapdevcenter.com:8080

• You will be requested to enter the credentials for accessing the service on the gateway. Enter the credentials and click on Next
• Enter the necessary information you want to get from the service and click on Next. This is what I want to display for this exercise:

• Click on Finish
• Run the application in the standard way to check if all works fine

Generate random data

We need to generate mock data so that this app can work with it.

• 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

• For each one of the collections, 10 records will be randomly generated and the grid will be automatically populated with the new data. You can also change some data, if you want, and add new records to the existing list
• Once you have created the mock data for all the collections click on OK
• In the model folder you will find as many files as the collections you have

Let's enable now the application to take always mock data. The easiest way to do it is to change the init function in the Component.js file.

• Open the Component.js file and locate the init function
• Remove completely the if statement you can find starting at line 81 (just after the declaration of the oModel variable)

• Replace the entire statement 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

Deploy and run the app on the mobile device

Now you can mobilise the entire application.

• Start your Hybrid Application Toolkit and deploy the app to your local machine

• When the deployment finishes, select the index.html file and run the app on your Android/iOS emulator/device.

• You should be able to use the app now without any connection to the outside world.

(Optional) Save real data to the JSON files

We are using now random generated data. What about if, for some of the collections, we want to use JSON files populated with real data coming from the service? We can do it using a nice trick.

• Once you have got the complete URL of the service, like http://sapes1.sapdevcenter.com:8080/sap/opu/odata/sap/zgwsample_srv/, append to it each one of the names of the JSON files you see in the model folder: then you need also to append the string "Collection?$format=json". So the format is this:

complete_URL_to_the_service + collection_name + "Collection?$format=json"

For example, let's take the Product.json file, so your final URL will be

http://sapes1.sapdevcenter.com:8080/sap/opu/odata/sap/zgwsample_srv/ProductCollection?$format=json

• Copy this URL and paste it in a new tab of your browser, you should get the following result

• Select the entire content of the page, i.e. by pressing CTRL+A on Windows or COMMAND+A on Mac, and copy it in the clipboard
• Go back on SAP Web IDE
• Double click on the Product.json file to open it, select the entire content of the file, delete it and paste here the content copied in the clipboard

• The new file is not yet ready, we need to do some adjustments to it. Remove the first 16 characters form the file, that is all the characters before the first open square bracket "["

• Go at the end of the file and remove the last two character, that is all the characters after the last closed square bracket "]"
• Save the file
• Retest your application.

You have done it!