Skip to Content
Product Information
Author's profile photo Rasheed Abdul Azeez

Creating Offline Application based on SAP Web IDE CRUD Master-Detail Template using Hybrid App Toolkit

This blog post is outdated. We have reached end-of-maintenance for HAT local add-on. You can no longer download this tool from the SAP Store. We no longer support this tool. You are strongly advised to make use of our Cloud Build Service provided through Mobile Services to build hybrid apps. More information can be found here: https://blogs.sap.com/2018/08/16/announcing-end-of-maintenance-for-hybrid-app-toolkit-local-add-on-local-builds-only

For creating an offline app using Hybrid App Toolkit with Cloud Build Service, please check this blog: https://blogs.sap.com/2018/05/22/creating-an-offline-crud-hybrid-mobile-app-in-sap-web-ide-full-stack-with-hybrid-application-toolkit/

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.

Assigned Tags

      42 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Emmanuel Dacosta
      Emmanuel Dacosta

      Hello

      Thank you for this detailed explanation !

      Regards

      Emmanuel

       

       

      Author's profile photo Mehdi Jamai
      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 ?

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog 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"
      	}
          }
      }

       

      Author's profile photo Mehdi Jamai
      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

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog 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

       

      Author's profile photo Amol Gupta
      Amol Gupta

      You might like to attach the following image for Step 13 of "Create new project based on CRUD Master-Detail template"

      Author's profile photo Amol Gupta
      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.

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog Post Author

      Hi Amol Gupta,

      OfflineApp on Fiori Mobile build in the cloud is not supported yet.

      Regards,

      Rasheed

       

      Author's profile photo Sudhir Lenka
      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.

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog 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

       

      Author's profile photo Sudhir Lenka
      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.

      Author's profile photo Revathi B
      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?

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog 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

      Author's profile photo Revathi B
      Revathi B

      Thanks Rasheed on the reply.
      I would definitely try this single Page App out and get back. Thanks.

      Author's profile photo Former Member
      Former Member

      Hi Rasheed,

       

      Do you know where to find the documentation regarding the sap.hybrid namespace?

       

      Regards,

      Author's profile photo Vicente Veiga
      Vicente Veiga

      Hi Rasheed,

      I have the same question to you.

      Can you please provide sap.hybrid documentation reference?

       

      Regards,

      Vicente

      Author's profile photo Vladislav Volodin
      Vladislav Volodin

      This is a generated boilerplate code. I haven't found any documentation to it as well. The best solution is to create the hybrid application on your PC and study the source code.

       

      Author's profile photo Vicente Veiga
      Vicente Veiga

      Thanks Vladislav,

      I did that.
      In my "SAPHybrid" folder, I managed to access the source code.

      Regards,

      Vicente

      Author's profile photo Suerz 2017
      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.

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog 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

      Author's profile photo Suerz 2017
      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.

       

       

       

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog 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

       

      Author's profile photo R AVINASH KUMAR
      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.

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog Post Author

      Hi Avinash Kumar,

      Are you trying offline app using different backend system. If yes, the error is due to different backend system. If you can provide additional details will be helpful.

       

      Regards,

      Rasheed

      Author's profile photo Former Member
      Former Member

      Hi Rasheed Abdul Azeez,

      I’m facing the same problem. Although i’ve gone through the tutorial, i still can’t find out how to solve this problem.

      Here’s the property value of creating the offline store.

      All the other configurations are all done as told in tuto, will you please help me to figure out the problem?

      In addition, here's the error found during the creation of the offline store.

        Attempt to invoke virtual method 'android.content.Context android.content.Context.getApplicationContext()' on a null object reference

      Thanks.

      Author's profile photo Arpita Nath
      Arpita Nath

      Hi Avinash,

      Have you found the solution. I am also facing the same issue after running the app on the device.

      Author's profile photo Adam Harkus
      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?

       

       

      Author's profile photo Former Member
      Former Member

      Hi Adam ,

      Please check you have started the HAT Service in your Local System (…Sap_HAT_local/run)….if not start it and try it .It will work ?

       

       

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog Post Author

      Hi Adam,

      Have you enabled the Hybrid App Toolkit plugin in Web IDE prior to creating the project. This step is necessary to build mobile applications from Web IDE.

      Please refer to Enable Hybrid App Toolkit Plugin in SAP Web IDE section in this blog for the steps to enable Hybrid App Toolkit plugin

      Regards,

      Rasheed

       

      Author's profile photo Adam Harkus
      Adam Harkus

      Yes, HAT has always been enabled.

      I did create it from SAP Build though, could that be the reason?

      Author's profile photo Former Member
      Former Member

      Hi @Rasheed,

      I have few questions.

      1- Can I build Offline mobile application from trial cloud account ?

      2-  In plugins sectiion under Kapsel tab Logger and Offline OData options are disable for me. Is it due to trial account or something else?

      3- 1st i build a normal application and when I generate .apk file its size was 35 MB. Then I changed menifest.json file as you mentioned here. And again when I am generating .apk file its size is only 31 MB and I am getting blank screen in mobile when I am installing and running it. Can you explain it?

       

      Thank you

      Author's profile photo Former Member
      Former Member

      Anyone can answer please?

      Author's profile photo Former Member
      Former Member

      That is the reason I prefer Java over any technology.

      I should learn cordova plugin instead of  Fiori application development. Because the is no help on SAP Fiori.

      Author's profile photo Rasheed Abdul Azeez
      Rasheed Abdul Azeez
      Blog Post Author

      Hi Jameshed Javed,

      1. Yes you can use trial cloud account for building offline mobile application. The entire blog is done on trial cloud account only.
      2. In plugin sections under Kapsel tab, you have to manually enable Logon Manager, Logger and Offline oData plugins.
      3. You are getting blank screen because you do not have the necessary plugins enabled in the configuration

      Please pay attention to all the instructions in the step by step procedure.

      Regards,

      Rasheed

       

      Author's profile photo Adam Harkus
      Adam Harkus

      Fabulous Article Rasheed.

       

      We are start to use SAP BUILD before we get into adding services etc.

       

      How do we add in our Gateway/oData services to a project NOT built using your above Template instructions?

      Author's profile photo Former Member
      Former Member

      Hello, thanks for the great article!

      I followed all the steps to add Offline Functionality to an existing app, but when I run it on an iOS device, I don't get the Open Offline Store dialog, and while debugging I found out that "sap.hybrid" is undefined in my case. I enabled the corresponding Kapsel Plugins and added the configuration to manifest.json.

      Do you have any idea how I can solve my problem? Thanks!

      Author's profile photo Naveen RV
      Naveen RV

      Hi Rasheed,

       

      Thank you for this helpful post.

       

      I have my offline app setup and working as expected, i have a requirement to show a status if any pending items in local offline store to be synced, do you know how i can get this information?

       

      Thanks

      Naveen RV

      Author's profile photo Alok Khamari
      Alok Khamari

      Hi Rasheed,

      It is a great blog.

      I need a help . when I am trying to put the id and password its giving me Server Certificate Failed Validation. I've check with ES4 , I can access it and able to ping successfully HCPMS as well

      Thanks,

      Alok Kumar Khamari

       

       

       

       

      Author's profile photo Vicente Veiga
      Vicente Veiga

      Hi  Rasheed,

      Do you know a way to have a periodic refresh every X minutes?
      I can't find the documentation for "sap.hybrid" as I was trying to search for setting the interval parameter.

       

      Regards,

      Vicente

      Author's profile photo Adam Harkus
      Adam Harkus

      How do I apply a filter to the Defining request?

      E.g. I'd like to be able to filter some sets on userID, so that only records for that particular user are returned.

      Could you please provide an example?

      Author's profile photo Andre Julius
      Andre Julius

      Hi Rasheed Abdul Azeez

       

      I can't seem to get through "synAppOfflineStore"...it is a user defined function isn't it?

      If yes, can you share the code?

       

      Best Regards

       

      Andre Julius

       

      Author's profile photo Ludo Noens
      Ludo Noens

      This blog post is outdated. We have reached end-of-maintenance for HAT local add-on. You can no longer download this tool from the SAP Store. We no longer support this tool. You are strongly advised to make use of our Cloud Build Service provided through Mobile Services to build hybrid apps. More information can be found here: https://blogs.sap.com/2018/08/16/announcing-end-of-maintenance-for-hybrid-app-toolkit-local-add-on-local-builds-only

      For creating an offline app using Hybrid App Toolkit with Cloud Build Service, please check this blog: https://blogs.sap.com/2018/05/22/creating-an-offline-crud-hybrid-mobile-app-in-sap-web-ide-full-stack-with-hybrid-application-toolkit/

      Ludo Noens
      Product Owner – Hybrid Application Toolkit