Mobile App

Creating Mobile Applications on Top of SAP, Part 1
Applies to:
SAP ERP 6.0, NetWeaver > 7.10. For more information, visit the Mobile homepage.
Summary
This tutorial is starting point for a series of tutorials demonstrating different ways of how to create mobile clients on top of SAP systems. We will chalk out ways of creating so called "instant value applications" without even touching the iPhone or Android development environment - all you need is basic understanding of SAP and Java. Authors: Pascal Kaufmann, Pascal Moser, Florian Mller
Company: Resource AG Created on: 15 November 2010
Author Bio
Pascal Kaufmann is working as NetWeaver technology consultant for Resource AG Switzerland (http://www.resource.ch), a Swisscom company. Pascal counts ABAP development for web technologies and process integration with SAP PI to his main skills.
Pascal Moser works as a SAP Development Consultant for Res ourc e AG for more than five years. He develops applications and components for the SAP Portal in Web Dy npro (mainly Java) and ABAP applications for several R/3 Systems (Finance, HR, CRM, ).
Florian Mller works as a Solution Architect for Resource AG, one of the leading SAP consulting companies within S witzerland. Florian focuses on SAP UI technologies in first place, especially mobile UI technologies are part of his daily SAP business. Furthermore Florian is founder of richability (http://www.richability.com) and frequent author for several magazines and books within the space of Java & UI Technologies
SAP COMMUNITY NETWORK 2010 SAP AG
SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1
Table of Contents
SAP goes Mobile..................................................................................................................................... 3 Preface ............................................................................................................................................... 3 1 2 3 Tutorial Structure......................................................................................................................... 3 Requirements ............................................................................................................................. 4 The big picture ............................................................................................................................ 4
3.1 The Scenario ........................................................................................................................................................................... 4 3.2 The architecture behind ......................................................................................................................................................... 6
Web Service creation within ERP ................................................................................................. 7

4.1 Web Service creation ............................................................................................................................................................. 7 4.2 Deploy Web Service ............................................................................................................................................................. 19 4.2.1 Additional adaptions..................................................................................................................................................... 23 4.3 Test the Web Service........................................................................................................................................................... 25
Next steps ................................................................................................................................ 27
Relat ed Content .................................................................................................................................... 28 Disclaimer and Liability Notice................................................................................................................ 29
SAP goes Mobile

Preface As you might have noticed there is happening a lot within the space of mobile application development. Focusing on SAP applications and tooling there is Sybase on the one hand, on the other hand there is SAP NetWeaver mobile plat form, both frameworks apply to what we gently call heavy frameworks be assured you need several consultants and SAP trainings in order to establish this landscape within your company or your customers environment... But there is anot her approach as well it is not hyped the way Sybase is currently celebrated but for certain requirements applies much better than heading for a heavy approach. Of course you can use a sledge hammer to crack a nut but there might be alternatives around. During this series of tutorials we will come up with several ways of implementing mobile frontends for your SAP system. As we know that it is not on everybodys agenda to buy a Macbook before we actually start creating iPhone/iPad user interfaces we will show ways of using powerful HTML5 frameworks which result in 100% iPhone/iPad look and feel, have a look at the following screen, this is what based on HTML5 can be achieved:
Caption 1: HTML5 based Flight BAPI application running within iPhone client
But don't be afraid you do not need any HTML5 knowledge, all we will do is coding plain Java and trigger several Web Services. Btw., the same applies to Android applications we will show you ways of creating Android clients within minutes instead of becoming Android expert before you actually start your first application. And of cours e, in oft the last parts of our tutorial we will show you how to create native iPhone/Android apps. You simply should keep in mind: this tutorial gives chance to any body to create so called instant value mobile apps which pat h you follow is completely up to you and your requirements! 1 Tutorial Structure
The following parts will be covered within this series of tutorials. Please consider the given dat es as targeted release dates, we hope to achieve these targets but as already said these dates are targeted, not fixed;
1. Boilerplate: covers creation of backend web services within your ERP (covered within this document) 15/11/2010, Contact/Feedback: Pascal.Moser@resource.ch
2. Eclipse Connect: Eclipse IDE will be used as major development IDE. Before we actually hook the web service into a real mobile client we will create all necessary Java stubs in order to access the SAP Web Services 25/11/2010, Contact/Feedback: Florian.Mueller@richability.com 3. SAP iPhone handshake: we will use the vaadin framework within the Eclipse IDE and create the mobile client which consumes the previously created Web Services 01/12/2010, Contact/Feedback: Florian.Mueller@richability.com 4. SAP Android handshake: creation of mobile Android client (based on Adobe AIR) accessing SAP Web Services previously created release date follows... 5. SAP native iPhone: we will create a native iPhone client (Mac + XCode IDE required) accessing our SAP Web Service release date follows...
2 Requirements
Each tutorial requires certain skills, software and hardware so we will create a brief list of requirements within the head of each tutorial. Please don't be afraid in terms of I will fail as I have no clue on iPhone development..., you do not need to know anything about mobile application development as we will show you during these tutorials ! Anyway, there are major requirements which should be met, you need to be familiar (basic knowledge) with:
ABAP basics (know how to fire up se80...) Basic understanding of Web Services (SOAP) Basic Java knowledge SAP ERP 6.0 Netweaver >= 7.10
In order to follow this tutorial you will require:
Any additional soft ware you will require is explained within the tutorial such as Eclipse, SOAP UI etc.. 3 The big picture
Before we start the creation of SAP Web Service boiler plate we will give you some information on what we will be implementing and we will chalk out the very big picture of what we would call the architecture beh ind the application. 3.1 The Scenario
People told me (as Im from the Java world and did not go through all these SAP classes) that FLIGHT BAPI is something similar to what Java guys call Hello World in terms of everybody knows these BAP IS and everybody has these BAPIS around on his ERP system somewhere. So we will use these BAPIS and put a Web Service interface above these so you can access these BAPIS through the Web Servic e. From the SAP point of view we are done as soon as these BAPIS can be acces s through a Web Service, of course you can turn/cover any BAPI into a Web Service and that is exactly the idea of showing you how to do so: you will be able to publish any BAPI you want as a Web Service and of course you will be able to put a nice mobile UI on top of your Web Service so you FLIGHT BAP I as starting point, as soon as you got the idea start applying your knowledge to customer projects... We will do some simple calls based on these Web Services, we will trigger a flight search passing in departure as well as destination and our mobile device will display the query results:
Caption 2: Enter departure & destinatio, a list of flights will be returned...
Caption 3: Flight results provided by Flight BAPI via Web Service...
Caption 4: Flight details provided by BAPI via Web Service gateway...
3.2
The architecture behind
As already said we do not want to bother you with XCode development during the first parts of this tutorial all UIs will be creat ed based on alternative technologies such as HTML5. Please have a look into the following scribble, this sccribble chalks out the very big picture of what we will be implementing.
Caption 5: Architecture
Within the current tutorial we will create everything which is grouped in the grey box at the bottom of this scribble. The blue box applies to what SAP calls Reverse Proxy, please do not focus on security aspects when working through the first parts of this tutorial series now we will cover security aspects in a dedicated tutorial! We simply refer to the blue box as Java client layer, the blue box is used in first place for generation of HTML5 through frameworks such as vaadin & co... No that you got the big picture its time to get the grey box working so lets roll up ones sleeves and create some Web Services within our E RP! 4 Web Service creation within ERP
On the one hand we will create a Web Service interface for the FLIGHT BAPI on the ot her hand we will deploy the Web Service in order to access the Web Service; last but not least we will test the Web Service using SOAP UI a free Web Service testing tool. 4.1 Web Service creation
As we assume basic SAP knowledge we simply provide screenshots and briefly explain what we will be doing as the focus of these tutorials should be put rather to mobile application development instead of SAP
basics if you have any questions, feel free to contact us, questions related to Web Service creation can be send to Pascal Moser directly as he ist he technical guy behind this part of the tutorial (Pascal.Moser@resource.ch) 1) Fire up SE80 ABAP workbench
2) Creat e development package
3) Creat e function group within the created package:
4) Creat e function module
(if you require several function modules, simply repeat step 4)) There are two ways of filling a table wit h information and send this information back to the calling application: you can define the parameter as export or table parameters. We recommend to define an export parameter:
Option Export parameter: If you define the table as an export parameter, the Web Service will send back the table automatically within the returning SOAP XML. The call looks like this:
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style"> <soapenv:Header/> <soapenv:Body> <urn:ZFlightGetlist>  <ImwAirlineid>JL</ImwAirlineid>  <ImwCityFrom>FRANKFURT</ImwCityFrom>  <ImwCityTo>TOKYO</ImwCityTo>  <ImwDepartureDate>2010-06-05</ImwDepartureDate>  <ImwDepartureTimeFrom>15:00:00</ImwDepartureTimeFrom>  <ImwDepartureTimeTo>22:00:00</ImwDepartureTimeTo> </urn:ZFlightGetlist> </soapenv:Body> </soapenv:Envelope>
Option Table Parameter: If you decide to use the table parameter variant you explicitly have to tell the Web Service that to return this table. The call looks like this (see red mark ):
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style"> <soapenv:Header/> <soapenv:Body> <urn:ZFlightGetlist>  <ImwAirlineid>JL</ImwAirlineid>  <ImwCityFrom>FRANKFURT</ImwCityFrom>  <ImwCityTo>TOKYO</ImwCityTo>  <ImwDepartureDate>2010-06-05</ImwDepartureDate>  <ImwDepartureTimeFrom>15:00:00</ImwDepartureTimeFrom>  <ImwDepartureTimeTo>22:00:00</ImwDepartureTimeTo>  <ExtFlights/> </urn:ZFlightGetlist> </soapenv:Body> </soapenv:Envelope>
5) Transfer function group to Web Service - this will create the required Web Services hooking into the BAPIs.
(at position 1, enter your package name)
6) Generate Web Servic e
7) Open SOA Manager
4.2
Deploy Web Service
8) Select your entry (ZS_WS_FLIGHT) and click "Apply Selection"
9) Switch to TabStrip Konfiguration and create a new service
(use same name for Servicename and binding) 10) S witch to the tabStrip Overview and define the authentication data
(Save the service) 11) Define system base configuration
12) Go back to Web Service
13) Open the WSDL
14) Open and save the WSDL in order to use it fo r the Web Service call
4.2.1
Additional adaptions
Basically your Web Service is ready to run at this point of the tutorial. As already mentioned this tutorial focuses majorly on the User Interface creation, so we recommend in case you could not follow to t his point to get yourself familar with the creation of Web Services on top of the ABAP stack, this link will give you some more detailed explanations on how to connect your BAPIs to Web Service interfaces: http://help.sap.com/erp2005_ehp_04/helpdata/ DE/9b/dad1ae3908ee44a5caf57e10918be9/frameset.htm We also like to point out we did some slight modifications to our function module as the "default BAPI" from the flight list does not apply to the input parameters we would like to use, see the following screens h ot, that's what the default web service based on BAPI_SFLIGHT_GE TLIS T requires:
Our function module applies to the following parameters, the listing for the module adaptions can be found below:
FUNCTION Z_FLIGHT_GETLIST. *"---------------------------------------------------------------------*"*"Lokale Schnittstelle: *" IMPORTING *" VALUE(IMW_AIRLINEID) TYPE S_CARR_ID OPTIONAL *" VALUE(IMW_CITY_FROM) TYPE S_CITY OPTIONAL *" VALUE(IMW_CITY_TO) TYPE S_CITY OPTIONAL *" VALUE(IMW_DEPARTURE_DATE) TYPE S_DATE OPTIONAL *" VALUE(IMW_DEPARTURE_TIME_FROM) TYPE S_DEP_TIME DEFAULT *" '00:00:00' *" VALUE(IMW_DEPARTURE_TIME_TO) TYPE S_DEP_TIME DEFAULT '24:00:00' *" EXPORTING *" VALUE(EXT_FLIGHTS) TYPE Z_ALADIN_FLIGHT_LIST_TTYPE *"----------------------------------------------------------------------
DATA: LR_DEST_FROM TYPE BAPISFLDST, LR_DEST_TO TYPE BAPISFLDST, lt_flight_list type Z_ALADIN_FLIGHT_LIST_TTYPE, lr_flight_list LIKE LINE OF lt_flight_list.
LR_DEST_FROM-CITY = imw_city_from. lr_dest_to-city = imw_city_to. CALL FUNCTION 'BAPI_FLIGHT_GETLIST' EXPORTING AIRLINE = imw_airlineid DESTINATION_FROM = LR_DEST_FROM DESTINATION_TO = lr_dest_to MAX_ROWS = TABLES DATE_RANGE = EXTENSION_IN = FLIGHT_LIST = lt_flight_list. EXTENSION_OUT = RETURN =
* * * * *
IF not imw_departure_Date is INITIAL. LOOP AT lt_flight_list into lr_flight_list. IF lr_flight_list-FLIGHTDATE = imw_departure_Date and lr_flight_list-DEPTIME <= imw_departure_time_to and lr_flight_list-DEPTIME >= imw_departure_time_from. APPEND lr_flight_list to ext_flights. ENDIF. ENDLOOP.
else. LOOP AT lt_flight_list into lr_flight_list. IF lr_flight_list-DEPTIME <= imw_departure_time_to and lr_flight_list-DEPTIME >= imw_departure_time_from. APPEND lr_flight_list to ext_flights. ENDIF. ENDLOOP. * APPEND LINES OF lt_flight_list TO ext_flights. ENDIF. ENDFUNCTION.
Usage of this function module enables you to pass in the following parameters to the Web Service: AirlineID City of Departure City of destination Departure Date Departure Time Arrival Time As a result a list of flights will be returned, that's actually the final Web Service all further mobile user interfaces will be put on top. So please make sure your Web Service applies to these paramet ers;
4.3
Test the Web Servic e
As the Web Service is deployed to your Net weaver application server now it's time to test the Web Servic e. Before we actually start shooting the Service from a Java stack we will use a nice little tool in order to test, the tool is called soapUI, you can download the tool for free using the following link: http://www.soapui.org/ So what does this tool do? Basically you can simply pass in a WSDL destination and SOAP UI will create the corresponding SOAP request. You can pass in some parameters and will receive the result of the call in a nice textual manner. Follow these steps to ensure your Web Service is working correctly, this is a great chance to become "familar" with your servic e, you will nee a basic understanding of parameters being passed in parameters being returned. 1) Install soapUI 2) Launch soapUI, create a new project and pass in the WSDL URL during project cretion (see parameter Initial WSDL/WADL):
3) soapUI will parse the WSDL and create a corresponding request , expand your project to the request item and double click on the request item, the request details will be displayed
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style"> <soapenv:Header/> <soapenv:Body> <urn:ZFlightGetlist>  <ImwAirlineid>?</ImwAirlineid>  <ImwCityFrom>?</ImwCityFrom>
 <ImwCityTo>?</ImwCityTo>  <ImwDepartureDate>?</ImwDepartureDate>  <ImwDepartureTimeFrom>?</ImwDepartureTimeFrom>  <ImwDepartureTimeTo>?</ImwDepartureTimeTo> </urn:ZFlightGetlist> </soapenv:Body> </soapenv:Envelope>
4) Next you simply can modify the Web Service request, as we have specified all parameters as optional parameters, you should be able to receive flight results without passing in parameters; or you simply add parameters but make sure to remove all of the included "?" before you start firing the Web Service. We left one parameter in order to return all flights from the "LH" carrier which will return all Lufthansa flights...:
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style"> <soapenv:Header/> <soapenv:Body> <urn:ZFlightGetlist>  <ImwAirlineid>LH</ImwAirlineid> </urn:ZFlightGetlist> </soapenv:Body> </soapenv:Envelope> Execute the request, it should return a list of flights: <soap-env:Envelope xmlns:soap-env="http://schemas.xmlsoap.org/soap/envelope/"> <soap-env:Header/> <soap-env:Body> <n0:ZFlightGetlistResponse xmlns:n0="urn:sapcom:document:sap:soap:functions:mc-style"> <ExtFlights> <item> <Airlineid>LH</Airlineid> <Airline>Lufthansa</Airline> <Connectid>0400</Connectid> <Flightdate>2010-05-08</Flightdate> <Airportfr>FRA</Airportfr> <Cityfrom>FRANKFURT</Cityfrom> <Airportto>JFK</Airportto> <Cityto>NEW YORK</Cityto> <Deptime>10:10:00</Deptime> <Arrtime>11:34:00</Arrtime> <Arrdate>2010-05-08</Arrdate> <Price>666.0</Price> <Curr>EUR</Curr> <CurrIso>EUR</CurrIso> </item> <item> <Airlineid>LH</Airlineid> <Airline>Lufthansa</Airline> <Connectid>0400</Connectid> <Flightdate>2010-06-05</Flightdate> <Airportfr>FRA</Airportfr> <Cityfrom>FRANKFURT</Cityfrom>
<Airportto>JFK</Airportto> <Cityto>NEW YORK</Cityto> <Deptime>10:10:00</Deptime> <Arrtime>11:34:00</Arrtime> <Arrdate>2010-06-05</Arrdate> <Price>666.0</Price> <Curr>EUR</Curr> <CurrIso>EUR</CurrIso> </item>
Done! Your Web Service is accessable now and we can simply start using the Web Service and put some nice mobile UIs on top of your Web Service. Be assured, the next parts of the tutorial series wil l be explained more detailed as we will do somet hing completely new to you, but as we have to assume some SAP basic understanding we have to assume some basic understanding of SAP.
Next steps
The next tutorial ( will be released next week) will show you how to link your Web S ervice to Java and Apache Axis2. Of course your Web Service returns an XML String and you could parse the String on your own, but this would take a lot of time - so Axis2 will become your best friend as Axis2 generates Java Objects based on your WSDL. In a nutshell, the next tutorial part will simply chalk out how to automatically transform Web Service results to plain Java objects.
Related Content
For more information, visit the Mobile homepage
Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP offic ial interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP w ill not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type w ith respect to the content of this technical article or code sample, including any liability resulting from incompatibility betw een the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable w ith respect to the content of this document.

Mobile App

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mobile App

Uploaded by

Copyright:

Available Formats

Creating Mobile Applications on Top of SAP, Part 1

Company: Resource AG Created on: 15 November 2010

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1

Creating Mobile Applications on Top of SAP, Part 1

Web Service creation within ERP ................................................................................................. 7

Next steps ................................................................................................................................ 27

Relat ed Content .................................................................................................................................... 28 Disclaimer and Liability Notice................................................................................................................ 29

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2

Creating Mobile Applications on Top of SAP, Part 1

SAP goes Mobile

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 3

Creating Mobile Applications on Top of SAP, Part 1

In order to follow this tutorial you will require:

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 4

Creating Mobile Applications on Top of SAP, Part 1

Caption 2: Enter departure & destinatio, a list of flights will be returned...

Caption 3: Flight results provided by Flight BAPI via Web Service...

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 5

Creating Mobile Applications on Top of SAP, Part 1

Caption 4: Flight details provided by BAPI via Web Service gateway...

The architecture behind

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 6

Creating Mobile Applications on Top of SAP, Part 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 7

Creating Mobile Applications on Top of SAP, Part 1

2) Creat e development package

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 8

Creating Mobile Applications on Top of SAP, Part 1

3) Creat e function group within the created package:

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 9

Creating Mobile Applications on Top of SAP, Part 1

4) Creat e function module

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 10

Creating Mobile Applications on Top of SAP, Part 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 11

Creating Mobile Applications on Top of SAP, Part 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 12

Creating Mobile Applications on Top of SAP, Part 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 13

Creating Mobile Applications on Top of SAP, Part 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 14

Creating Mobile Applications on Top of SAP, Part 1

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 15

Creating Mobile Applications on Top of SAP, Part 1

(at position 1, enter your package name)

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 16

Creating Mobile Applications on Top of SAP, Part 1