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