End-To-End Mobile Reference Application - SAPUI5

Mobile Retailing Scenario- SAPUI5
End-to-End Mobile Reference Applications
Mobile Retailing Scenario - SAPUI5
Copyright 2013 SAP AG or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.
The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
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.
SAP 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. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional
trademark information and notices.
This tutorial intends to complement SAP product documentation. While specific product features and procedures typically are explained in
a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business
problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP
Consulting.
Any software coding and/or code lines / strings (Code) included in this documentation are only examples and are not intended to be
used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain
coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or
damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.
Disclaimer:
Some components of this product are based on Java. Any code change in these components may cause unpredictable and severe
malfunctions and is therefore expressively prohibited, as is any decompilation of these components.
Any Java Source Code delivered with this product is only to be used by SAPs Support Services and may not be modified or altered in
any way.
Contents of this Tutorial

Introduction
1. Installations
2. Development of the SAPUI5 Mobile Retailing app
3. Deploy and run the application
4. Deep dive into the code
Introduction
What do you get here?
This end-to-end tutorial offers a walk through of the SAPUI5 based Mobile Retailing application for any developer. This application is
based on the Enterprise Procurement Model (EPM).
It guides you through the ready-to-run Mobile Retailing development scenario which includes:
Set up of your Development Environment from scratch (Section 1)
Setting up the Application on SMP(SAP Mobile Platform, enterprise edition, cloud version) and Gateway services (Section 2)
Retrieval of data using SMP from an ABAP backend using OData Services (Section2)
Deploy and run the Mobile Retailing application on an Android device (Section 3)
Walk through the important parts/code snippets in the Mobile Retailing application developed using SAPUI5 mobile libraries
(Section 4)
Scenario Overview
Architecture of the SAPUI5 Mobile Retailing Application
Scenario Walk through Details

Here the customer can browse through the various products available, view its details and then shop for the products online using a
mobile device.
1. Installations
1.1 Java 7 JDK
1.2 Register for SAP HANA Cloud Developer Account
1.3 Install Eclipse IDE
1.4 Eclipse SAP HANA Cloud Tools Installation
1.5 Download and install Android sdk and ADT Plugin
1.6 Download PhoneGap
Overview
Before developing the SAPUI5 Mobile Retailing Application, you need to download and set up the necessary tools, which include e.g.
Eclipse IDE for Java EE Developers and Eclipse Tools for SAP HANA Cloud.
Note: Make sure that the programs and tools are installed and configured as described in the following sections. If you use the
recommended default configurations (locations, paths, etc.) it is best guaranteeded that the applications will build and run without any
errors.
Section
Type
What is
needed
by this
Tutorial
Version
Configuration
Comment
1.1
program
Java SE 7
jdk1.7.0_21
set
JAVA_HOME=C:\Java\jdk1.7.0_21
and %JAVA_HOME%\bin added
to PATH
tutorial was tested with Java SE 7

(jdk1.7.0_21) but should work for lower
jdk1.7.0 versions and for Java SE 6 as well
1.2
account
SAP HANA
Cloud
Developer
Account
1.3
program
Eclipse IDE for

Java EE
Juno 4.2
SR2
1.4
tool
HANA Cloud
Tools
Installation
SAPUI5:
1.10.4
(Minimum)
1.5
SDK
Android SDK
and ADT
Plugin
latest
version
C:\dev\android-sdk
(default location used in this
tutorial)
1.6
program
PhoneGap
2.7.0
(Minimum)
C:\dev\phonegap-2.7.0
tutorial)
Make sure that you have an HANA Cloud

developer account for your SCN User: e.g.
HANA Trial Account: '<p-User>trial'
C:\dev\eclipse
tutorial)
1.1 Java 7 JDK

Make sure that you have installed latest Java 7 JDK from here: Java Development Kit 7
1. Installation details (for Windows 7.)
Choose Download of Java Platform (JDK)
Tutorial works with lower versions i.e. 2.3.0

as well
Choose download link (e.g. jdk-7u21-windows-x64.exe for Windows x64) which corresponds to your operating system.
The version of the JDK displayed in the screenshot might already be higher.
The tutorial should work with any higher version as well.
2. Execute the jdk-7u21-windows-x64.exe you downloaded (the "u21" version might already be higher in your case) and install
the JDK to <jdk 7 local installation directory> (for example located at C:\Java\jdk1.7.0_21).
3. Set the system environment variable JAVA_HOME=<jdk 7 local installation directory> (for example C:\Java\jdk1.7.0_21)
In Windows choose Start --> Control Panel --> System and Security --> System --> Advanced system settings.
Choose New to add the new JAVA_HOME system variable.

Select Path from the System variables list and choose Edit to add ";%JAVA_HOME%\bin" to the end of your "path"
variable.
Confirm with OK.
1.2 Register for SAP HANA Cloud Developer Account

For using the SMP (SAP Mobile Platform, enterprise edition, cloud version) you have to register once for a Cloud Developer Account.
Execute the following steps to register for your own Cloud Developer Account.
1. Open [https://account.hanatrial.ondemand.com]
2. Choose Register to open a registration form.

3. On the registration form enter the corresponding fields, read the Terms of use and then select the option that you have read and
understand the Terms and Conditions of SAP HANA Cloud and then choose Register.
4. A registration confirmation message appears.
5. An e-mail which contains the activation link of your cloud developer account will be sent to you.
Open the mail which was sent to your e-mail account
6. Choose the Click here to activate your account button and an Account Successfully Activated message will appear.
7. Choose Continue to launch the SAP HANA Cloud Cockpit of your newly created developer account.
8. As you launch your Cloud Cockpit the first time you have to decide which type of database your account should use.
Choose SAP HANA Database as Default Database Type for your newly created developer account and choose Continue.
9. A successfully created Developer Account message appears.

Confirm with OK to open your SAP HANA Cloud Cockpit
If a welcome page for the SAP HANA Cloud is displayed. Choose OK to hide it.
10. You will now see the initial HANA Cloud Cockpit for your developer account.
10
As there are no applications the HANA Cloud cockpit provides some suggestions in the Try, View, Develop and Read
sections what one could do next.
Also for more details regarding the SAP HANA Cloud cockpit you might read the corresponding HANA Cloud
documentation here
Remember your Account Data

After executing successfully the above described account creation steps you have your SAP HANA Cloud (Trial) Developer Account with
the following three parameters which you need later several times in the tutorial:
SAP HANA Cloud Developer Account name: "<your P-User>trial" (p-user with lower case)
(SCN) user name: <your P-User> (alternatively <e-mail> as user)
(SCN) user account password: <********>
During the SAP HANA Cloud Developer Account creation an SCN user account has been created with which you can
deploy your applications to your HANA Cloud Trial developer account. But you can also log on to SAP Community
Network where e.g. developers share their knowledge or ask questions in the SCN Developer Center
1.3 Install Eclipse IDE

1. Download the Eclipse IDE for Java EE Developers SR2 package from [http://www.eclipse.org/downloads/]
Example download link for Windows 64 Bit:
Optional Information: Eclipse installation notes

Make sure that Eclipse has write access to its installation location. If you have installed it
under Program Files, you might have to run it as an administrator. Otherwise, you may receive
strange error messages.
2. Extract the archive to C:/dev.

3. Execute C:/dev/eclipse/eclipse.exe (the Workspace Launcher dialog box opens).
4. In the Workspace Launcher dialog replace the suggested workspace path by workspace only
11
Mobile Retailing
Scenario- SAPUI5
4.
This ensures that the workspace is created in the eclipse installation folder C:/dev/eclipse/workspace
5. Confirm the dialog with OK
6. From the Eclipse main menu, choose Window --> Preferences (the Preferences dialog box opens).
7. Ensure you are using a JDK not a JRE

(The reason is that the later used Maven in Eclipse tool need a Java SDK and will not work correctly with a Java JRE)
Navigate to Java --> Installed JREs and ensure that the installed Java SDK 7 is selected as the Standard VM and NOT a JRE!
If Java JDK is not yet selected, then proceed as follows:
a. Choose Add...
b. Select Standard VM and choose Next
c. In the JRE home field, choose Directory...
d. Navigate to the location of your jdk7 (e.g. C:/Java/jdk1.7.0_21) and confirm with OK.
e. Select the checkbox of the jdk7 you just added (as shown in the screenshot above).
8. Then close the Preference dialog box with OK.
1.4 Eclipse SAP HANA Cloud Tools Installation
12

Make sure that Eclipse IDE is started and if a Welcome page is displayed, then close it.
Configure Proxy Settings
1. From the Eclipse main menu, choose Window --> Preferences.
In some operating systems, the path is Eclipse --> Preferences.
2. Choose General --> Network Connections to configure your proxy settings.

a. Case 1: Execute the following sub steps if you are not working in a network which uses a proxy:
Select Direct as Active Provider
Choose OK.
b. Case 2: Execute the following sub steps if you are working in a network which uses a proxy:
(example proxy settings: host: proxy; port: 8080; bypass proxy for '*.corp'; Adapt values according to your network)
Active Provider: Manual
Proxy entries for HTTP and HTTPS: proxy:8080, no proxy authentication
(In Proxy entries group: Select line with Schema HTTP and Provider Manual --> Choose Edit... --> Enter the
proxy as the Host and 8080 as the Port --> Confirm by choosing OK. --> Do the same for HTTPS.)
Proxy bypass: *.corp
(Choose Add Host..., enter string "*.corp" (without the double quotes) and confirm with OK.)
13
Choose OK.
Install SAP HANA Cloud Tools
1. In your Eclipse IDE, choose Help --> Install New Software.
2. Enter the following URL
https://tools.hana.ondemand.com/juno
in the Work with field and press ENTER.
If the Secure Storage dialog box asks for a new master password, choose No.
3. Select all categories as shown in the next screenshot and choose Next.
14
The versions of the installed features displayed in the screenshot might already be higher.
The tutorial should work with any higher version as well.
4. On the displayed Install Details page choose again Next.

5. Then read and accept the license agreement.
6. Choose Finish.
During the installation, a Security Warning dialog box will appear stating that you are installing software which contains unsigned
content.
7. Confirm with OK to continue the installation.

At the end of the installation, a message is displayed stating that you need to restart Eclipse and asking if you would like to
restart now.
8. Confirm the dialog with Yes to restart Eclipse immediately.
After this the SAP HANA Cloud Tools including the UI development toolkit for HTML5 (Developers Edition) are installed.
1.5 Download and install Android sdk and ADT Plugin

Download the Android SDK from here: http://developer.android.com/sdk/index.html
1. Choose the option USE AN EXISTING IDE and then click on Download the SDK Tools for Windows
15
2. Accept the teams and conditions and then choose Download the SDK Tools for Windows
3. Double-click the executable (.exe file) to start the install.

4. Follow the steps to download the android SDK. Make sure you specify the path for the download as C:\dev\android-sdk
16
5. Once the installation completes, the installer offers to start the Android SDK Manager.
Do not start the Android SDK Manager now. Uncheck the check box for Start SDK Manager and click on Finish Next move on to Installing
the Eclipse Plugin
6. If your eclipse has not been started, restart eclipse. Then select Help --> Install New Software.
7. Click Add...
8. In the Add Repository dialog that appears, enter "ADT Plugin" as Name and the following URL as Location
https://dl-ssl.google.com/android/eclipse/
17
9. Click OK.
10. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.
10. In the next window, you'll see a list of the tools to be downloaded. Click Next.
11. Read and accept the license agreements, then click Finish.
If you get a security warning saying that the authenticity or validity of the software can't be established, click OK.
12. When the installation completes, restart eclipse.
18
Once eclipse restarts,you might get a pop up to open Android SDK Manager. Do not open the Android SDK Manager.
Instead choose the Close button to close the pop up.
13. Now once eclipse restarts, you must specify the location of your Android SDK directory.
Select Windows --> Preferences --> Android --> Browse..., navigate to the location where you downloaded the Android SDK --> Click
Apply --> Click Ok
14. In eclipse open the Java perspective (Windows --> Open Perspective --> Java)
15. Open Android SDK Manager.
Select Android SDK Platform Tools, Android 4.2.2 (API 17) and click Install Packages
In case you are working behind a proxy, set your proxy by clicking on Tools --> Options
Google APIs, MIPS system Image, Intel x86 Atom System Image are optional for installation
19
16. In the Next page Accept License and click Install
17.Once the download completes close the Android SDK Manager and restart your eclipse. If the eclipse is not restarted then the eclipse
might not respond in the expected way.
1.6 Download PhoneGap

Download PhoneGap from here: http://phonegap.com/download/# and extract its contents into the folder C:\dev\phonegap-2.7.0
This application is built using PhonGap 2.7.0 version.
20
21
2. Development of the SAPUI5 Mobile Retailing app

2.1. NetWeaver Gateway Services
2.2. SMP (SAP Mobile Platform, enterprise edition, cloud version) Configuration for your trial account(Optional)
2.3. Import the Source Code into your Eclipse
2.1. NetWeaver Gateway Services

2.1.1. Use the existing Public Gateway Service
There are already existing public gateway services which you can use directly in your own application. These gateway services are based
on the EPM (Enterprise Procurement Model) .
You can access the metadata of the existing public gateway service from the link here
Username: ESPM_TEST
Password: Espm1234
2.1.2. Create your own Gateway Service

Trial Editions of SAP NetWeaver Application Server ABAP 7.4 are available in SCN. Please refer the the Link about using the trial
editions. The document talks about the setup and running of the ABAP 7.4 trial instances.
You can use these trial editions to build your own OData services. You can use the Enterprise Procurement Model(EPM) model as your
demo data. This model is part of every SAP NetWeaver ABAP server from 7.02.
Please refer the Link for detailed tutorial on developing the OData services.
2.2. SMP (SAP Mobile Platform, enterprise edition, cloud version) Configuration for
your trial account(Optional)
You can run the Mobile Retailing project using the default settings of the SMP. If you want to set up your own applications in SMP, follow
the below steps:
2.2.1.Launching SMP (SAP Mobile Platform, enterprise edition, cloud version)

1. Open your SAP HANA Cloud trial (developer) account https://account.hanatrial.ondemand.com/ and login by specifying your username
and password.
In this tutorial all the below configuration steps are done using the test user with the user/account name p1940007136/John Roland
22
2. In the First screen a pop with the name SAP HANA Cloud will appear. Click SAP Mobile Platform, enterprise edition, cloud version.
In case a pop up does not appear then click on Services > SAP Mobile Platform, enterprise edition, cloud version
The SAP Mobile Platform Administration and Monitoring portal is displayed in a new window.
The direct URL to access SAP Mobile Platform Administration and Monitoring portal for a trial (developer) account is
https://smp-<account_name>.hanatrial.ondemand.com/Admin
23
2.2.2. Creating an Application

Here we will create one application for reading the data from the ABAP backend using the Gateway OData service
Disclaimer
In this scenario the developed application connects to an ABAP backend system via OData connectivity.
For testing this connectivity there is a publicly available system:
ABAP backend:
OData service is coming from a cloud hosted ABAP 7.4 SP2 system can be used:
OData Service Url: http://54.225.119.138:50000/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/
public user/password: ESPM_TEST/Espm1234
Terms of Use:
The OData service for the ABAP backend shall only be used for test purposes of the described development
scenario.
The OData service must not be used in any productive application.
It is planned to reset the systems once a week and there is no guarantee that the system is always available.
1. Click on the APPLICATIONS tab and then click New.
2. In New Application window, enter the values:
24
ID
Unique ID that identifies an application.
Name
Name of the application.
Vendor
(Optional) Name of the vendor who develops the application.
Version
(Optional) Version of the application. Currently, only version 1.0 is supported.
Description
(Optional) Custom description of the server module.
3. Click Save.
ID
mobile_retailing_abap
Name
Mobile Retailing for ABAP
Vendor
SAP
Version
(Optional) Version of the application. Currently, only version 1.0 is supported.
Description
Mobile Retailing for ABAP
2.2.3. Creating Application Endpoint URL

4. Navigate to BACKEND tab
5. Enter the backend URL in the End Point field (see the above disclaimer)
6. In Connect to field, select the radio button Internet
Internet - indicates that the EIS(Enterprise Information System) is in the same network as cloud
OnPremise - indicates that the EIS is beyond the security firewall.
7. (Optional) Check the Rewrite URL is enabled.
By default Rewrite URL property is enabled. If enabled, the backend URL in the response is rewritten with the cloud URL.
8. Select Allow anonymous connections to set anonymous access.
By default, the Allow anonymous connections is disabled. If administrator enables it, the application can access backend with
provided authorization access. If you do not want to authorize the backend, you need not provide credentials in User name and
password fields.
In case of ABAP backend, we will specify the user name and password
25
2.2.4. Configuring Authentication Settings

9. Navigate to AUTHENTICATION tab
10. Select the radio button New Profile
11. Enter the Security Profile Name (mobile_retailing_abap_sec)
12. Leave the General Settings properties as default
13. Choose the authentication types as Basic Authentication
In basic authentication, the user is authenticated based on the HTTP response code provided by the authentication URL for the
credentials specified by the user.
14. In the Authentication URL field enter the backend authentication URL(ABAP OData Service specified in the disclaimer above)
15. Specify the authentication type as Internet
16. Click Save
2.2.5. Creating the connection for reading image

1. Navigate to SETTINGS > CONNECTIONS tab and click on New
26
2. In the Connection Name specify the connection for name for the connection
3. In the Endpoint specify the URL from where the images should be read
In case of ABAP Backend:

eg: http://54.225.119.138:50000/SAP/PUBLIC/BC/NWDEMO_MODEL/IMAGES/
4. Specify the authentication type as Internet

5. Select Allow anonymous access and set the user name and password for the ABAP backend data access
6. Click Save
2.3. Import the Source Code into your Eclipse

1. You will get the source code of the SAPUI5 Mobile Retailing Android Project from the location specified in the abstract in your SCN
page or from the link here
2. Download and extract the project from the location to the location C:\dev\eclipse\workspace
3. Start Eclipse and select File > Import
27
4. In the Import pop up, select General > Existing Projects into Workspace
5. Click Next
28
6. Browse through the Root Directory and select the location of the Android project as
C:\dev\eclipse\workspace\Mobile_retailing_sapui5_android
7. Click Finish
29
At this point you might see errors in in your project. These errors will get resolved in the subsequent steps
9. Copy cordova-2.7.0.js from your PhoneGap download and extracted folder

(C:\dev\phonegap-2.7.0\phonegap-2.7.0\lib\android\cordova-2.7.0.js) earlier to assets/www folder
10. Copy cordova-2.7.0.jar from your PhoneGap download and extracted folder
(C:\dev\phonegap-2.7.0\phonegap-2.7.0\lib\android\cordova-2.7.0.jar) earlier to /libs folder
11. Copy xml folder from your PhoneGap download and extracted folder (C:\dev\phonegap-2.7.0\phonegap-2.7.0\lib\android\xml) earlier
to /res folder
30
12. Now copy the resources folder (which contains the SAPUI5 mobile libraries) into the folder assets\www
Where do get the resources folder from?

Open UI Development Toolkit for HTML5 Developer Center
Click on the download link of "Download Evaluation Package for UI Development Toolkit for HTML5" package
of version 1.12.1 (minimum 1.12.1 version is to be used)
In the next screen select the file for download i.e. UI Development Toolkit for HTML5 and accept the licence
agreement
Download this package and extract the content of the folder sapui5-mobile-static.zip into location
C:\dev\sapui5-mobile-static
Now from inside the sapui5-mobile-static folder, you can copy the resources folder
31
3. Deploy and run the application

3.1. Configuring Settings in the config.js file (Optional)
3.2. Creating the Android Emutalor
3.3. Setting proxy for the Android Emulator
3.4. Running the Application on an Android Emulator
3.1. Configuring Settings in the config.js file (Optional)

Note:
This section needs to be done only when you have created your own application on SMP for your trial account.
If you wish to run the application with the default settings then you can move to the section 3.2
Open Mobile_retailing_sapui5_android\assets\www\js\config.js
Change the smpUrl property to point to your SMP in the trail account
Format https://smp-<account>trial.hanatrial.ondemand.com
Also change the name of abapAppName, abapImgName as per the one created by you for your trial account.
Save your settings
3.2. Creating the Android Emutalor

Note:
This section needs to be done only once i.e. for the first time to create the emulator
1. In the eclipse goto the Java perspective(Windows --> Open Perspective --> Java), Click on the Android Virtual Device
Manager
2. In the Android Virtual Device Manager pop up click New
32
3. In the Create new AVD pop up specify the AVD Name, Device type, Target = Android 4.2.2 (API 17) and also specify the SD
Card size and click Ok.
3.3. Setting proxy for the Android Emulator

Note:
This section needs to be done only once i.e. for the first time after the emulator is created. If you are working on a
network which uses proxy, then follow the below steps to set your proxy
1. In the Android Virtual Device Manager select the emulator newly created and click Start
33
2. In the Launch options pop up click Launch

3. Once the emulator starts unlock the emulator and click on the Menu button
Note: The emulator may take some time to launch
4. In the emulator select the menu button and then select System Settings
5. Select the menu More... --> Mobile networks --> Access Point Names --> Select the available mobile network --> set the
proxy and the port --> Click Menu --> Click Save
34

Note : You can identify your IP address by running the command ping <proxy-server-name> in your command prompt and enter
the Proxy as your IP address and Port with your relevant proxy port number
6. You can now close the emulator
3.4. Running the Application on an Android Emulator

1. In eclipse, right click on your Android Project --> Run As --> Android Application
2. Your application will now launch in the emulator.

Note:
The content inside the emulator might take some time to launch. Once the content is displayed, the first step is
to unlock the emulator
35
To run the same as in your Android device, make sure your device is connected to your machine and then again right click on
your Android Project --> Run as --> Android Application
The same SAPUI5 Mobile Shopping Project can also be deployed on an IOS device, but this is currently out of scope of this tutorial.
Note:
Trial Account Maximum allowed connection for SAP Mobile Platform
In a trial account, for the SAP Mobile Platform, the maximum number of allowed connections at a time is only 10.
Hence while running the application and you get the error The connection to the server was unsuccessful you will
have to delete some existing application connections.
To do so follow the below steps:
1. Login to your SMP trial account https://smp-<account_name>.hanatrial.ondemand.com/Admin
2. Navigate to APPLICATIONS -> APPLICATIONS CONNENCTION -> Select the Applications you wish to delete and
click on the Delete button.
36
4. Deep dive into the code

4.1. Overview
4.2. Technical Details
4.1. Overview
Once the application is running on the emulator it is also necessary to understand the code running behind the screen. In this section we
will not explain the full code but only the most important code snippets.
This app is built using SAPUI5. SAPUI5 provides dedicated control library for mobile devices like tablets and smartphones with the
technical name sap.m. Both sap.m and the control libraries for the desktop are based on the same Runtime which provides a common
infrastructure for Data Binding, Model View Controller Concepts, Localization and other topics. In addition both control sets have a
harmonized API for the common parts. This makes it easy for the application developer to efficiently build applications for both scenarios.
As SAPUI5 is based on web standards like HTML, CSS and JavaScript you can run the application on multiple platforms while the Mobile
Visual Identity theme makes users feel comfortable on both Android and Apple devices.
API Reference: https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.m.html
This app is built using the Model View Controller concept for mobile. According to the MVC paradigm, the View is responsible for
defining and rendering the UI, the Model manages the application data, and the Controller reacts to View events and user interaction by
modifying View and Model.
The app also uses OData Model which enables binding of controls to data from OData services.
The app reads data via SMP (SAP Mobile Platform,enterprise edition, cloud version).
SAP Mobile Platform, enterprise edition, cloud version provides a single comprehensive Web administration and monitoring portal for
configuring and managing mobile applications. The SAP Mobile Platform, enterprise edition, cloud version (mobile platform) REST
Services API enables standard HTTP client applications running in any platform to access mobile platform REST services. The mobile
platform services are exposed as REST services that can be consumed from any HTTP enabled client. This development approach
supports:
Registration (creating an application connection)
Authentication
Native push notification
Configuration
You can build your client applications using third party developer tools. The mobile platform provides the ability to consume
REST services that are hosted on cloud or on premise.
Further details on SAP Mobile Platform HANA Cloud released version can be found here:
https://help.hana.ondemand.com/mobile/frameset.htm?SMP_welcome.html
4.2. Technical Details
37
This app reads data from an ABAP backend - using ABAP Gateway OData Service
Open Mobile_retailing_sapui5_android/assets/www/mobile-retailing-sapui5/Category.controller.js
The first step, to read the data from an OData service via SMP, is that we explicitly register the application connection
using the SMP (SAP Mobile Platform).
Here we specify customized application properties for the client with the request. We provide the application connection
ID, X-SUP-APPCID, using an explicit request header or a cookie.
Here we create an anonymous application connection by issuing a POST request to the URL
"https://smpmaas-refapps.hana.ondemand.com/public/odata/applications/latest/MobileRetailingNoCaptcha/Connections"
and include the application connection properties in the request payload.
This is done in the code snippet specified below
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);
Further details on the same can be found here:

https://help.hana.ondemand.com/mobile/frameset.htm?doc/html/mdw1350892619107.html
The second step is that after we have successfully registered the application connection using the X-SUP-APPCID, we
can then read the actual data by accessing your OData service through a Proxy URL as
"https://smpmaas-refapps.hana.ondemand.com/public/MobileRetailingNoCaptcha/".
This is done in the code snippet below:
38
$(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);
});
Further details on the same can be found here:

https://help.hana.ondemand.com/mobile/frameset.htm?doc/html/mdw1350899982857.html
Open Mobile_retailing_sapui5_android/assets/www/mobile-retailing-sapui5/ShippingDetails.controller.js
Here we use the OData Model to create the customer as shown in the code snippent below
//using OData model for Customer creation

appC.oModel.create(sap.app.config.customerCollection, oEntry, null,
function(oData, oResponse){
//Customer Creation successful
sap.m.MessageToast.show(successMsg);
var param = { details : oResponse.data };
appC.navTo("CreditCardDetails", false, undefined, param);
},function(oError){
//Customer Creation Failed
sap.m.MessageToast.show(errorMsg);
});
Open Mobile_retailing_sapui5_android/assets/www/mobile-retailing-sapui5/CreditCardDetails.controller.js
Here we use the OData Model to create the Sales Order as shown in the code snippent below
//creating sales order using OData model

appC.oModel.create(sap.app.config.salesOrderHeaderCollection, oEntrySo, null,
function(oData, oResponse){
//Sales Order Creation successful
appC.salesOrderId = oResponse.data.SalesOrderId;
},function(oError){
//Sales Order Creation failed
});
39

End-To-End Mobile Reference Application - SAPUI5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

End-To-End Mobile Reference Application - SAPUI5

Hochgeladen von

Copyright:

Verfügbare Formate

Mobile Retailing Scenario- SAPUI5