Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
abdulazeez1
Advisor
Advisor
10,401

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


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

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




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.



42 Comments
former_member25364
Participant
Hello

Thank you for this detailed explanation !

Regards

Emmanuel

 

 
mehdijamai
Explorer
0 Kudos
Hey abdulazeez,

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 ?
abdulazeez1
Advisor
Advisor
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"
}
}
}

 
mehdijamai
Explorer
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
abdulazeez1
Advisor
Advisor
0 Kudos
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

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

former_member480510
Discoverer
0 Kudos
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.
Sudhir_Lenka
Contributor
0 Kudos
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.
abdulazeez1
Advisor
Advisor
0 Kudos
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

 
abdulazeez1
Advisor
Advisor
0 Kudos
Hi Amol Gupta,

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

Regards,

Rasheed

 
Sudhir_Lenka
Contributor
0 Kudos
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.
revathi_b
Discoverer
0 Kudos

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?

abdulazeez1
Advisor
Advisor
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
revathi_b
Discoverer
0 Kudos
Thanks Rasheed on the reply.
I would definitely try this single Page App out and get back. Thanks.
Former Member
Hi Rasheed,

 

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

 

Regards,
suerz
Explorer
0 Kudos
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.
abdulazeez1
Advisor
Advisor
0 Kudos
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
suerz
Explorer
0 Kudos

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.

 

 

 

abdulazeez1
Advisor
Advisor
0 Kudos
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 Kudos
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.

former_member239819
Participant
0 Kudos
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?

 

 
Former Member
0 Kudos

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 ?

 

 

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
Former Member
0 Kudos
Anyone can answer please?
Former Member
0 Kudos
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.
abdulazeez1
Advisor
Advisor
0 Kudos
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
abdulazeez1
Advisor
Advisor
0 Kudos
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

 
abdulazeez1
Advisor
Advisor
0 Kudos
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

 
former_member239819
Participant
0 Kudos
Yes, HAT has always been enabled.

I did create it from SAP Build though, could that be the reason?
former_member239819
Participant
0 Kudos
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?
Former Member
0 Kudos

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.

Former Member
0 Kudos
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!
rvn
Explorer
0 Kudos
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
former_member375470
Discoverer
0 Kudos
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

 

 

 

 
former_member507423
Discoverer
0 Kudos
Hi Avinash,

Have you found the solution. I am also facing the same issue after running the app on the device.
vicenteveiga
Participant
0 Kudos
Hi Rasheed,

I have the same question to you.

Can you please provide sap.hybrid documentation reference?

 

Regards,

Vicente
vicenteveiga
Participant
0 Kudos
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
former_member239819
Participant
0 Kudos
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?
Vlad
Product and Topic Expert
Product and Topic Expert
0 Kudos
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.

 
vicenteveiga
Participant
0 Kudos
Thanks Vladislav,

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

Regards,

Vicente
and23_julius
Participant
0 Kudos
Hi abdulazeez

 

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

 
LudoNoens
Product and Topic Expert
Product and Topic Expert
0 Kudos

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


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

Ludo Noens
Product Owner – Hybrid Application Toolkit