Creating Offline Mobile Apps using SAP Web IDE

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

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

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.

Provide below details and Click on Save.

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

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