Skip to Content

Introduction

In this blog, I am going to walk through the steps of creating an offline application based on CRUD Master-Detail template from SAP Web IDE using Hybrid App Toolkit

To follow the steps mentioned in this blog post, the following prerequisites needs to be met

  • You need to install Hybrid App Toolkit local add-on in your local environment.The installation and setup instructions for Hybrid App Toolkit local add-on can be found here

 

  • To create a CRUD master-detail application, we need a backend destination setup in SAP Cloud Platform. For this blog, we use SAP Gateway ES4 Demo System OData Service. If you have not previously signed-up for SAP Gateway Demo System, you can sign-up here

Setting up backend destination

  1. Access Cloud Platform cockpit using https://account.hanatrial.ondemand.com/cockpit
  2. On the left-hand side, select Connectivity tab, then Destinations tab.
  3. Click on the New Destination link to open new destination configuration form.
  4. Enter all fields as shown in below tables
Parameter Value
Name ES4
Type HTTP
Description ES4 Gateway System
URL https://sapes4.sapdevcenter.com:443/sap/opu/odata
Proxy Type Internet
Authentication Basic Authentication
User <your registered user>
Password <your password>

For Additional Properties fields click New Property and fill-up

Parameter Value
TrustAll True
WebIDEEnabled True
WebIDESystem ES4
WebIDEUsage odata_abap

 

5. Click Save.

Enable Hybrid App Toolkit Plugin in SAP Web IDE

Before creating the project using the SAP Web IDE Project template, we need to enable the “Hybrid App Toolkit” plugin, so that Hybrid Mobile features will be available in the SAP Web IDE.

  1. Open SAP Web IDE using the url https://webide-<your_trial_account>.dispatcher.hanatrial.ondemand.com  Replace the string “<your_trial_account>” with your HCP Trial Landscape account
  2. After entering SAP Web IDE, select Tools > Preferences or click on the Preference icon directly on the left bar

Or

3. Select Plugins. Find and check Hybrid App Toolkit to enable the plugin.

4. Click Save.

5.Click Refresh to reload SAP Web IDE

Create new project based on CRUD Master-Detail template

Now you will create a new application using the SAP Web IDE Project template wizard.

 

  1. In the SAP Web IDE select the Workspace root and open the context menu by right-clicking.
  2. Choose New > Project from Template to open the new project creation wizard.

3.  On Template Selection page, select SAP Fiori Application category and click on the CRUD Master-Detail Application to mark it as the template to be used for your new project

4. Click Next.

5. On the first page of the wizard, enter the Project Name as OfflineApp, Title as Products, and  Namespace as com.sap.offlineapp

6. Click Next

7. On the Data Connection page click on Service Catalog as service source.

8. From the drop down box select the ES4 Gateway System entry.

9. Type “BASIC” in the Search input field to filter

10. Select GWSAMPLE_BASIC service.

11. Click Next.

12. On Template Customization page, fill up the Data Binding – Object section as below

Check the box for “Display only required fields when creating a new identity”

13. Scroll down to the Data Binding – Line Item section,fill up the section as below.

            

14. Click Next.

15. Click Finish to create the new application.

16. Run the newly generated web application

17. Congratulations! You developed your CRUD Master-Detail application and you see it already running in preview mode.

Configure Offline Settings to the project

  1. Go to Workspace, select OfflineApp/webapp/manifest.json and open it code editor.

2. Switch to code editor view

3. Add the following code snippet at the end of the file

"sap.mobile": {
   "_version": "1.1.0",
   "definingRequests": {
       "ProductSet": {
           "dataSource": "mainService",
           "path": "/ProductSet?$expand=ToSalesOrderLineItems"
	}
    }
}

4. Save and close the file

Add code to Synchronize data

In this step, we will add a button to the Master view and a javascript code to the button press event to synchronize data to and from back end to offline store on the device

  1. Go to Workspace, select OfflineApp/webapp/view/Master.view.xml
  2. Right click on Master.view.xml, choose Open With/Layout Editor
  3. Now we can view the file in Layout Editor. Drag the Button and drop to bottom panel of our app.

4. Select the button on the bottom panel that we just added. On the right-hand side canvas, we will see a Properties/Button setting panel. Delete values in Text and Width properties, add sap-icon://refresh to Icon property.

5. Now your bottom panel should look like this

6. On the right-hand side canvas, select Events setting. and Press, New Function

7. Enter onSyncData, click OK

8. Go to Workspace, open OfflineApp/webapp/controller/Master.controller.js file.

9. Replace empty onSyncData function with the following code

,
/**
 *@memberOf com.sap.offlinesample.controller.Master
 */
//Code to refresh/flush OfflineStore
onSyncData: function() {
	if (sap.hybrid && sap.hybrid.isApplicationOnline()) {
		this.getView().setBusy(true);
		sap.hybrid.synAppOfflineStore(jQuery.proxy(this._syncSuccess, this), jQuery.proxy(this._syncFailed, this));
	} else {
		this._oODataModel.refresh();
	}
},

//Synchronization Succeeds
_syncSuccess: function() {
	sap.m.MessageToast.show("Data Synchronization succeeded", {
		duration: 3000
	});
	this.getView().setBusy(false);
	this._oODataModel.refresh();
},

//Synchronization Failed
_syncFailed: function() {
	sap.m.MessageToast.show("Data Synchronization failed", {
		duration: 3000
	});
	this.getView().setBusy(false);
	this._oODataModel.refresh();
}

10. Save and Close both view and controller files

Create an application on SAP Cloud Platform mobile services

  1. Go to your CPms Administration page (https://hcpmsadmin-<your_trial_account>.dispatcher.hanatrial.ondemand.com). Replace the string “<your_trial_account>” with your HCP Trial Landscape account
  2. Select Mobile Applications, then Native/Hybrid. Click new button

3. In the New Application pop up dialog, fill up with the following values

4. Click Save button. This saves the application and go to Edit Application page

5. In editing application page. Select Connectivity

6. Click on new destination Icon to create new destination

7. In Create Destination popup dialog, choose Mobile Destination for Type, and com.sap.offlineapp for Destination Name

8. Click Next

9. Fill-up the values as below

Parameter Value
URL https://sapes4.sapdevcenter.com:443/sap/opu/odata/iwbep/GWSAMPLE_BASIC/
Proxy Type Internet

10. Click Next

11. Choose Basic Authentication for SSO Mechanism

12. Click Next.

13. Fill in the User Name and Password for the backend account (SAP Gateway ES4 Demo System OData Service account).

14. Click Next and click Finish.

15. Go back to Edit Application page, and choose Security

16. Change Security Configuration to None, and then click Save

 

Configure Hybrid App Toolkit Local Add-on Settings

  1. Right click on OfflineApp, select Project Settings
  2. Choose Hybrid App Toolkit/ Hybrid App Configuration (Local Add-on)

3. For Application section, enter the information as shown below. And for Build Options choose Release Mode. For Platforms, select Android 

4. For Plugins section, under Cordova tab, check Network Connection; under Kapsel tab, check Logon Manager, Logger and Offline OData

5. Click Save button

Now we are ready to deploy the app to mobile devices through Hybrid app toolkit

Deploy the app to mobile devices

In this step we are going to deploy the app to selected mobile device and run the application in offline mode

 

  1. Right-click on OfflineApp project and choose the menu option Run à Run On and choose your desired device/emulator
  2. Wait for the HAT local add-on to created Cordova Project, Build the application in desired platform, Install the App on device and launch the application on device
  3. On start-up, application will load the Logon Screen as below

4. Enter your backend Username and Password and tap OK on Logon screen. If Logon is successful, you will see the Passcode screen.

5. Tap Disable Passcode button to load the application. It will show the loading screen as below. This is an indication that our application is an offline application

6. After creating offline store, the application screen should be like below

 

Testing the offline functionality of the app

To verify whether our app’s offline functions are working correctly, we can try the following steps

  1. Tap on HT-1000 row in master screen. This will navigate to detail screen.
  2. Click the Edit button on the detail page of item HT-1000.

3. Change the Currency Code from EUR to SGD.

4. Click Save button.

5.  Now on the phone screen, we can see that the currency code of HT-1000 has been changed.

6.  Switch to WebIDE, and click run, to run our web app. We can see that the currency code of HT-1000 remains at EUR. This is because the changes we make on mobile app is only stored on local store and not yet updated in backend service.

7.  Switch to the mobile app, and click the Synchronization button, wait for the synchronization completed successfully.

8.  Switch to the web app that we are running, and refresh the page. We can see that after synchronization, the currency code is finally updated to SGD.

To report this post you need to login first.

22 Comments

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

  1. Mehdi Jamai

    Hey Rasheed Abdul Azeez,

    Thanks for sharing this blog 🙂 . I think that if you don’t include the following:

    “stores”: [

       {
        “name”: “EntitySet”,
        “serviceRoot”: “myService.svc”,
        “definingRequests”: {
            “Products”: “/Products”
         }
      }

    You won’t have the “creating the offline store” pop up window. Do you agree ?

    (0) 
    1. Rasheed Abdul Azeez Post author

      Hi Mehdi,

       

      No, you don’t need this piece of code to create offline store using Hybrid Toolkit. All you need is the

      "sap.mobile": {
         "_version": "1.1.0",
         "definingRequests": {
             "ProductSet": {
                 "dataSource": "mainService",
                 "path": "/ProductSet?$expand=ToSalesOrderLineItems"
      	}
          }
      }

       

      (1) 
  2. Mehdi Jamai

    Hey,

    Thanks for the feedback, I will give it a try again :). Another issue that I have with my app is:

    On pressing the refresh button (to sync my data) and by creating a breakpoint on the following:

     

    sap.hybrid is always undefined, do you think i need to import a certain library at the controller or have any other clue ? Because on the press function it doesn’t get inside the if statement but directly to the else which is supposed to make a batch but on my network (devtools) no batch is sent which means no synchronization 🙁 .  Also, by doing some research on sap.hybrid I was not able to find enough information to solve the problem. Do you think it is related to the HAT plugin ?

    Thanks

    (1) 
    1. Rasheed Abdul Azeez Post author

      Hi Mehdi,

      Are you running the packaged app on device? If yes, definitely sap.hybrid is valid, if you are trying to run as Web Application (say from Web Preview on Web IDE), then sap.hybrid is undefined, as sap.hybrid is instantiated only when running it as a packaged application in cordova container.

      To the another query regarding you cannot find enough information on sap.hybrid, yes sap.hybrid is part of HAT plugin which get injected during mobile deployment/build process. (i.e. when you hit Run > Run On > Android Device/Emulator or Run > Run On > iOS Device/Simulator menu)

      Regards,

      Azeez

       

      (0) 
  3. Amol Gupta

    Hi Rasheed,
    Is it possible to deploy the OfflineApp with Fiori Mobile app built in the cloud ?
    I was trying to build the same OfflineApp using Fiori Mobile

    WebIDE
    -> OfflineApp
    -> Fiori Mobile
    -> Build Packaged App

    I was able to build app and run it on my Android device via Fiori Mobile but the Offline cababilty does not work. Changes made are directly sent to the actual service and not the local store on the device. Besides the App is asking for login credentials every time making it impossible to operate offline.

    (0) 
  4. Sudhir Lenka

    Hi Rasheed,

    Thanks a lot for the nice blog!!

    I have created the App and it works perfectly fine in the web browser but I am not able to deploy this App in my Android Mobile.

    When I try to run the App by right clicking on the project the options to select emulator/device are disabled for me.

    My android mobile is already connected with the laptop through data cable but still the options are disabled.

    Please find the attached screenshot for the same.

    Your help would be appreciated a lot.

     

    Thanks,

    Sudhir.

    (0) 
    1. Rasheed Abdul Azeez Post author

      Hi Sudhir,

      In the Hybrid App Configuration (Local Add-on) dialog, just check whether you have selected ‘Android’ checkbox under Platforms section? The Run On > Android Device/Emulator is enabled only when you select ‘Android’ checkbox under platforms.

      Regards,

      Rasheed

       

      (0) 
      1. Sudhir Lenka

        Hi Rasheed,

        Thank you so much for your response.

        I realized I have done a very basic mistake. 🙂

        I didn’t setup the local HAT environment, now I am in the process of setting this up.

        Thanks,

        Sudhir.

        (0) 
  5. Revathi B

    Hi Rasheed,

    Thank you so much on this blog.

    My question is,

    Can you please let me know on, SAPUI5 template dependency for offline? I tried on few single page applications it did not work out.

    The Offline capabilities as shown here, is it specific to only Master-Detail based apps?

    Can this Offline be implemented on a single view application ? If Yes, what is the way? can you give me an example?

    (0) 
    1. Rasheed Abdul Azeez Post author

      Hi Revathi,

      Offline feature is independent of SAPUI5 templates. As long as you create an SAPUI5 application which confirms to SAPUI5 best practice coding standard, you can enable offline feature on even a single page application.

      When I say SAPUI5 best practice coding standard, it means, it has the following folder structure

      Specifically, Component.js and manifest.json is present, whatever odata service you are using in your single page app, the odata model needs to be manually added to the manifest.json.

      I selected CRUD Master-Detail template in this blog, because all these parts are already incoporated in the template and I just only concentrated on the offline portion.

       

      Regards,

      Rasheed

      (0) 
  6. Suerz 2017

    Hi Rasheed,

    4. Enter your backend Username and Password and tap OK on Logon screen. If Logon is successful, you will see the Passcode screen.

    Can you please tell me that the above username and password is of ES4 or webide ??

    I have tried with both ES4 as well as with webide credentials.But Registration error is coming.Can you please help me.

    (0) 
    1. Rasheed Abdul Azeez Post author

      Hi Suerz,

      It should be username/password of ES4.

      For the Registration errors, please check whether you performed step 16 for section “Create an application on SAP Cloud Platform mobile services

      Another possibility is whether your device/emulator have access to the SAP Cloud Platform mobile service host?

       

      Regards,

      Rasheed

      (0) 
  7. Suerz 2017

    Hi Rasheed,

    Thanks a lot.Problem is solved now.

    Can you please tell me how to run this application in real time i.e in any android device in the form of  apk extension.

    As i already know to create apk from FIORI MOBILE -> BUILD PACKAGED APP,but that do not have offline capability.

    Kindly tell me solution for accessing offline application in my android device.

    P.S: As in case if there is no solution in accessing offline app in my android device,Is there any alternate solution for that.

     

     

     

    (0) 
    1. Rasheed Abdul Azeez Post author

      Hi Suerz,

      Connect your Android Phone via USB cable with the laptop and in SAP Web IDE project click Run > Run On > Android Device.  This will build the APK file and deploy it to your Android Phone and start the application on Android Phone.

      Before this, make sure your Android Phone is recognized in your laptop by running adb devices in command line. If your phone is not listed, then make sure USB Debugging is enabled in your Android Phone.

      Depending on the handset model/manufacturer, USB Debugging can be enabled with different instructions, but generally USB Debugging is enabled by

      1. Settings > About Phone > Build number > Tap it 7 times to become developer;
      2. Settings > Developer Options > USB Debugging.

      Regards,

      Rasheed

       

      (0) 
  8. R AVINASH KUMAR

    hi

    i am getting this error after installation of the app.Rasheed  can you help me with this.

    thanks in advance.And does this method valid for flush refresh  function as  available with old kapsel based template.

    (0) 
  9. Adam Harkus

    For some strange reason, I dont’t have the  Hybrid App Configuration (Local Add-on) option under Hybrid App Toolkit in project settings.

    Any idea why?

     

     

    (0) 

Leave a Reply