Professional Documents
Culture Documents
Copyright
Copyright 2011 SAP AG. All rights reserved.
SAP Library document classification: PUBLIC
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.
Copyright/Trademark
Table of Contents
Consuming SAP NetWeaver Gateway Services on HTML Applications ...................................................... 4
Prerequisites ................................................................................................................................................................. 5
Building an HTML Application .................................................................................................................................... 6
Function Import Example ....................................................................................................................................... 6
Read Example ......................................................................................................................................................... 9
Create Example ..................................................................................................................................................... 10
Creation of Request Body for Create Method:.................................................................................................. 12
Authentication Handling ............................................................................................................................................ 13
Deploying the HTML Application ............................................................................................................................. 13
Setting up the environment (to overcome the Cross-Origin Request problem): .......................................... 13
Appendix 1 - RMTSAMPLEFLIGHT Service Metadata Description ...............................................................15
Appendix 2 Code Snippets ...............................................................................................................................21
Get Available Flights (Function Import) .................................................................................................................. 21
Flight Booking (Create) ............................................................................................................................................. 21
Get Carrier by ID (Read)........................................................................................................................................... 22
Copyright/Trademark
http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/
http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/
$metadata?$format=xml
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.
Copyright/Trademark
URL
http://<Gateway_host>:<Gateway_port>/sap/opu/sdata/
iwfnd/RMTSAMPLEFLIGHT/FlightCollection
http://<Gateway_host>:<Gateway_port>/
sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection
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
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:
Copyright/Trademark
2. Create the URL of a query calling the GetAvailableFlights function import with the following
parameters: flight departure date, arrival date, and cities.
var
var
var
var
var
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);
}
);
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:link href="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:link href="FlightCollection(carrid='AA',connid='0017',fldate='20110105')" rel="edit"
type="application/atom+xml;type=entry" />
<atom:link href="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:link href="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>
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>
<atom:updated>2011-09-27T06:32:42Z</atom:updated>
</atom:entry>
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 .
var serviceUri =
"http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";
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.
OData.read(
requestUri,
function (data) {
//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;
//Assuming your HTML page has DIV element with id target-element-id
},
function (err) {
//Error Callback:
alert("Error occurred " + err.message);
}
);
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 .
var serviceUri =
"http://<Gateway_Host>:<Gateway_Port>/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";
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
};
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;
//Assuming your HTML page has DIV element with id target-element-id
},
function (err) {
//Error Callback:
alert("Error occurred " + err.message);
}
);
Copyright/Trademark
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.
As a result, the web server may be accessed using the same domain (host, port, and protocol) as the SAP
NetWeaver Gateway server.
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.
For further assistance, contact your system administrator.
Copyright/Trademark
Copyright/Trademark
Copyright/Trademark
Copyright/Trademark
Copyright/Trademark
<PropertyRef Name="connid"/>
<PropertyRef Name="fldate"/>
</Dependent>
</ReferentialConstraint>
</Association>
<Association Name="CarrierToFlight" sap:content-version="1">
<End Type="RMTSAMPLEFLIGHT.Carrier" Multiplicity="1" Role="FromRole_Carrier_Flight"/>
<End Type="RMTSAMPLEFLIGHT.Flight" Multiplicity="*" Role="ToRole_Flight_Carrier"/>
</Association>
<EntityContainer Name="RMTSAMPLEFLIGHT" m:IsDefaultEntityContainer="true">
<EntitySet Name="SubscriptionCollection" EntityType="RMTSAMPLEFLIGHT.Subscription"
sap:content-version="1"/>
<EntitySet Name="NotificationCollection" EntityType="RMTSAMPLEFLIGHT.Notification"
sap:content-version="1"/>
<EntitySet Name="FlightCollection" EntityType="RMTSAMPLEFLIGHT.Flight" sap:contentversion="1"/>
<EntitySet Name="BookingCollection" EntityType="RMTSAMPLEFLIGHT.Booking" sap:contentversion="1" sap:semantics="FLIGHT_BOOKING"/>
<EntitySet Name="CarrierCollection" EntityType="RMTSAMPLEFLIGHT.Carrier" sap:contentversion="1" sap:creatable="false" sap:updatable="false" sap:deletable="false"/>
<EntitySet Name="TravelagencyCollection" EntityType="RMTSAMPLEFLIGHT.Travelagency"
sap:content-version="1" sap:searchable="true"/>
<EntitySet Name="TravelAgencies" EntityType="RMTSAMPLEFLIGHT.Travelagency" sap:contentversion="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_BookingFlight" Association="RMTSAMPLEFLIGHT.BookingFlight"
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:actionfor="RMTSAMPLEFLIGHT.Flight">
<Parameter Name="airlineid" Type="Edm.String" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Airline</LongDescription>
</Documentation>
</Parameter>
<Parameter Name="connectionid" Type="Edm.String" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Flight Number</LongDescription>
</Documentation>
</Parameter>
<Parameter Name="flightdate" Type="Edm.DateTime" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Date</LongDescription>
</Documentation>
</Parameter>
</FunctionImport>
Copyright/Trademark
<FunctionImport Name="GetAvailableFlights"
ReturnType="Collection(RMTSAMPLEFLIGHT.Flight)" EntitySet="FlightCollection"
m:HttpMethod="POST">
<Parameter Name="fromdate" Type="Edm.DateTime" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Date</LongDescription>
</Documentation>
</Parameter>
<Parameter Name="todate" Type="Edm.DateTime" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Date</LongDescription>
</Documentation>
</Parameter>
<Parameter Name="cityfrom" Type="Edm.String" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Depart.city</LongDescription>
</Documentation>
</Parameter>
<Parameter Name="cityto" Type="Edm.String" Mode="In">
<Documentation>
<Summary/>
<LongDescription>Arrival city</LongDescription>
</Documentation>
</Parameter>
</FunctionImport>
</EntityContainer>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
Copyright/Trademark
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;
//Assuming your HTML page has DIV element with id target-element-id
},
function (err) {
//Error Callback:
alert("Error occurred " + err.message);
}
);
}
Copyright/Trademark
//Error Callback:
alert("Error occurred " + err.message);
}
);
}
Copyright/Trademark