Skip to Content

Developing SMP 3 Mobile App using Appbuilder, Kapsel and SMP 3 Trial – Part 1

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

27 Comments
You must be Logged on to comment or reply to a post.
  • 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 ?

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

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

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

      • 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

  • 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

    • 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

    • 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

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

    • Hi Jitendra ,

      Are you able to solve the above error . Even i am facing the same issue. Let me any solution if you have have solved this.

  • 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

    • 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

      • I checked this but the problem still remains. I see the key in the preview of superlist but I can’t see this in appbuilder’s emulator.

        Angeliki

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

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