Using SMP with SAPUI5 Phonegap Apps and the SMP REST services

[Former Member]

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

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

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:

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:

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:

Then you will receive a CAPTCHA challenge:

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

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

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