Skip to Content

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.


  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:

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.



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



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

/wp-content/uploads/2015/06/appoffline2_714643.png /wp-content/uploads/2015/06/appoffline4_714647.png

/wp-content/uploads/2015/06/appoffline7_714653.png /wp-content/uploads/2015/06/appoffline6_714654.png


  • 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

You must be Logged on to comment or reply to a post.
  • Hi Midun,


    It is a great blog..Thanks for sharing it..


    I could not find SAP UI5 Master Detail Kapsel Offline Application template in my webIDE.


    Kindly help me to resolve this issue.




    • Hi Bharanidhran,


      Are you sure that you added HAT plugin to Web IDE? (Web IDE> Tools>Preferences).




      SAP Technology RIG

      • Hi Midhun,


        Thanks i missed HAT plugin in WebIDE


        But now i am getting below error while executing project in Android emulator.


        Also i am not getting option to execute in Ios device or emulator.


        kindly help me to resolve the below error.


        HAT _Error.JPG




        • Hi Bharanidharan,


          Please follow this guide to setup your HAT then you could try this example.


          To test the app in iOS emulator you need a Mac machine.



          SAP Technology RIG

          • Hi Midhun,


            I’m too getting same issues on my WebIDE.


            In Device configuration, I enabled only Android but I’m getting this same issues.


            Thanks in Advance,


          • Hi Mathan,


            Did you updated the HAT? The latest version is 1.7.


            Also check by changing the port to 9000 instead of 9010.


            Regards, Midhun

            SAP Technology RIG

          • Hi Midhun,


            Yes, I updated HAT 1.7.2 and then I gave port 9000.


            Till I’m getting that same error.


               Hybrid Application Toolkit 1.7.2 Enabled.


            Thanks & Regards,


  • Hi Midhun,

    I cannot register to my HCPms. But I can do it by using REST API.

    Could you supply some advice?

    And when I did device configuration on WebIDE, I didn’t set user&passwd for HCPms. Does it affect the registration?


    • Hi Frankie,


      When you are registering you need to use HTTPS, ie you need to turn on the Secure toggle button in Login screen.


      In this example I am not using any authentication so login credentials doesn’t matter, you could give any value here.



      SAP Technology RIG

  • Hi Midhun,


    Thank you for sharing this very interesting blog.


    I’m facing a little issue with the OData Collection, when at step 5 (Template Customization) in the WebIDE New Project wizard, that is, I cannot define ‘Main Data Fields’ and ‘Detail Section’ exactly as depicted in the blog.


    For instance, I cannot find ‘CurrencyCode’ as ‘Units Attribute’ in ‘Main Data Fields’; in the ‘Detail Section’, I cannot set ‘Additional Attribute1’ and ‘Additional Attribute2’ to ‘SupplierID’ and ‘Category’, respectively.


    At the end, the available Products OData collection fields look a little bit different:




    Do you have any clue?


    Thanks again and bye,



  • Hi Midhun,


    I’m trying to follow the blog but I’m getting a blank screen in the iOS Simulator and the WebIDE console is saying Timeout: 90.0 seconds, Simulate process exited normally.

    Do you have any clue?


    Schermata 2015-06-07 alle 15.12.56.png


    Thanks a lot.



    • Hi Flavio,


      Are you able to see the data when you run the app in the web IDE itself (Click on index.html file then click on run button on the menubar on top)?

      Were you able to see the logon screen ?



      SAP Technology RIG

      • Hi Midhun,


        Thank you for the answer.

        Yes, I am able to see the data when running the app in the WebIDE:


        Schermata 2015-06-08 alle 09.59.18.png


        From within the iOS simulator, I just got that blank screen, no logon screen.


        Thanks again for any help…




        • Hi Flavio,


          Are you sure that you added the required plugins to the project (Right click on project>Project settings>choose Kapsel plugins).

          Are you able to see any error in the Web IDE console when you run the project (right click on the index.html>run>ios simulator)? In the console you should be able to see plugins being added to the project.



          SAP Technology RIG

          • Hi A. Yacoubi,


            Actually, I didn’t find a clear reason for this issue. To get the app successfully working, I started everything again from scratch and this time I also installed the Android tools (they were not installed the first time I tried) and, running the Hybrid App Toolkit Installer for Mac, I selected both device platforms, iOS and Android (the first time, I was only dealing with iOS).

            After all this, the app was correctly starting and working.

            I hope this could be of any help.


            Thanks and bye,



          • Hi Flavio,

            I have the same problem i get also an empty screen. i think i have problems with android versions , could y please share which sdk version you use , which adt and also the properties of the android emulator.

            I have windows laptop.


            Thanks in advance

          • Hi Moo Yac,


            I am using a Mac; installed android sdk tools is release 22.6.2.

            Unfortunately, I never succeed in running the project within the android emulator (it takes a lot of time starting and finally always ends up with error code 0, with any of the several avd devices configuration I tried).

            iOS emulator instead is working great.


            I am sorry I cannot help further.



          • I had same problem and I solved it !. The solution was to add the ‘network connection’ cordova plugin.Screen Shot 2015-11-19 at 6.19.22 PM.png


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



  • Hi Midhun,

    Great way of testing the CRUD services. I have 1 question here though…

    when you say about checking if the entered data was updated “

    “To see the new record in the backend, execute the Odata service in a web browser.”

    You say to check the Odata url… But i understand that its an dynamic created URL.. How do i know which URL is mapped to my application ?


    Also, wanted to add a small trick here, maybe known to many –  once we execute the the App preview using Index.html from Webide in browser, we would also get a barcode link… We can point any barcode reader app in our Iphone or Android device and load it directly there.. In this way we can test it directly in our device without simulator.


    • Hi,


      The Odata used here is northwind service which is widely used in testing. So to do the CRUD operations they have given you an option to create a Odata service with a session id associated with it. You need to create a service with this session id, then configure it in HCPms. This should be the URL you have to look at whenever you do operations. This URL never changes.



      Midhun VP

  • Hi Midhun,

    Thank you for the awesome blog!

    Unfortunately I am unable to execute the app on my android device. I am getting the following error message when trying to run it:


    I already tried adding the datajs file to my project



    Maybe you have an idea why I am getting the error or you can refer me to somebody who does.


    Thanks again.


    Best Regards


    • Hi Oskar,


      You don’t need to add the datajs library manually in your project because the application uses sapui5 and datajs is part of it.


      Could you give the steps you did.

      Are you able to see data in the app when you preview it (click on index.html>click on Run button on the top menu bar)?



      SAP Technology RIG

      • Hi Midhun,


        i tried to recreate your guide as closely as possible. The only differences really are in providing the details for the “Detail Section” since the data model of the service changed.


        I am able to run the app in the web browser by clicking the green run button, but the cud operations do not work, so i am not able to alter the data. Reading works fine though.


        Best regards,



        • Hi Oskar,


          In the preview it’s using an Odata service which doesn’t allow CUD. To do the CUD operations we are using the service with a session id associated with it that you will be configuring it in HCPms/SMP as backend URL. You could test it only from mobile after registration with HCPms/SMP server.


          Are you able to see the app being pulled to device / login screen in the device ?

          Did you find any logs in the web ide console?



          • Hi Midhun,

            after building and running the app again it is now working on my android device.


            Unfortunately I don’t know how I fixed my earlier error. Thanks for helping me!


            Best regards,



  • Hi Midhun,


    first off, thank you for this great guide.

    I tried following your guide using a Odata-Service from ERP instead of Northwind. I connect the Service with Hana using the CloudConnector.

    I reveice a Problem after I prompt my Logon Details. The App registers in the Mobile Service Cockpit but then throws me this error.

    Screen Shot 2015-06-12 at 17.58.39.png

    Any idea what this might be?

  • Hi,


    Having had difficulties with iOS simulator, I am now trying to use Android, so I started from scratch.

    At the Prerequisites (2. Hybrid App Toolkit) I’m getting the following error, while in the ‘Build Hybrid Companion App’ step:




    cp: platforms/android/ant-build/CordovaApp-debug.apk: No such file or directory


    All previous steps are successfully completed.



    Could anyone help with this?


    Thank you very much indeed.



  • Hi,


    I followed all the steps mentioned and i was able to run the project as web application in IDE. The products list is getting populated.


    But, I am unable to insert or delete any record. It just prompts ‘Save failed’.


    I checked in the console and found the error was :

    “You are connected to a read-only data session. Update operations are not permitted for your session”

    Could anyone guide me on the solution. Thanks in advance.






  • Hi Midhun,


           We have a requirement where we need develop an offline app which updates the 3rd party system. The 3rd party is going to provide the api to be used.


    What should be our approach for this? Should I access the api directly in the app or can i consume it in odata service and use that service to build the app? Is the second approach a good approach?


    Any suggestions?




  • Hi Midhun,


    Excellent Blog.

    I see that 1 of the limitations is : media resources.

    That this means that even if the user of the application is online, is not possible to open for example a document ?


    Thanks in advance,

  • Hi Midhun,


    I followed the steps given in this blog .when first time i run the application i got registartion page after entering the details, application passcode page opened after entering passcode its shows error msg not able to open offline store but when i run the application again directly application passsocde page opened after entering the passcode i got search bar and no entities written below it .


    and while running the application i got warning regarding version of HAT so not able to understand what it mean run in compatibility issue if you are using HAT 4 .


    kindly find the screen shot of warning and output screen.



  • Thanks for the nice tutorial.


    Did anyone encounter the problem, that local changes are overwritten instead of saved to the backend?


    I created the app as described and also use the OData sample service. Registration on HCPms via app works just fine. I get the products list and can add/edit products with success message. However, when I press refresh, the changes are overwritten and are not saved in the backend. There are no error messages on the console.


    Best regrads,


  • Hi Midhun,


    Does this work on the HCP Trial accounts? Because the checkbox Offline OData is not enabled in my WebIDE Project.


    WebIDE Hybrid project offline - kapsel plugins.png


    My HAT is working and webIDE can connect to it.


    Thanks in advance!


    Kind Regards,



    • Hi Robin,


      It should work in trial. The logon manager is a prerequisite for offline. Hence if you select Logon manager you will find offline plugin enabled.


      Regards, Midhun

      SAP Technology RIG

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



  • 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 ?




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


  appHandler=odata, and backendURL=/Connections(‘491affb4-6662-404c-a8a5-3039460f9c7e’).# #2.0#2016-03-09 06:14:25 request attribute to NONE# #2.0#2016-03-09 06:14:25 application from URI# #2.0#2016-03-09 06:14:25 unmatched handlerServiceName coreservicesApplications# #2.0#2016-03-09 06:14:25 unmatched handlerServiceName coreservicesApplications# #2.0#2016-03-09 06:14:25 unmatched handlerServiceName coreservicesApplications#





    • 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

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

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

  • Hi,


    App is in “offline creatting application store …” sap kapsel, never ends.





    entering “” remains showing the popup


    What could be the problem?


    2016-08-23 16_48_16-device.bmp - Paint.png





  • 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 ?

  • 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? 

    • 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,


  • Hello Midhun VP

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

    I got following errors:





    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!