Skip to Content
Author's profile photo Midhun VP

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

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

Assigned tags

      27 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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 ?

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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

      Author's profile photo Former Member
      Former Member

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

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

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Could you give details on the steps you performed.

      Author's profile photo Former Member
      Former Member

      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 ?

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Midhun VP

      Do you know password of that windows server machine at cloud?  By mistake, it has locked. 🙁

      Author's profile photo Midhun VP
      Midhun VP
      Blog Post Author

      Use the option "can't access your account" 🙂 from login page.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      I was talking about windows system locked out. It was asking some password. anyways i got it. I had to close the link and open it again.

      Author's profile photo Jitendra Kansal
      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

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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

      Author's profile photo Jitendra Kansal
      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?

      Author's profile photo Yogesh KishoreKumar
      Yogesh KishoreKumar

      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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.

      Author's profile photo Former Member
      Former Member

      ok I will create a new one! 

      In order to be sure, when you say key field you mean ID in my case?Capture.PNG

      Author's profile photo Midhun VP
      Midhun VP
      Blog 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.

      Author's profile photo Former Member
      Former Member

      Ping failed with following message:PingFailed.PNG

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Hi Umang,

      If you are accessing https external link through a proxy server, make sure you enable proxy detail as per below document How to configure SMP 3.0 to use proxy to access external resource

      Rgrds,

      JK

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      but I dont know how to create that proxy.

      umang patel Are you using any proxy in browser under proxy server?

      for Chrome>settings>Advanced settings>Change proxy settings>Connection>LAN settings

      Author's profile photo Former Member
      Former Member

      Yes Jitendra, its there.with address:proxy.xxx.com and port:8080

      Author's profile photo Jitendra Kansal
      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.

      Author's profile photo Former Member
      Former Member

      Hi Midhun,

      The link you have given of cloudshare is not working: Registration - CloudShare Pro.

      Also not able to login when I directly go to cloudshare site.

      Please suggest next step.

      Thanks