Skip to Content
Part 1 Part 2
Part 3

Update: SAP’s recommended tool to develop SAPUI5 app is using SAP Web IDE. So I would suggest you to start with Web IDE instead of Appbuilder. More info: SAP Web IDE – Enablement

Today I have registered for SMP 3 trial available from SAP via SCN. So I spend few hours in developing a simple hybrid app. To make my life easy I used SAP Appbuilder also to develop my first hybrid app, Appbuilder helped me to design  screens quickly with drag and drop feature. It also helped to deploy the UI5 app to devices via SMP 3 with a cordova  container and SAP Kapsel plugins. For those who want to try the solution I am explaining the steps here.

Requirements:

Register for SMP 3 Trial, Registration – CloudShare Pro

Register for NWGW trial,  http://scn.sap.com/community/developer-center/netweaver-gateway

Download and install SMP 3 SDK (tested with SMP 3 SP01) from Download and install Mobile SDK SP05 or SAP Service Market  Place

Install Cordova in your system (version 3.1.0-0.2.0), Apache Cordova

Install SAP Appbuilder, SAP Development Tools for Eclipse

Install Android SDK, Android SDK | Android Developers

Configuring a Kapsel Application in SMP 3

1. Login to SMP cockpit in SMP 3 trial system > Click on “Applications” tab> click “New”.

ScreenHunter_121 May. 26 22.54.jpg

2. In the new dialog window give the below details and click “Save” button. This will open a new dialog.

ScreenHunter_121 May. 26 23.02.jpg

3. Under the tab “Back End” provide the end point url as http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/ and leave the remaining field as by default.

ScreenHunter_138 May. 27 01.33.jpg

4. Click on the tab “Authentication” and create a new profile with name “HTTP” (in the image it shows HTTP under existing profile since I created a profile earlier). Click on “New” button and select HTTP/HTTPS Authentication and click on “Create“, it opens a new dialog. Provide only control flag and url as given below and leave the other fields as by default. URL is http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/

ScreenHunter_138 May. 27 00.35.jpgScreenHunter_121 May. 26 23.07.jpg

5. Click on the “Save” button.

ScreenHunter_138 May. 27 00.59.jpg

6. Finally to test the backend connection, select the app connection and then click on “Ping“. The response will be a successful message as given below.

ScreenHunter_122 May. 26 23.08.jpg

ScreenHunter_122 May. 26 23.09.jpg

To report this post you need to login first.

27 Comments

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

  1. Iliona Iliadhi

    Was your backend url ready for use or did you in some way exposed it to sap webgui.Im really having a hard time on how to make my odata service visible in a browser.I dont have installed sap netweaver gateway and therefore i cant import them in sap service builder because i dont have authorization to create a project there.do you know any way to fix this in another way ?

    (0) 
    1. Midhun VP Post author

      In the example I am using NWGW trial, it has some sample OData services. I am using the Odata service http://sapes1.sapdevcenter.com:8080/sap/opu/odata/iwbep/gwdemo/ . Once you register for NWGW trial you will be able to use this service for testing. You can test this url from a browser that gives you the list of collections associated with the service.

      If you don’t have a NWGW you have to use toolkit for integration gateway (GWPA) to model the service and deploy it to integration gateway, this example might help you with it,How to use Integration Gateway with SMP 3.0 (Part 1)

      Midhun VP

      (0) 
  2. Iliona Iliadhi

    when i do ping for the new application this message pops up

    Backend system cannot be reached:::Root cause:::Exception during connection execute:

    (0) 
    1. Iliona Iliadhi

      The same steps you did anyway i made ping succesfully with another odata service but still in the second part i have problem with appbuilder connecting with the smp onboarding service,i read this have to do with google chrome and  but still i couldn’t find any solution for that.How did you fix this ?

      (0) 
      1. Midhun VP Post author

        Open the file datajs-1.1.0.min.js using any text editor (C:\appbuilder-1.0.1251\lib\onyx\util) and add the below code:

        if (!Document.prototype.createAttributeNS) {

          Document.prototype.createAttributeNS = function(namespaceURI, qualifiedName) {

           var dummy = this.createElement(‘dummy’);

           dummy.setAttributeNS(namespaceURI, qualifiedName, );

           var attr = dummy.attributes[0];

           dummy.removeAttributeNode(attr);

           return attr;

          };

        }

        if (!Element.prototype.setAttributeNodeNS) {

          Element.prototype.setAttributeNodeNS = Element.prototype.setAttributeNode;

        }

        Midhun VP

        (0) 
  3. Jitendra Kansal

    Midhun VP

    2 questions:

    1. I followed the same steps and got one error while pinging the Application connection id in SMP cockpit (installed in my machine) but got this error Backend system cannot be reached:::Root cause:::Exception during connection execute:

    Then i tried the same in SMP cloud and it did work. (what could be the reason for this error)? I am able to run this URL in my machine browser with valid id and password.

    2. I tried to run AppBuilder in Chrome browser, after doing SMP settings (help menu) and when i click on “Retrieve” in “SMP connection profile” page, i dont see any kind of messages in Service and request section.

    I have added the syntex as you mentioned in your previous reply.

    AppBuilder.PNG

    (0) 
    1. Midhun VP Post author

      Double check input once. Make sure you are using the public IP of your SMP 3 cloud, note that IP is dynamic so if you close the SMP cloud and reopens, it IP changes.

      Check this from from a public network if the above didn’t work.

      Midhun VP

      (0) 
    2. Midhun VP Post author

      jitendra kansal wrote:

      1. I followed the same steps and got one error while pinging the Application connection id in SMP cockpit (installed in my machine) but got this error Backend system cannot be reached:::Root cause:::Exception during connection execute:

      Then i tried the same in SMP cloud and it did work. (what could be the reason for this error)? I am able to run this URL in my machine browser with valid id and password.

      The network from which you are trying to connect is not allowing a connection to the mentioned service. So try it from a public network.

      Midhun VP

      (0) 
  4. Jitendra Kansal

    yes, i have crosschecked everything once again. Public ip address is the same what i mentioned earlier.   Do i have to comment this code of line?

    AppBuilderCode.PNG

    But does it make sense to check/ping public ip in CMD?

    (0) 
  5. ANGELIKI PISIRITZI

    Hi

    I have a problem when I am testing my app in appbuilder’s emulator.

    As you can see below, when I develop my superlist I can see my data.

    But when I choose run no data display.

    before.PNG run.PNG

                             Before                                             After

    How is it possible?

    My service is created with Integration gateway and everything is exactly as your tutorial.

    I don’t have any other error.

    Thank’s

    (0) 
    1. Midhun VP Post author

      Could you add the key field on the screen and check. Ex. In a Odata service a field would be defined as key, in my example BussinessPartnerID is the key.

      Midhun VP

      (0) 
        1. Midhun VP Post author

          Could you create a new application and check. I faced a similar issue, but after adding the key field to the superlist it worked. but not sure about the root cause.

          (0) 
            1. Midhun VP Post author

              No, I mean the field you defined as primary key when you created Odata Models using GWPA or the primary key in an existing Odata service. It can be the ID too if you defined so.

              (0) 
      1. umang patel

        Hi Jitendra,

        Thanks for the reply.Above document shows how to use the proxy…that I understood,but I dont know how to create that proxy.I am not aware of  that.

        Regards

        Umang Patel

        (0) 
            1. Jitendra Kansal

              then you can set these proxies in the props.ini file available in server installation path  (E:\SAP\MobilePlatform3\Server)

              -Dhttp.proxyHost=proxy.xxx.com

              -Dhttp.proxyPort=8080

              -Dhttps.proxyHost=proxy.xxx.com

              -Dhttps.proxyPort=8080

              stop services and regenerate SMP Mobile device as discussed in the document.

              (0) 

Leave a Reply