Skip to Content

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

  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.

/wp-content/uploads/2015/06/appoffline17_714659.png

/wp-content/uploads/2015/06/2015_09_26_19_51_51_797903.png

/wp-content/uploads/2015/06/apoffline19_714661.png

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.

/wp-content/uploads/2015/06/webide1_714626.png

  • Enter project name and click Next.

/wp-content/uploads/2015/06/offine7_714630.png

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

/wp-content/uploads/2015/06/offline8_714628.png

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

/wp-content/uploads/2015/06/northwind1_714629.png

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

/wp-content/uploads/2015/06/webide5_714631.png

/wp-content/uploads/2015/06/webide6_714632.png

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

/wp-content/uploads/2015/06/appofflinw15_714633.png

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

Appofflinw16.png

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

/wp-content/uploads/2015/06/webide8_714635.png

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

/wp-content/uploads/2015/06/2016_02_09_20_37_26_888273.png

  • Choose Offline and Logon plugins.

Appoffline.png

  • Provide your HCPms trial account details

/wp-content/uploads/2015/06/webide10_714637.png

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

/wp-content/uploads/2015/06/appoffline1_714638.png

Create

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

/wp-content/uploads/2015/06/appoffline1_714638.png/wp-content/uploads/2015/06/appoffline12_714641.png

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

/wp-content/uploads/2015/06/appoffline13_714642.png

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.

/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

Delete

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

/wp-content/uploads/2015/06/appoffline8_714655.png

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

To report this post you need to login first.

67 Comments

You must be Logged on to comment or reply to a post.

  1. BHARANIDHARAN S P M

    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.

     

    Regards,

    Bharani

    (0) 
    1. Midhun VP Post author

      Hi Bharanidhran,

       

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

      /wp-content/uploads/2015/06/2015_06_01_12_46_39_714806.png

       

      Regards,Midhun

      SAP Technology RIG

      (0) 
      1. BHARANIDHARAN S P M

        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

         

        Regards,

        Bharani

        (0) 
        1. Midhun VP Post author

          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.

           

          Regards,Midhun

          SAP Technology RIG

          (0) 
          1. Mathan P

            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.

            connectionFail.PNG

            Thanks in Advance,

            Mathan

            (0) 
            1. Midhun VP Post author

              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

              (0) 
              1. Mathan P

                Hi Midhun,

                 

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

                 

                Till I’m getting that same error.

                Error.PNG

                   Hybrid Application Toolkit 1.7.2 Enabled.

                HAT.PNG

                Thanks & Regards,

                Mathan

                (0) 
  2. Frankie Fan

    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?

    Screenshot_2000-01-29-02-49-13[1].png

    (0) 
    1. Midhun VP Post author

      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.

       

      Regards,Midhun

      SAP Technology RIG

      (0) 
  3. flavio ciotola

    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:

     

    /wp-content/uploads/2015/06/imgage001_718342.png

     

    Do you have any clue?

     

    Thanks again and bye,

     

    Flavio

    (0) 
  4. flavio ciotola

    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.

     

    Flavio

    (0) 
    1. Midhun VP Post author

      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 ?

       

      Regards,Midhun

      SAP Technology RIG

      (0) 
      1. flavio ciotola

        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…

         

        Bye,

        Flavio

        (0) 
        1. Midhun VP Post author

          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.

           

          Regards,Midhun

          SAP Technology RIG

          (0) 
          1. flavio ciotola

            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,

             

            Flavio

            (0) 
            1. Moo Yac

              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

              (0) 
              1. flavio ciotola

                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.

                 

                Flavio

                (0) 
          2. Daniel Flores

            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.

             

            Thanks.

            (0) 
  5. Agnihotro Sinha

    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.

    Capture.PNG

    (0) 
    1. Midhun VP Post author

      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.

       

      Regards,

      Midhun VP

      (0) 
  6. Oskar Ong

    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:

    OfflineStoreError1.PNG

    I already tried adding the datajs file to my project

    OfflineStoreError2.PNG

     

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

     

    Thanks again.

     

    Best Regards

    Oskar

    (0) 
    1. Midhun VP Post author

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

       

      Regards,Midhun

      SAP Technology RIG

      (0) 
      1. Oskar Ong

        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,

         

        Oskar

        (0) 
        1. Midhun VP Post author

          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?

           

          Regards,Midhun

          (0) 
          1. Oskar Ong

            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,

             

            Oskar

            (0) 
  7. Ali B.

    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?

    (0) 
            1. Midhun VP Post author

              Hi,

               

              By following this blog, could you make sure you are able to get the data in a rest client. I just want to make sure it’s woking in online.

               

              Regards,Midhun

              SAP Technology RIG

              (0) 
              1. Ali B.

                Hey Midhun,

                 

                Everything works fine using REST Client , it registers (which works in the app aswell), an I’m also able to receive all the Data.

                Any Ideas?

                (0) 
                  1. Ali B.

                    Hi Midhun,

                    i figured it out finally, it had something to do with my CloudConnector security settings. It is working now.

                    Sadly I have another Problem now. I added multiple Views for the different tables I need to display. Thing is, I used to build a “normal” Sapui5 App with the same Odata Service and used the enitity’s associations to bind those tables in a row. That way i just received the Data I wanted. However, this is not working with this Template anymore, is just can display the EntitySet. Any hints on how to solve this problem?

                    Best Regards

                    Ali

                    (0) 
                    1. Midhun VP Post author

                      Hi Ali,

                       

                      You need to look at how offline is implemented in the app. You have to modify the auto generated code based on your requirement.

                       

                      You could have a look at this blog to understand how offline works:http://scn.sap.com/docs/DOC-58063

                       

                      Regards,Midhun

                      SAP Technology RIG

                      (0) 
                      1. Ali B.

                        Thanks for your Answer, I already checked that blog, I just cant seem to find where it defines the data the offlinestore is populated with.

                        (0) 
  8. flavio ciotola

    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:

     

    /wp-content/uploads/2015/06/img103_725225.png

     

    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.

     

    Flavio

    (0) 
      1. flavio ciotola

        Thank you, Midhun!

         

        That link really helped: just downgrading to Android SDK tools release 24.1.2 proved to be the solution to my issue.

        Now, the companion app built without problems.

         

        Thanks again and best regards,

         

        Flavio

        (0) 
  9. Amritpal kaur

    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.

     

     

     

    Regards,

    Amrit

    (0) 
  10. Gopi Nidjelli

    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?

     

    Thanks

    Gopi

    (0) 
  11. Adel Yacoubi

    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,

    (0) 
  12. abhishek lohiya

    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.

     

    /wp-content/uploads/2015/08/error_762231.png/wp-content/uploads/2015/08/error1_762236.png

    (0) 
  13. Jan-Henrich Mattfeld

    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,

    Jan

    (0) 
  14. Robin Panneels

    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,

     

    Robin

    (0) 
    1. Midhun VP Post author

      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

      (0) 
      1. Robin Panneels

        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

        (0) 
  15. Parag Jain

    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.

    (0) 
  16. Sai Prasad. S

    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

    (0) 
    1. Michael Appleby

      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

      (0) 
  17. Saikiran Bommagowni

    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.

     

     

                                                        ^6E1050FFC57A58196432AAA05F53F1EFD880D4E5706294E78C^pimgpsh_fullsize_distr.png

     

     

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

     

     

     

                                            ^640BDF76B4553F9D79673A0978E314A7806EECC93948FCDE79^pimgpsh_fullsize_distr.png

     

     

    Thanks and Regards,

    Saikiran Bommagowni.

    (1) 
  18. Diego Güizzo

    Hi,

     

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

     

     

    /wp-content/uploads/2016/08/3_1022313.png

     

    entering “this.appOfflineStore.store.open” remains showing the popup

     

    What could be the problem?

     

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

     

    Regards,

     

    Diego.

    (0) 
  19. Sivaganesh K

    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 ?

    (0) 
  20. Sivaganesh K

    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? 

    (0) 
    1. Luis Falé

      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

      (0) 
  21. Stefan Waldinger

    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!

    (0) 

Leave a Reply