Skip to Content

A little while ago I wrote a blog about how to connect an SAPUI5 app to a SAP Netweaver backend and another blog about how to connect a JQM Phonegap app to the SMP Cloud. Let’s combine the two and in addition make it work for SMP on-premise as well.

Since SUP 2.2 a REST API has been available for HTTP client applications to access the SAP Mobile Platform. This is a great way for developers using third-party development tools to “platform” enable their apps and even publish them on the SAP Store.

I have developed the app using the SAPUI5 framework, the Neptune Application Designer (As I work in the software company) and the Adobe Phonegap build service (https://build.phonegap.com/).

The SMP REST services consists of:

  • Registration (creating an application connection)
  • Authentication
  • Native push notification
  • Configuration

I will only use the first two (I have written a blog about push notification here) and in addition use the optional CAPTCHA challenge functionality. CAPTCHA protection stops robot software from submitting requests.

Even though I will go through the Neptune process I have added the logon script so that others using other tools to create SAPUI5 apps can easily reengineer it.

The process of creating these apps with Neptune is VERY easy.

Create your SAPUI5 application in the designer then in the header tab add the standard javascript for SMP Logon by pressing this button /wp-content/uploads/2013/08/1_265695.png

/wp-content/uploads/2013/08/2_265696.png

Then in the “export to phonegap” transaction use your newly created app as the index file and add your SMP endpoint as Alternative URL and also check the SAPUI5 Login SMP option and add the SMP URL and the name of your SMP application

/wp-content/uploads/2013/08/3_265709.png

A tip is to save your choices as a variant as you don’t want to fill out all the other attributes such as Icons splash screens permissions etc more than once.

To find your endpoint (In the cloud edition) you can use the Download Endpoint button:

/wp-content/uploads/2013/08/4_265711.png

Now you will need to manually add the SAPUI5 library to you Phonegap package. A recommendation is to remove the debug files as the library is fairly huge (Black Berry build actually fails because the framework has too many files)

Your folder should look like this:

/wp-content/uploads/2013/08/5_265712.png

In the Neptune folder you will have the sapui5_smp_logon.js script that can be found on github here

Now upload to the Phonegap build service and you have an SMP compliant Hybrid app with CAPTCHA onboarding. First you need to connect with whatever authentication you have chosen in the Security profile in SMP:

/wp-content/uploads/2013/08/6_265713.png

Then you will receive a CAPTCHA challenge:

/wp-content/uploads/2013/08/7_265714.png

When you enter the correct code you are onboarded and authenticated and can receive your json data from the backend:

/wp-content/uploads/2013/08/8_265721.png

If you check your Application connection in SMP you will see you have a new Application Connection:

/wp-content/uploads/2013/08/9_265722.png

I hope this will inspire more people to use the fantastic REST services provided by SMP!



To report this post you need to login first.

9 Comments

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

  1. Sergio Ferrari

    Good one Njål,

    I’m wondering if you have also managed the Change password action and the event when the server asks for a new password (normally it happens after a certain number of days) ?

    thanks a lot

    Sergio

    (0) 
    1. Njål Stabell Post author

      Sure!

      We have this implemented. I will add it to github and post the link tomorrow. Works like a charm (checking old pwd.. that the new pwd is identical etc ect) 🙂

      (0) 
    1. Njål Stabell Post author

      Hi Harshal,

      You should package your app with phonegap/cordova. I normally use the build service from adobe but you can also use the Command Line Interface CLI (That is a good option if you wish to use the KAPSEL plugins later). So the app then needs to be installed on a device and it will communicate with SMP through the rest api’s that handles the on-boarding and authentication process and gives you access to the backend data (I guess you are using gateway and oData)

      BR

      Njål

      (0) 
  2. yusuf karabacak

    hi

    I had bought in the database sap.m.image.setsrc make base64 image data (), but I do not have a picture on the Android browser, thanks for your help

    (0) 
  3. Thomas Plattner

    Hi Njal,


    we wanted to try to use a Neptune Phonegap App through our SMP (OnPremise), but I can’t find any description on how to create the application neptsmp on our SMP server?


    regards

    Tom

    (0) 
    1. Njål Stabell Post author

      The name neptsmp is really just the name of the configured application on SMP.

      Please contact me directly or post a ticket on our support site if you need an online web session to set this up.

      BR

      Njal

      (0) 

Leave a Reply