Creating Offline Mobile Apps using SAP Web IDE

[midhun_vp]

Did you notice SAP UI5 Master Detail Kapsel Offline Application template while creating a new project in SAP Web IDE? It is a new feature added in HAT 1.4. This template allows you to quickly create a Kapsel based offline mobile app. In this blog you would find how to create an offline mobile app (CRUD) using this template.

• • 
    Prerequisites
    
  
  
  • 
    Configure App in HCPms
    
  
  
  • 
    Create App in Web IDE
    
    • 
      Create
      
    
    
    • 
      Update
      
    
    
    • 
      Delete
      
    
    
  
  

Prerequisites

1. SAP Web IDE
2. Hybrid App Toolkit
3. HCPms

Configure App in HCPms

• From HCPms admin cockpit click on Applications, then click on + button, and provide below details.

Note: The backend URL is dynamic, you need to create a URL with a session ID associated with it, that allows you to do CRUD operations. Click on this link to get your URL: http://services.odata.org/V2/(S(readwrite))/OData/OData.svc/

Create App in Web IDE

• Open SAP Web IDE. Click on File > New > Project from Template.
• Choose SAP UI5 Master Detail Kapsel Offline Application template. Then click Next.

• Enter project name and click Next.

• Choose source as Service URL, then enter the following details and click Next. Note: Follow this blog to configure backend with Northwind Odata service.

• Choose Products from the list of Odata collections. Hence Products collection will be available offline in the device. Click Next.

• Provide the details as given below and click on Finish.

• Check the box Key Properties, then click on Finish. A new project will be created.

• Right click on the project and click Project Settings. Click on Device Configuration.

• Choose mobile OS and plugins to be supported by the application.

• Choose the plugins Device Information and Network Connection, it is a prerequisite for the offline Kapsel template. You could also note that the Splash Screen plugin was checked by default.

• Choose Offline and Logon plugins.

• Provide your HCPms trial account details

• Right click on the project > Run > Run on > iOS simulator. You are free to choose your mobile platform here. It will run the app in the simulator.
• Once you login to the app you could find the list of products.

Note 1: Backend doesn't need credentials, hence you could pass any value to login to the app.

Note 2: A local database was created in the device (offline store), the data populated is from the offline store. It is possible to do Create, Read, Update and Delete operations without internet connectivity in the device. When the device comes online click on Refresh button, it will send all the local changes to the backend.

Create

• From Home screen click on the + button to create a new record. After entering the values click on Save.

• Now you could see that the data was successfully added in the offline store. But it is yet reflected to the backend. To update this record to the backend click on Refresh button. (In the background it's calling the Flush API, which is part of Offline plugin)
• To see the new record in the backend, execute the Odata service in a web browser.

Update

• Choose any product from the list, then click on Edit button. After editing the record click on Save. Then click on Refresh. The record was updated. You could find it in the mobile app as well as in the Odata service reponse.

Delete

• To delete a record choose any product from the list then click on Delete button. Finally, from the Home screen click on Refresh.

This app works with SMP 3 too without any code change.

Also read about the limitations of Odata Offline.

Regards, Midhun

SAP Technology RIG

Other spaces to follow:

SMP Developer Center

SAP for Mobile

[rpanneel]

Thanks,

I knew it was something small and stupid to forgot .

Regards,

Robin

[Former Member]

I had same problem and I solved it !. The solution was to add the 'network connection' cordova plugin.

How did I figure it out ? I used the safari web inspector connected to my iPhone.

Thanks.

[rpanneel]

Hi Midhun,

When testing the application I always get an Alert "Failed to flush data back to server". But when I look at the contents in my Northwind-service i see custom data (that I have created in the app on my Android device). But on hcpms I see the following in the logs also: Backend connection (S(h0ghxacahtdhikllvny03qf1)) is not mapped for this application configuration ::0f89cb45-536e-4ec6-8cf3-4a408a481e7c#

Any idea's on why the Failed to flush alert is showing up when trying to refresh the offline store?

Thanks in advance!

Kind regards.

Robin

[ParagJain]

Hello Midhun,

The following option isnt available in WebIDE:

• Choose SAP UI5 Master Detail Kapsel Offline Application template. Then click Next.

Is there any other way to achieve this ?

Regards,

Parag.

[Former Member]

Hi Midhun,

Thanks for a very good blog, I am trying same app trail deploying on Andriod Emulator, I am getting logon screen and able to successfully logon and Disable passcode and submit. after that showing a Blank screen. I get below log trace on hcpmsadmin logs. Can you please help me with this issue.

75de772954a8##com.sap.mobile.platform.server.online.filter.application.SMPOnDemandApplicationSettingsHandler:doBeforeSecurityConfig########546#####Retrieve appHandler=odata, application=com.sap.OpenSAPOffline and backendURL=/Connections('491affb4-6662-404c-a8a5-3039460f9c7e').# #2.0#2016-03-09 06:14:25 PM#DEBUG#Registration###Registration#1457547265356007#1f23ca85-8553-4b28-b2d6-75de772954a8#com.sap.OpenSAPOffline#com.sap.mobile.platform.server.online.filter.application.AbstractSMPApplicationSettingsHandler:setSecurityRequestAttributes########546#####Set com.sap.mobile.platform.server.security.SecurityConfig request attribute to NONE# #2.0#2016-03-09 06:14:25 PM#DEBUG#Registration###Registration#1457547265356004#1f23ca85-8553-4b28-b2d6-75de772954a8##com.sap.mobile.platform.server.online.filter.application.AbstractSMPApplicationSettingsHandler:doInternalFilter########546#####Found application com.sap.OpenSAPOffline from URI# #2.0#2016-03-09 06:14:25 PM#DEBUG####Foundation#1457547265356002#1f23ca85-8553-4b28-b2d6-75de772954a8##com.sap.mobile.platform.server.dispatcher.servlet.Logger:debug########546#####:=:matches: unmatched handlerServiceName coreservicesApplications# #2.0#2016-03-09 06:14:25 PM#DEBUG####Foundation#1457547265356003#1f23ca85-8553-4b28-b2d6-75de772954a8##com.sap.mobile.platform.server.dispatcher.servlet.Logger:debug########546#####:=:matches: unmatched handlerServiceName coreservicesApplications# #2.0#2016-03-09 06:14:25 PM#DEBUG####Foundation#1457547265356001#1f23ca85-8553-4b28-b2d6-75de772954a8##com.sap.mobile.platform.server.dispatcher.servlet.Logger:debug########546#####:=:matches: unmatched handlerServiceName coreservicesApplications#

Regards

Prasad

[agentry_src]

Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

Thanks, Mike (Moderator)

SAP Technology RIG

[Former Member]

Sure Thank you Mike for guiding, shall i delete my query from Comments.

[former_member221826]

Hi Midhun,

I have followed the procedure to build the offline app. Everything gone well but while updating or deleting an entry i am getting the error as shown below . Can you  help me out of this issue.

                                                   

And while i am performing any operation , northwind data is getting replicated with the same entry as shown below.

                                       

Thanks and Regards,

Saikiran Bommagowni.

[pieterjanssens]

Hello midhun.vp

I experience the same issue as Saikiran.

Either the master detail offline odata template is broken or the Northwind service has changed. Can you take a look at this?

[jmattfeld]

The guide does not work for me anymore: The Web IDE wizard converts the write-enabled URL to lower-case, rendering it unreachable. I described the problem here.

[diego_a]

Hi,

App is in "offline creatting application store ..." sap kapsel, never ends.

entering "this.appOfflineStore.store.open" remains showing the popup

What could be the problem?

Regards,

Diego.

[sivaganesh_krishnan]

The webide which you are showing in the demo looks like a old version, now they dont have create project with kapsel as offline application.. how do you suggest we can build hybrid apps now ?

[LudoNoens]

All,

The information in this blog is a bit dated. Our team has created a ‘new’ document and published this at http://go.sap.com/documents/2016/05/c4a42e7d-737c-0010-82c7-eda71af511fa.html

However, even this document is getting out dated pretty fast …

When using the OData source mentioned in that document, please replace it with https://sapes4.sapdevcenter.com/sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/

Regards,
Ludo

[LudoNoens]

The template mentioned in this blog is still available. The screenshot below is from hanatrial.

[sivaganesh_krishnan]

Hi ludo,

I have build an application on top of the odata url you provided, but everytime I run this app iam getting communication error, that offline store cannot be open. Can you pls let me know why this happens? 

[former_member250642]

Hi Sivaganesh K!

Did you found a solution for that error? I'm facing the same problem here. If you know how to solve this, could you please share the solution?

Best Regards,

Luis

[Former Member]

Hello midhun.vp

the app is working fine for create and read operations, but updating and deleting are not working.

I got following errors:

Update:

Delete:

I do not use the northwind service, but I have implemented my own xsodata service. When I try it with Postman, then it is working.

Thanks in advance!