Consuming SAP NetWeaver Gateway Services from HTML Applications using Java Script

(1)

Consuming SAP NetWeaver Gateway

Services from HTML Applications using

Java Script

(2)

Copyright/Trademark

Copyright

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.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, 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.

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.

(3)

Copyright/Trademark

CONSUMING SAP NETWEAVER GATEWAY SERVICES

USING JAVASCRIPT

SAP NetWeaver Gateway technology provides a simple way to interact with SAP applications through

variety of devices, environments and platforms based on market standards. The framework enables

development of innovative, people-centric solutions that bring the power of SAP business software into

new experiences, such as: social networking and collaboration environments; mobile and tablet devices;

and rich internet applications. The framework supports rapid innovation while ensuring security, integrity,

management and optimized maintenance of the core SAP systems. Completely flexible, the software offers

connectivity to SAP applications using any programming language or model without the need for SAP

knowledge by taking advantage of REST services and OData/ATOM protocols.

This guide provides information on how to consume SAP NetWeaver Gateway services from HTML

applications using JavaScript, based on the following scenario:



The user wants to fly from New York to San Francisco.



He goes online and searches for the different flights available. He enters his search parameters: city of

origin, destination city, departure date, and arrival date (Function Import).



From the SAP NetWeaver Gateway, he receives the information for the option(s) that meet(s) his search

parameters (Get Function).



He can now select the one that suits him the most and book his flight (Create Function).

The links to access the service document and metadata document are provided the in table below.

Service Document

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/

Metadata Document

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/

$metadata?$format=xml

Each service URL should contain the following information:



Gateway host



Port



SAP Client – no need to specify client if connecting to the default client.

Example:

http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT?sap-client=100

To obtain information on the selected service (its properties, function imports, associations, etc.), refer to

Appendix 1 , were we show the Metadata description of the RMTSAMPLEFLIGHT service.

To view the code snippets in a format that can be copied into new code, refer to

Appendix 2 – Code

Snippets

.

(5)

Copyright/Trademark

The Flight service contains the following collections:

Collection URL

FlightCollection (list of flights)

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/

iwfnd/RMTSAMPLEFLIGHT/FlightCollection

CarrierCollection (list of carriers

http://<Gateway_host>:<Gateway_port>/

sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection

BookingsCollection (list of Bookings)

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/

iwfnd/RMTSAMPLEFLIGHT/BookingCollection

The operation GetAvailableFlights on FlightCollection is used to get a list of flights. The following is the URL

for the same:

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/GetAvailableFlights

Each collection supports some or all of the operations listed below. The table below provides the list of

operations supported and the methods that each of this operations map to respectively:

Operation Method

Create

HTTP POST

Read

GET

Update

PUT

Delete

DELETE

Prerequisites

The following tools are required for developing an HTML application using JavaScript:

Software Version

SAP NetWeaver Gateway

2.0

OData library for JavaScript - datajs

1.0.1 or higher

Contact your system administrator for landscape details to connect to the SAP NetWeaver Gateway system.

Make sure you have performed the following procedures:



Import the downloaded datajs library to your HTML application:

(6)

Copyright/Trademark

Building an HTML Application using JavaScript

Function Import Example

To get a list of the available flights, based on filter criteria, trigger the “GetAvailableFlights” function import

with cityFrom, cityTo, fromDate and toDate parameters. The response will contain a list of flights that meet

the criteria.

Note: For more information on Function Import (also called Service Operation), refer to OData

documentation at

http://www.odata.org/developers/protocols/uri-conventions

under the Addressing

Service Operations section.

Refer to the code snippet below for details on how to do it using JavaScript:

1. Create the SAP NetWeaver Gateway service URL .

var serviceUri =

"http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";

2. Create the URL of a query calling the GetAvailableFlights function import with the following

parameters: flight departure date, arrival date, and cities.

var cityFrom = "NEW YORK"; var cityTo = "SAN FRANCISCO"; var fromDate = "20110105"; var toDate = "20110728";

var requestUri = serviceUri + "GetAvailableFlights?cityfrom=" + cityFrom + "&cityto=" + cityTo + "&fromdate=" + fromDate + "&todate=" + toDate;

3. Send the request, and define callback methods for success and failure. Use the success callback method

to iterate all entries in the resulted feed.

Note: The GetAvailableFlights function import is called using an HTTP GET method, and therefore the

OData.read function of the datajs library can be used.

OData.read( requestUri, function (data) {

//Success Callback (received data is a Feed):

var html = "";

for (var i = 0; i < data.results.length; i++) {

html += "<div>"+"Flight Carrier: "+data.results[i].carrid+"<br/></div>"; html += "<div>"+"Flight Price: "+data.results[i].PRICE+"<br/></div>"; html += "<div>"+"Flight Max. Seats:"+data.results[i].SEATSMAX

+"<br/><br/></div>"; }

document.getElementById("target-element-id").innerHTML = html;

//Assuming your HTML page has DIV element with id ‘target-element-id’

},

function (err) { //Error Callback:

alert("Error occurred " + err.message); }

);

(7)

Copyright/Trademark

Response

<?xml version="1.0" encoding="utf-8" ?>

-<atom:feed xml:base="<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/"

xmlns:atom="http://www.w3.org/2005/Atom" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"

xmlns:sap="http://www.sap.com/Protocols/SAPData">

<atom:id>http://<host name>:<port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/FlightCollection</atom:id>

<atom:linkhref="FlightCollection" rel="self" type="application/atom+xml;type=feed" title="FlightCollection" /> <atom:title>FlightCollection</atom:title>

<atom:updated>2011-09-27T06:32:42Z</atom:updated>

- <atom:entry> <atom:author />

-<atom:content type="application/xml">

- <m:properties>

<d:carrid>AA</d:carrid> <d:connid>0017</d:connid>

<d:fldate m:Type="Edm.DateTime">2011-01-05T00:00:00</d:fldate> <d:PRICE m:Type="Edm.Decimal">889.00</d:PRICE>

<d:CURRENCY>USD</d:CURRENCY> <d:PLANETYPE>747-400</d:PLANETYPE> <d:SEATSMAX>385</d:SEATSMAX> <d:SEATSOCC>367</d:SEATSOCC>

<d:PAYMENTSUM m:Type="Edm.Decimal">185742.73</d:PAYMENTSUM> <d:SEATSMAX_B>31</d:SEATSMAX_B> <d:SEATSOCC_B>22</d:SEATSOCC_B> <d:SEATSMAX_F>21</d:SEATSMAX_F> <d:SEATSOCC_F>21</d:SEATSOCC_F> - <d:flightDetails> <d:countryFrom>US</d:countryFrom> <d:cityFrom>new york</d:cityFrom> <d:airportFrom>JFK</d:airportFrom> <d:countryTo>US</d:countryTo> <d:cityTo>SAN FRANCISCO</d:cityTo> <d:airportTo>SFO</d:airportTo> <d:flightTime>361</d:flightTime>

<d:departureTime m:Type="Edm.Time">PT11H00M00S</d:departureTime> <d:arrivalTime m:Type="Edm.Time">PT14H01M00S</d:arrivalTime> <d:distance m:Type="Edm.Decimal">2574.0000</d:distance> <d:distanceUnit>SMI</d:distanceUnit>

<d:flightType/>

<d:period m:Type="Edm.Byte">0</d:period> </d:flightDetails>

</m:properties> </atom:content>

<atom:id>http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/FlightCollection(carrid='AA',connid='0 017',fldate='20110105')</atom:id>

<atom:linkhref="FlightCollection(carrid='AA',connid='0017',fldate='20110105')" rel="edit"

type="application/atom+xml;type=entry" />

<atom:linkhref="FlightCollection(carrid='AA',connid='0017',fldate='20110105')/flightbooking"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/flightbooking"

type="application/atom+xml;type=entry" title="RMTSAMPLEFLIGHT.BookingFlight" />

<atom:linkhref="FlightCollection(carrid='AA',connid='0017',fldate='20110105')/flightBookings"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/flightBookings"

type="application/atom+xml;type=feed" title="RMTSAMPLEFLIGHT.FlightBookings" /> <atom:link href="FlightCollection(carrid='AA',connid='0017',fldate='20110105')/FlightCarrier"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/FlightCarrier"

type="application/atom+xml;type=entry" title="RMTSAMPLEFLIGHT.CarrierToFlight" /> <atom:title>Flight</atom:title>

<atom:updated>2011-09-27T06:32:42Z</atom:updated> </atom:entry>

-<atom:entry>

<atom:author />

-<atom:content type="application/xml"> -<m:properties>

<d:carrid>AA</d:carrid> <d:connid>0017</d:connid>

<d:fldate m:Type="Edm.DateTime">2011-03-16T00:00:00</d:fldate> <d:PRICE m:Type="Edm.Decimal">422.94</d:PRICE>

<d:CURRENCY>USD</d:CURRENCY> <d:PLANETYPE>747-400</d:PLANETYPE> <d:SEATSMAX>385</d:SEATSMAX> <d:SEATSOCC>371</d:SEATSOCC>

<d:PAYMENTSUM m:Type="Edm.Decimal">192129.22</d:PAYMENTSUM> <d:SEATSMAX_B>31</d:SEATSMAX_B> <d:SEATSOCC_B>30</d:SEATSOCC_B> <d:SEATSMAX_F>21</d:SEATSMAX_F> <d:SEATSOCC_F>20</d:SEATSOCC_F> - <d:flightDetails> <d:countryFrom>US</d:countryFrom>

(8)

Copyright/Trademark <d:cityFrom>new york</d:cityFrom>

<d:airportFrom>JFK</d:airportFrom> <d:countryTo>US</d:countryTo> <d:cityTo>SAN FRANCISCO</d:cityTo> <d:airportTo>SFO</d:airportTo> <d:flightTime>361</d:flightTime>

<d:departureTime m:Type="Edm.Time">PT11H00M00S</d:departureTime> <d:arrivalTime m:Type="Edm.Time">PT14H01M00S</d:arrivalTime> <d:distance m:Type="Edm.Decimal">2574.0000</d:distance> <d:distanceUnit>SMI</d:distanceUnit>

<d:flightType />

<d:period m:Type="Edm.Byte">0</d:period> </d:flightDetails>

</m:properties> </atom:content>

<atom:id>http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/FlightCollection(carrid='AA',connid='0017', fldate='20110316')</atom:id>

<atom:link href="FlightCollection(carrid='AA',connid='0017',fldate='20110316')" rel="edit"

type="application/atom+xml;type=entry" />

<atom:link href="FlightCollection(carrid='AA',connid='0017',fldate='20110316')/flightbooking"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/flightbooking"

type="application/atom+xml;type=entry" title="RMTSAMPLEFLIGHT.BookingFlight" /> <atom:link href="FlightCollection(carrid='AA',connid='0017',fldate='20110316')/flightBookings"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/flightBookings"

type="application/atom+xml;type=feed" title="RMTSAMPLEFLIGHT.FlightBookings" /> <atom:link href="FlightCollection(carrid='AA',connid='0017',fldate='20110316')/FlightCarrier"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/FlightCarrier" type="application/atom+xml;type=entry"

title="RMTSAMPLEFLIGHT.CarrierToFlight" /> <atom:title>Flight</atom:title>

(9)

Copyright/Trademark

Read Example

To read the carrier details, you must call the “CarrierCollection” using the Carrier ID parameter.

Refer to the code snippet below for details on how to do it using JavaScript:

1. Create the SAP NetWeaver Gateway service URL .

2. Create the URL request that will be sent.

var carrierId = 'AA'; //American Airlines

var requestUri = serviceUri + "CarrierCollection(carrid='" + carrierId + "')";

3. Send the request and define callback methods for success and failure. Use the success callback method

to display the information in the resulted entry.

//Success Callback (Received data is an Entry):

var html = "";

html += "<div>" + "Carrier ID: " + data.carrid + "<br/>" + "</div>"; html += "<div>" + "Carrier Name: "+data.CARRNAME + "<br/>" + "</div>"; html += "<div>" + "Carrier Code: "+ data.CURRCODE + "<br/>" + "</div>"; html += "<div>" + "Carrier URL: " + data.URL + "<br/><br/>" + "</div>"; document.getElementById("target-element-id").innerHTML = html;

},

);

Refer the

full code snippet

found in Appendix 2.

Response

<?xml version="1.0" encoding="utf-8" ?>

- <atom:entry xml:base="<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/"

xmlns:atom="http://www.w3.org/2005/Atom" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData"> <atom:author /> <atom:content src="http://www.aa.com" /> - <m:properties> <d:carrid>AA</d:carrid>

<d:CARRNAME>American Airlines</d:CARRNAME> <d:CURRCODE>USD</d:CURRCODE>

<d:URL>http://www.aa.com</d:URL> <d:mimeType />

</m:properties>

<atom:id><Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection(carrid='AA')</ atom:id>

<atom:link href="CarrierCollection(carrid='AA')" rel="self" type="application/atom+xml;type=entry" /> <atom:link href="CarrierCollection(carrid='AA')/carrierFlights"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/carrierFlights" type="application/atom+xml;type=feed" title="RMTSAMPLEFLIGHT.CarrierToFlight" /> <atom:title>Carrier</atom:title>

(10)

Copyright/Trademark

Create Example

To book a Flight, trigger HTTP POST method on the Booking Collection (with the Booking details in the

request body). Check for the HTTP response code. If the response code is 201, then the HTTP-POST is

successful. The response contains the newly created Booking ID in the bookid field, as well as the entire

information that was part of the request body.

Refer to the code snippet below for details on how to invoke a create request using JavaScript:

1. Create the SAP NetWeaver Gateway service URL .

2. Create the URL request that will be sent.

var requestURL = serviceUri + "BookingCollection";

3. Create the new Booking item payload.

var bookingEntryContent = {carrid: "AA", connid: "0017", fldate: "2011-12-21T00:00:00", CUSTOMID: "00004617", bookid: "", CUSTTYPE: "P", SMOKER: "", WUNIT: "KG", LUGGWEIGHT: "14.4000", INVOICE: "", CLASS: "Y", FORCURAM: "879.82", FORCURKEY: "USD", LOCCURAM: "803.58", LOCCURKEY: "USD", ORDER_DATE: "2011-05-22T00:00:00", COUNTER: "00000000", AGENCYNUM: "00000325", CANCELLED: "", RESERVED: "",

PASSNAME: "Joe Smith", PASSFORM: "1234567",

PASSBIRTH: "1990-10-10T00:00:00" };

4. Create the HTTP POST request that will be sent, with the appropriate HTTP headers, request URL, and

payload.

Note: The XMLHttpRequest header is needed for POST requests sent to the SAP NetWeaver Gateway

server. The Content-Type and DataServiceVersion headers are needed for any OData request.

var request = { headers: {"X-Requested-With": "XMLHttpRequest", "Content-Type": "application/atom+xml", "DataServiceVersion": "2.0" }, requestUri: requestURL, method: "POST", data: bookingEntryContent };

(11)

Copyright/Trademark

5. Send the request, and define callback methods for success and failure. Use the success callback method

to display the Booking ID of the created entry, sent as the server response.

OData.request( request,

function (data) {

//Success Callback (received data is an Entry of the created booking):

var html = "";

html += "<div>" + "Booking ID: " + data.bookid + "</div>"; document.getElementById("target-element-id").innerHTML = html;

},

);

(12)

Copyright/Trademark

Creation of Request Body for Create Method:

The request body can be easily created by looking at the tags in the collection’s metadata. For example, the

metadata for Booking Collection provides information about the various fields (tags) that are needed for

creating a booking:

<Property Name="CLASS" Type="Edm.String" MaxLength="1" sap:label="Class" sap:filterable="false"/> <Property Name="FORCURAM" Type="Edm.Decimal" Precision="20" Scale="2" sap:label="Amount"

sap:filterable="false"/>

(13)

Copyright/Trademark

Authentication Handling

The code snippets above do not include code for handling any authentication method or user credentials.

The browser handles this as follows:



Basic Authentication

A pop-up is displayed containing field where the user must enter the user name and password.

Deploying the HTML Application

Setting up the environment (to overcome the Same Origin Policy problem):

The HTML application is hosted on a web server and accessed by the user’s browser.

Due to security reasons, the browser only allows the JavaScript code to access the server from which the

page/script originates. In our case, the HTML page/script is provided by the web server, but the OData feed

is provided by the SAP NetWeaver Gateway server.

To overcome the Same Origin Policy restriction, it is recommended to set up an environment as follows:

A reverse proxy should be used for sending the client HTTP requests designated to its domain to the correct

server, as follows:



For application calls, the requests are sent to the web server hosting your HTML application.



For service calls within the application, the requests are sent to the SAP NetWeaver Gateway server.

As a result, the web server may be accessed using the same domain (host, port, and protocol) as the SAP

NetWeaver Gateway server.

(14)

Copyright/Trademark

The URLs used for calling SAP NetWeaver Gateway services from the JavaScript code must use the domain

of the reverse proxy (host, port, and protocol). The reverse proxy identifies the Gateway path in the

request URL (for example: /sap/opu/sdata/…) and sends the request to the SAP NetWeaver Gateway

server. This server then sends the response directly to the client.

(15)

Copyright/Trademark

Appendix 1 - RMTSAMPLEFLIGHT Service Metadata

Description

<?xml version="1.0" encoding="utf-8"?>

<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:gp="http://www.sap.com/Protocols/SAPData/GenericPlayer"

xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData">

<edmx:DataServices m:DataServiceVersion="2.0">

<Key>

<Property Name="user" Type="Edm.String" MaxLength="12" sap:label="User Name" sap:filterable="false" m:FC_TargetPath="SyndicationAuthorName"

m:FC_KeepInContent="false"/>

<Property Name="updated" Type="Edm.DateTime" Precision="19" sap:label="Time Stamp" sap:filterable="false" m:FC_TargetPath="SyndicationUpdated" m:FC_KeepInContent="false"/> <Property Name="title" Type="Edm.String" MaxLength="255" sap:label="Title"

sap:creatable="true" sap:filterable="false" m:FC_TargetPath="SyndicationTitle" m:FC_KeepInContent="false"/>

</EntityType>

<Property Name="title" Type="Edm.String" sap:label="Notif. Text" sap:filterable="false"/> <Property Name="updated" Type="Edm.DateTime" Precision="19" sap:label="Time Stamp"

sap:filterable="false"/> </EntityType>

(16)

Copyright/Trademark

<Property Name="flightDetails" Type="RMTSAMPLEFLIGHT.FlightDetails" Nullable="false" sap:label="FlightDetails" sap:creatable="true" sap:updatable="true"

sap:filterable="false"/>

</EntityType>

(17)

Copyright/Trademark

</EntityType>

</EntityType>

(18)

Copyright/Trademark

</EntityType>

</ComplexType>

</ComplexType>

(19)

Copyright/Trademark

</ReferentialConstraint> </Association>

<EntitySet Name="CarrierCollection" EntityType="RMTSAMPLEFLIGHT.Carrier" sap:content-version="1" sap:creatable="false" sap:updatable="false" sap:deletable="false"/> <EntitySet Name="TravelagencyCollection" EntityType="RMTSAMPLEFLIGHT.Travelagency"

sap:content-version="1" sap:searchable="true"/>

<AssociationSet Name="AssocSet_FlightBookings"

Association="RMTSAMPLEFLIGHT.FlightBookings" sap:content-version="1"> <End EntitySet="FlightCollection" Role="FromRole_Flight_Booking"/> <End EntitySet="BookingCollection" Role="ToRole_Booking_Flight"/> </AssociationSet>

<AssociationSet Name="AssocSet_CarrierToFlight"

Association="RMTSAMPLEFLIGHT.CarrierToFlight" sap:content-version="1" sap:creatable="false" sap:updatable="false" sap:deletable="false"> <End EntitySet="CarrierCollection" Role="FromRole_Carrier_Flight"/> <End EntitySet="FlightCollection" Role="ToRole_Flight_Carrier"/> </AssociationSet>

<FunctionImport Name="CheckFlightAvailability"

ReturnType="RMTSAMPLEFLIGHT.FlightAvailability" m:HttpMethod="GET" sap:action-for="RMTSAMPLEFLIGHT.Flight">

<LongDescription>Airline</LongDescription> </Documentation>

</Parameter>

<LongDescription>Flight Number</LongDescription> </Documentation>

</Parameter>

</Parameter> </FunctionImport>

(20)

Copyright/Trademark

<FunctionImport Name="GetAvailableFlights"

ReturnType="Collection(RMTSAMPLEFLIGHT.Flight)" EntitySet="FlightCollection" m:HttpMethod="POST">

</Parameter>

</Parameter>

<LongDescription>Depart.city</LongDescription> </Documentation>

</Parameter>

<LongDescription>Arrival city</LongDescription> </Documentation> </Parameter> </FunctionImport> </EntityContainer> </Schema> </edmx:DataServices> </edmx:Edmx>

(21)

Copyright/Trademark

Appendix 2 – Code Snippets

Get Available Flights (Function Import)

// Root URI for the service.

"http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/"; function getFlightList(){

// URL for calling GetAvailableFlights function with all parameters.

var cityFrom = "NEW YORK"; var cityTo = "SAN FRANCISCO"; var fromDate = "20110105"; var toDate = "20110728";

var requestUri = serviceUri + "GetAvailableFlights?cityfrom=" + cityFrom + "&cityto=" + cityTo + "&fromdate=" + fromDate + "&todate=" + toDate;

// Send the request and define callback methods.

//Success Callback (Received data is a Feed):

var html = "";

for (var i = 0; i < data.results.length; i++) {

html += "<div>"+"Flight Carrier: "+data.results[i].carrid+"<br/></div>"; html += "<div>"+"Flight Price: "+data.results[i].PRICE+"<br/></div>"; html += "<div>"+"Flight Max. Seats:"+data.results[i].SEATSMAX

+"<br/><br/></div>"; }

document.getElementById("target-element-id").innerHTML = html;

},

); }

Flight Booking (Create)

function createFlightBooking(){ // URL for Create Booking.

var requestURL = serviceUri + "BookingCollection";

var bookingEntryContent = {carrid: "AA", connid: "0017", fldate: "2011-12-21T00:00:00", CUSTOMID: "00004617", bookid: "", CUSTTYPE: "P", SMOKER: "", WUNIT: "KG", LUGGWEIGHT: "14.4000", INVOICE: "", CLASS: "Y", FORCURAM: "879.82", FORCURKEY: "USD", LOCCURAM: "803.58",

(22)

Copyright/Trademark LOCCURKEY: "USD", ORDER_DATE: "2011-05-22T00:00:00", COUNTER: "00000000", AGENCYNUM: "00000325", CANCELLED: "", RESERVED: "",

PASSNAME: "Joe Smith", PASSFORM: "1234567",

PASSBIRTH: "1990-10-10T00:00:00" };

var request = { headers: {"X-Requested-With": "XMLHttpRequest", "Content-Type": "application/atom+xml", "DataServiceVersion": "2.0" }, requestUri: requestURL, method: "POST", data: bookingEntryContent }; OData.request( request, function (data) {

//Success Callback (received data is an Entry of the created booking):

var html = "";

html += "<div>" + "Booking ID: " + data.bookid + "</div>"; document.getElementById("target-element-id").innerHTML = html;

},

); }

Get Carrier by ID (Read)

function getCarrier(){ // URL for Get Carrier.

var carrierId = 'AA'; //American Airlines

var requestUri = serviceUri + "CarrierCollection(carrid='" + carrierId + "')";

// Send the request and define callback methods.

//Success Callback (Received data is an Entry):

var html = "";

html += "<div>" + "Carrier ID: " + data.carrid + "<br/>" + "</div>"; html += "<div>" + "Carrier Name: "+data.CARRNAME + "<br/>" + "</div>"; html += "<div>" + "Carrier Code: "+ data.CURRCODE + "<br/>" + "</div>"; html += "<div>" + "Carrier URL: " + data.URL + "<br/><br/>" + "</div>"; document.getElementById("target-element-id").innerHTML = html;

},

(23)

Copyright/Trademark

//Error Callback:

); }

Consuming SAP NetWeaver Gateway Services from HTML Applications using Java Script

Consuming SAP NetWeaver Gateway

Services from HTML Applications using

Java Script

Copyright

Table of Contents

CONSUMING SAP NETWEAVER GATEWAY SERVICES

USING JAVASCRIPT

SAP NetWeaver Gateway technology provides a simple way to interact with SAP applications through

variety of devices, environments and platforms based on market standards. The framework enables

development of innovative, people-centric solutions that bring the power of SAP business software into

new experiences, such as: social networking and collaboration environments; mobile and tablet devices;

and rich internet applications. The framework supports rapid innovation while ensuring security, integrity,

management and optimized maintenance of the core SAP systems. Completely flexible, the software offers

connectivity to SAP applications using any programming language or model without the need for SAP

knowledge by taking advantage of REST services and OData/ATOM protocols.

This guide provides information on how to consume SAP NetWeaver Gateway services from HTML

applications using JavaScript, based on the following scenario:



The user wants to fly from New York to San Francisco.



He goes online and searches for the different flights available. He enters his search parameters: city of

origin, destination city, departure date, and arrival date (Function Import).



From the SAP NetWeaver Gateway, he receives the information for the option(s) that meet(s) his search

parameters (Get Function).



He can now select the one that suits him the most and book his flight (Create Function).

The links to access the service document and metadata document are provided the in table below.

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/

$metadata?$format=xml

Each service URL should contain the following information:



Gateway host



Port



SAP Client – no need to specify client if connecting to the default client.

Example:

To obtain information on the selected service (its properties, function imports, associations, etc.), refer to

Appendix 1

, were we show the Metadata description of the RMTSAMPLEFLIGHT service.

To view the code snippets in a format that can be copied into new code, refer to

Appendix 2 – Code

Snippets

.

The Flight service contains the following collections:

FlightCollection (list of flights)

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/

iwfnd/RMTSAMPLEFLIGHT/FlightCollection

CarrierCollection (list of carriers

http://<Gateway_host>:<Gateway_port>/

sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection

BookingsCollection (list of Bookings)

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/

iwfnd/RMTSAMPLEFLIGHT/BookingCollection

The operation GetAvailableFlights on FlightCollection is used to get a list of flights. The following is the URL

for the same:

http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/GetAvailableFlights

Each collection supports some or all of the operations listed below. The table below provides the list of

operations supported and the methods that each of this operations map to respectively:

Create

HTTP POST

Read

GET

Update

PUT

Delete

DELETE

Prerequisites

The following tools are required for developing an HTML application using JavaScript:

SAP NetWeaver Gateway

2.0

1.0.1 or higher

Contact your system administrator for landscape details to connect to the SAP NetWeaver Gateway system.

Make sure you have performed the following procedures:



Import the downloaded datajs library to your HTML application:

Building an HTML Application using JavaScript