Skip to Content

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.10 and later (you can register at SAP HANA Cloud Platform to get your development environment)
  • Hybrid Application Toolkit 1.3.2+ 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

/wp-content/uploads/2015/03/2015_03_11_09_55_06_662651.png

  • Enter a project name and click on Next

/wp-content/uploads/2015/03/2015_03_11_09_55_50_662647.png

  • Select the Service Catalog data source and the destination you have configured for your service: in my case it’s named “es1“. You might be requested to enter the credentials for accessing the service catalog on the gateway.
  • Specify the service you want to access by selecting it in the dropdown list and click on Next.

/wp-content/uploads/2015/03/01_697694.png

  • Enter the necessary information you want to get from the service and click on Next (i.e. this is what I want to display for this exercise):

/wp-content/uploads/2015/03/2015_03_11_09_58_12_662653.png

/wp-content/uploads/2015/03/2015_03_11_09_59_28_662657.png

  • Click on Next
  • Click on Finish
  • Run the application in the Web Preview to check that all works fine

/wp-content/uploads/2015/03/2015_03_11_10_00_45_662658.png


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

/wp-content/uploads/2015/03/2015_03_11_10_05_23_662659.png

  • 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

/wp-content/uploads/2015/03/2015_03_11_10_06_33_662666.png

  • 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

/wp-content/uploads/2015/03/2015_03_11_10_08_16_662668.png


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)

/wp-content/uploads/2015/03/2015_03_11_10_02_05_662675.png

  • 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);







/wp-content/uploads/2015/03/2015_03_11_10_43_38_662677.png

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

/wp-content/uploads/2015/03/2015_03_11_10_10_11_662681.png



Deploy and run the app on the mobile device

Now you can mobilise the entire application.

  • Configure your Project Settings –> Device configuration by specifying the application name, a description, the application ID and the version

/wp-content/uploads/2015/03/02_697695.png

  • Choose the platforms which you want to deploy for and click on Save

/wp-content/uploads/2015/03/03_697696.png

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

/wp-content/uploads/2015/03/2015_03_11_10_11_45_662682.png

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

/wp-content/uploads/2015/03/2015_03_11_10_15_31_662683.png

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

/wp-content/uploads/2015/03/2015_03_11_10_18_54_662687.png




(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.

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

/wp-content/uploads/2015/03/2015_03_11_17_00_17_662726.png

  • 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

/wp-content/uploads/2015/03/2015_03_11_18_36_23_662698.png

  • Click on Edit –> Beautify to beautify the JSON file. It will be e

/wp-content/uploads/2015/03/05_697722.png

  • The new file is not yet ready, we need to do some adjustments to it. Remove the first 2 rows and part of the third just before the first open square bracket “[

/wp-content/uploads/2015/03/06_697723.png

  • Go at the end of the file and remove the last 2 rows, that is all the characters after the last closed square bracket “]

/wp-content/uploads/2015/03/07_697727.png

  • Beautify once again your code
  • Save the file
  • Retest your application.

/wp-content/uploads/2015/03/08_697729.png


You have done it!

To report this post you need to login first.

16 Comments

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

  1. Matthias De la Roche

    Hi Simmaco ,

    this is so cool ..

    What about adding a button to switch between mockdata and backend data ?

    This way you can demo your app live or from the mock data if no connection is available .

    (0) 
  2. sap kumar

    Hi Simmaco,

    I created SAP Fiori demo app with mock data, its working with in SAP WebIDE(Run with mockdata),

    But I want to run this app in FLP with mock data for demo purpose,

    So I did as you said in component.js file but still I I am not the data binding..

    Mock Data.jpg

    Component.js File:

    jQuery.sap.declare(“Sales_Oder_Mock_Data.Component”);

    jQuery.sap.require(“Sales_Oder_Mock_Data.MyRouter”);

    sap.ui.core.UIComponent.extend(“Sales_Oder_Mock_Data.Component”, {

      metadata: {

      name: “Sales_Oder_Mock_Data”,

      version: “1.0”,

      includes: [],

      dependencies: {

      libs: [“sap.m”, “sap.ui.layout”],

      components: []

      },

      rootView: “Sales_Oder_Mock_Data.view.App”,

      config: {

      resourceBundle: “i18n/messageBundle.properties”,

      serviceConfig: {

      name: “SALESORDERXX”,

      serviceUrl: “”

      }

      },

      routing: {

      config: {

      routerClass: Sales_Oder_Mock_Data.MyRouter,

      viewType: “XML”,

      viewPath: “Sales_Oder_Mock_Data.view”,

      targetAggregation: “detailPages”,

      clearTarget: false

      },

      routes: [{

      pattern: “”,

      name: “main”,

      view: “Master”,

      targetAggregation: “masterPages”,

      targetControl: “idAppControl”,

      subroutes: [{

      pattern: “{entity}/:tab:”,

      name: “detail”,

      view: “Detail”

      }]

      }, {

      name: “catchallMaster”,

      view: “Master”,

      targetAggregation: “masterPages”,

      targetControl: “idAppControl”,

      subroutes: [{

      pattern: “:all*:”,

      name: “catchallDetail”,

      view: “NotFound”,

      transition: “show”

      }]

      }]

      }

      },

      init: function() {

      sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

      var mConfig = this.getMetadata().getConfig();

      // Always use absolute paths relative to our own component

      // (relative paths will fail if running in the Fiori Launchpad)

      var oRootPath = jQuery.sap.getModulePath(“Sales_Oder_Mock_Data”);

      // Set i18n model

      var i18nModel = new sap.ui.model.resource.ResourceModel({

      bundleUrl: [oRootPath, mConfig.resourceBundle].join(“/”)

      });

      this.setModel(i18nModel, “i18n”);

      debugger;

      // ************************************************************************

      var sServiceUrl = mConfig.serviceConfig.serviceUrl;

      // //This code is only needed for testing the application when there is no local proxy available

      // var bIsMocked = jQuery.sap.getUriParameters().get(“responderOn”) === “true”;

      // // Start the mock server for the domain model

      // if (bIsMocked) {

      // this._startMockServer(sServiceUrl);

      // // this.start(sServiceUrl);

      // }

      // // Create and set domain model to the component

      // var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, {

      // json: true,

      // loadMetadataAsync: true

      // });

      // oModel.attachMetadataFailed(function() {

      // this.getEventBus().publish(“Component”, “MetadataFailed”);

      // }, this);

      // this.setModel(oModel);

      // var sServiceUrl = mConfig.serviceConfig.serviceUrl;

      this._startMockServer(sServiceUrl);

      var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);

      this.setModel(oModel);

      // *****************************************************************************

      // Set device model

      var oDeviceModel = new sap.ui.model.json.JSONModel({

      isTouch: sap.ui.Device.support.touch,

      isNoTouch: !sap.ui.Device.support.touch,

      isPhone: sap.ui.Device.system.phone,

      isNoPhone: !sap.ui.Device.system.phone,

      listMode: sap.ui.Device.system.phone ? “None” : “SingleSelectMaster”,

      listItemType: sap.ui.Device.system.phone ? “Active” : “Inactive”

      });

      oDeviceModel.setDefaultBindingMode(“OneWay”);

      this.setModel(oDeviceModel, “device”);

      this.getRouter().initialize();

      },

      _startMockServer: function(sServiceUrl) {

      debugger;

      jQuery.sap.require(“sap.ui.core.util.MockServer”);

      var oMockServer = new sap.ui.core.util.MockServer({

      rootUri: sServiceUrl

      });

      var iDelay = +(jQuery.sap.getUriParameters().get(“responderDelay”) || 0);

      sap.ui.core.util.MockServer.config({

      autoRespondAfter: iDelay

      });

      debugger;

      oMockServer.simulate(“model/metadata.xml”, “model/”);

      oMockServer.start();

      debugger;

      sap.m.MessageToast.show(“Running in demo mode with mock data.”, {

      duration: 4000

      });

      },

      getEventBus: function() {

      return sap.ui.getCore().getEventBus();

      }

    });

    please help me on this…

    thank you in advance

    (0) 
        1. Simmaco Ferriero Post author

          Hi Kumar,

          I just changed in the Detail.view.xml file on the line 48 the IconTabFilter ID from 1 to 3

          /wp-content/uploads/2015/11/s1_831072.jpg

          because it’s duplicate and the application is working fine with mock data. After you have done the change, please refresh your SAP Web IDE

          Regards,

          Simmaco

          (0) 
          1. sap kumar

            Hi Simmaco,

            I changed as you said and tested the app with Run on mock data its working but if I run with FIori sandbox (or FLP) is not working . I cleared the cache also…

            Capture.JPG

            (0) 
            1. Simmaco Ferriero Post author

              Hi Kumar,

              as you can see by the template used in this blog, these instructions are intended only for Kapsel applications. They may not work with Fiori templates and this is the case. I could try to investigate a little bit more to find a solution, but I cannot promise you anything for sure. I’m sorry for this! As soon as I’ll get some news I’ll ping you.

              Regards,

              Simmaco

              (0) 
              1. sap kumar

                Hi Simmaco,

                I try it but I am not getting,

                I try to execute the application with index.html its executing with Mock data…

                is there any way to call index.html in FLP..?

                (0) 

Leave a Reply