Developing a simple SAPUI5 Mobile app using

SAP Mobile Platform, Enterprise Edition, Cloud

version
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

TABLE OF CONTENTS
SAP MOBILE PLATFORM (SMP), ENTERPRISE EDITION, CLOUD VERSION ........................................... 3
Prerequisites .................................................................................................................................................... 3
1. Setting up the application in SMP, Enterprise Edition, Cloud version .................................................. 4
2. Modify the existing SAPUI5 mobile app to use SMP ............................................................................... 7

2
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

SAP MOBILE PLATFORM (SMP), ENTERPRISE EDITION, CLOUD VERSION

SAP Mobile Platform (SMP), Enterprise Edition, Cloud version, is an on-demand mobile solution hosted on
the SAP HANA Cloud Platform that allows you to deploy your enterprise mobile applications in a cloud
environment and manage them. Some of the salient features of using SMP are

• Authentication – Authenticate users of the app, that map to an existing identity provider of your
enterprise
• Security - Access your business data behind a firewall in a secure way
• Prevent Denial of Service (DOS) attacks – enforce security for your application by using the
CAPTCHA feature
• Customizing your app – Providing a consistent user experience across all of your apps without code
changes
• Unified Push Channel – Use a common way to send push notifications to apps
• Application configurations, efficient administration and monitoring, extensive logging, usage statistics

In this tutorial, we show you how to configure an existing SAPUI5 mobile app to use SMP. It demonstrates
device registration and authentication feature of SMP. It consists of the following 2 steps

1. Setting up the application in SMP, Enterprise Edition, Cloud version – Here we setup the application
in SMP. We specify the backend details for the mobile app and the security profile for the
application. This is explained in section 1 of this tutorial.
2. Modify the existing SAPUI5 mobile app to use SMP – The existing SAPUI5 mobile app which
consumes data directly from the OData service is adapted to use SMP. This is explained in section 2
of this tutorial.

Prerequisites

For the purpose of this tutorial, we need the following prerequisites.

a. An OData service with authentication
b. An existing SAPUI5 mobile application

a. An OData service with authentication

The OData service that is used in this tutorial is https://companylistdemo.hana.ondemand.com/refapp-

companylistauth-web/companylist.svc. This OData service can be accessed using your registered user
credentials for hana.ondemand.com or hanatrial.ondemand.com, as it is configured to use the default
Identity provider.

For details on downloading the application that provides the OData service, please refer to this tutorial. To
setup this application to use authentication using default identity service of your SAP Hana Cloud Platform
account, copy and paste the following code into the web.xml file towards to end of the web.xml file.

<login-config>
<auth-method>BASIC</auth-method>
</login-config>
<security-constraint>
<web-resource-collection>
<web-resource-name>Protected Area</web-resource-name>
<url-pattern>/companylist.svc</url-pattern>
</web-resource-collection>
<auth-constraint>
<role-name>Everyone</role-name>
</auth-constraint>
</security-constraint>
<security-role>
<description>All SAP HANA Cloud Platform users</description>
<role-name>Everyone</role-name>

3
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

</security-role>

You can deploy this application to your trial account and use it as an alternative to using the above OData
service.

b. An existing SAPUI5 mobile application

The SAPUI5 application can be downloaded from here. For more details about the SAPUI5 application, you
can refer to the tutorial, which shows how to develop the SAPUI5 application.

We also need to wrap the SAPUI5 mobile app to run in a device. Please refer to this tutorial to wrap this as
an android application using PhoneGap. Test the application by running it in the emulator so that we have no
issues.

With this we are done with the prerequisites for this tutorial.

1. Setting up the application in SMP, Enterprise Edition, Cloud version

Below we show how to setup the application in SMP, Enterprise Edition, Cloud version. You can access
SMP using the URL https://smp-<yourtrialaccount>.hanatrial.ondemand.com/Admin

Steps to add the application in SMP is as described below.

1. Launch the SMP URL to get the initial launch page.

2. Click on the “APPLICATIONS” tab to get the screen where you can setup the mobile application.

4
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

3. Click on the “New” Button to setup the application details. Enter the following details and click on the
“Save” Button.
ID: specify an ID for the application: “Mobile_Companylist”.
Name: specify a name for the application: “MobileCompanylist”
Vendor: specify a vendor name: “acme”
Description: specify a description for the application: “Mobile Company List”

4. In the “BACKEND” information page, specify the details of the application as follows.
Endpoint: Here we specify the OData service that is used by our mobile app. Give the above
mentioned OData service or the service that you have deployed in your HANA trial account.
Connect to: select “Internet” radio button
Select the check box “Rewrite URL”. Also select the checkbox “Allow anonymous connections” and
specify the username and password used to authenticate the OData service in the fields “Username”
and “Password”. With this the backend configuration is done.

5
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

5. Select the “AUTHENTICATION” tab. Here we specify a new security profile. Select the Radio Button
“New” against the Security Profile. Specify a name for the “Security Profile Name”. Leave the other
options with the default values.
Towards the end, in the “Authentication Type” Header, select the Authentication Type as “Basic
Authentication” and specify the Application URL. This is the URL to the OData service. Select the
“Internet” radio button against the Connects to option.

6. With this we are done with the configuration of the application. Click on the “Save” button to finish the
configuration. If everything is configured successfully, in the home screen of the application, you will
see the new application with the “green” status.

6
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

2. Modify the existing SAPUI5 mobile app to use SMP

Here we show how you can configure this existing application to work with SMP.

1. Create a new folder “js” under the “www” folder. Create a file named “config.js” here. In this file, we
specify the SMP application configuration. Copy and paste the following code in config.js file

jQuery.sap.declare("sap.app.config");

sap.app.config = {

7
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

//default SMP URL

smpUrl: "https://smp-i056088trial.hanatrial.ondemand.com",

//default settings for ABAP Gateway

cloudAppName: "com.sap.refapps.companylist",

connection: "/Connections",
deviceType: "Android",

//connection url for HANA Cloud

connUrl: "/public/odata/applications/latest/",

reqRepUrl: "/public/"

};
Replace the following values with the data that you used when setting up the SMP application.
smpUrl https://smp-<youraccountname>.hanatrial.ondemand.com
cloudAppName the name that you used when setting up the application name in SMP

2. Open the “App.controller.js” file found under the “refapp-msapui5-companylist” folder. Comment out
the code that defines OdataModel in the “onInit” function and add the this.loadData(); method as
show below. The loadData() function is used to setup the connection of the app to SMP.

onInit : function() {
var view = this.getView();
// to avoid scrollbars on desktop the root view must be
// set to block display
view.setDisplayBlock(true);
/* var oModel = new
sap.ui.model.odata.ODataModel("https://companylistdemo.hana.ondemand.com/refapp-
companylist-web/companylist.svc/");
view.setModel(oModel);*/

this.loadData();

// remember the App Control

this.app = sap.ui.getCore().byId("theApp");
// subscribe to event bus
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("nav", "to", this.navToHandler, this);
bus.subscribe("nav", "back", this.navBackHandler, this);

},

3. Create a “loadData” function in the same file “App.controller.js” by copy and pasting the below code
just under the “onInit” function

loadData: function(){

var newUrl = "";

var sServiceUrl = "";
appC.appCID = "ESPM"+new Date().getTime();
//on-boarding using SMP

8
Developing a simple SAPUI5 Mobile app using SAP Mobile Platform, Enterprise Edition, Cloud version

newUrl = sap.app.config.smpUrl + sap.app.config.connUrl +

sap.app.config.cloudAppName;

jQuery.sap.require("sap.ui.model.odata.ODataModel");
mHeaders = { "X-SUP-APPCID" : appC.appCID };
this.loginModel = new sap.ui.model.odata.ODataModel(newUrl, false, null,null,
mHeaders);
var oEntry = {};
oEntry.DeviceType = sap.app.config.deviceType;

this.loginModel.create(sap.app.config.connection, oEntry, null, null);

//request-response using SMP
sServiceUrl = sap.app.config.smpUrl + sap.app.config.reqRepUrl +
sap.app.config.cloudAppName;
$(function(){

jQuery.sap.require("sap.ui.model.odata.ODataModel");
mHeaders = { "X-SUP-APPCID" : appC.appCID };
appC.oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,false, null, null,
mHeaders);
appC.oModel.refreshSecurityToken();
appC.oModel.setSizeLimit(100);

appC.oModel.attachRequestFailed(function(evt) {
alert("Server error: " + evt.getParameter("message") + " - " +
evt.getParameter("statusText"));
});
jQuery.sap.log.debug(appC.oModel);
sap.ui.getCore().setModel(appC.oModel);

});

},

The above code is used to set up the device registration by passing the “appCID” to the SMP. Once
the device is registered successfully, the data from the OData service is pulled out using the
application connection url.

4. Now open the index.html file and modify the script tag that declares the localResources to the one as
shown below.
<script>
jQuery.sap.registerModulePath('app', 'js');
jQuery.sap.require("app.config");
sap.ui.localResources("refapp-msapui5-companylist");
// define View and place it onto the HTML page
var view = sap.ui.view({id:"appView", viewName:"refapp-msapui5-companylist.App",
type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>

In the above code, we have registered the path to the “config.js” file.

5. Run the application in the emulator or on the actual device. You should be able to see the data in the
app pulled in from the OData service that is setup in SMP.

This tutorial demonstrates some of the functionalities of SMP, which is device registration and authentication.

9
www.sap.com

© 2014 SAP AG. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP

BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP
products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP AG in Germany
and other countries.

Business Objects and the Business Objects logo, BusinessObjects,

Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and
other Business Objects products and services mentioned herein as
well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP
company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL

Anywhere, and other Sybase products and services mentioned herein
as well as their respective logos are trademarks or registered
trademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are
registered trademarks of Crossgate AG in Germany and other
countries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks of
their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials

are provided by SAP AG and its affiliated companies ("SAP Group")
for informational purposes only, without representation or warranty of
any kind, and SAP Group shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP Group
products and services are those that are set forth in the express
warranty statements accompanying such products and services, if
any. Nothing herein should be construed as constituting an additional
warranty.