Consuming SAP NetWeaver Gateway Services from HTML Applications using Java Script
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Consuming SAP NetWeaver Gateway Services from HTML Applications using Java Script
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/TrademarkTable 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/TrademarkCONSUMING 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 http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/
Document
Metadata http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/
Document $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://:/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.
Copyright/TrademarkThe Flight service contains the following collections:
Collection URL
FlightCollection (list of flights) http://:/sap/opu/sdata/
iwfnd/RMTSAMPLEFLIGHT/FlightCollection
CarrierCollection (list of carriers http://:/
sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection
BookingsCollection (list of Bookings) http://:/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://:/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:
Copyright/TrademarkBuilding 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://:/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 += ""+"Flight Carrier: "+data.results[i].carrid+"";
html += ""+"Flight Price: "+data.results[i].PRICE+"";
html += ""+"Flight Max. Seats:"+data.results[i].SEATSMAX
+"";
}
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);
}
);
Refer the full code snippet found in Appendix 2.
Copyright/TrademarkResponse
-
http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/FlightCollection
FlightCollection
2011-09-27T06:32:42Z
-
-
-
AA
0017
2011-01-05T00:00:00
889.00
USD
747-400
385
367
185742.73
31
22
21
21
-
US
new york
JFK
US
SAN FRANCISCO
SFO
361
PT11H00M00S
PT14H01M00S
2574.0000
SMI
0
http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/FlightCollection(carrid='AA',connid='0
017',fldate='20110105')
Flight
2011-09-27T06:32:42Z
-
-
-
AA
0017
2011-03-16T00:00:00
422.94
USD
747-400
385
371
192129.22
31
30
21
20
-
US
Copyright/Trademarknew york
JFK
US
SAN FRANCISCO
SFO
361
PT11H00M00S
PT14H01M00S
2574.0000
SMI
0
http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/FlightCollection(carrid='AA',connid='0017',
fldate='20110316')
Flight
2011-09-27T06:32:42Z
Copyright/TrademarkRead 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://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";
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.
OData.read(
requestUri,
function (data) {
//Success Callback (Received data is an Entry):
var html = "";
html += "" + "Carrier ID: " + data.carrid + "" + "";
html += "" + "Carrier Name: "+data.CARRNAME + "" + "";
html += "" + "Carrier Code: "+ data.CURRCODE + "" + "";
html += "" + "Carrier URL: " + data.URL + "" + "";
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);
}
);
Refer the full code snippet found in Appendix 2.
Response
-
-
AA
American Airlines
USD
http://www.aa.com
:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/CarrierCollection(carrid='AA')
Carrier
2011-09-27T10:00:38Z
Copyright/TrademarkCreate 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://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";
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
};
Copyright/Trademark5. 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 += "" + "Booking ID: " + data.bookid + "";
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);
}
);
Refer the full code snippet found in Appendix 2.
Copyright/TrademarkCreation 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:
Copyright/TrademarkAuthentication 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.
Copyright/TrademarkThe 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/TrademarkAppendix 1 - RMTSAMPLEFLIGHT Service Metadata
Description
Copyright/TrademarkCopyright/Trademark
Copyright/Trademark
Copyright/Trademark
Airline
Flight Number
Date
Copyright/TrademarkDate
Date
Depart.city
Arrival city
Copyright/TrademarkAppendix 2 – Code Snippets
Get Available Flights (Function Import)
// Root URI for the service.
var serviceUri =
"http://:/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.
OData.read(
requestUri,
function (data) {
//Success Callback (Received data is a Feed):
var html = "";
for (var i = 0; i < data.results.length; i++) {
html += ""+"Flight Carrier: "+data.results[i].carrid+"";
html += ""+"Flight Price: "+data.results[i].PRICE+"";
html += ""+"Flight Max. Seats:"+data.results[i].SEATSMAX
+"";
}
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);
}
);
}
Flight Booking (Create)
// Root URI for the service.
var serviceUri =
"http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";
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",
Copyright/TrademarkLOCCURKEY: "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 += "" + "Booking ID: " + data.bookid + "";
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);
}
);
}
Get Carrier by ID (Read)
// Root URI for the service.
var serviceUri =
"http://:/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT/";
function getCarrier(){
// URL for Get Carrier.
var carrierId = 'AA'; //American Airlines
var requestUri = serviceUri + "CarrierCollection(carrid='" + carrierId + "')";
// Send the request and define callback methods.
OData.read(
requestUri,
function (data) {
//Success Callback (Received data is an Entry):
var html = "";
html += "" + "Carrier ID: " + data.carrid + "" + "";
html += "" + "Carrier Name: "+data.CARRNAME + "" + "";
html += "" + "Carrier Code: "+ data.CURRCODE + "" + "";
html += "" + "Carrier URL: " + data.URL + "" + "";
document.getElementById("target-element-id").innerHTML = html;
//Assuming your HTML page has DIV element with id ‘target-element-id’
},
function (err) {
Copyright/Trademark//Error Callback:
alert("Error occurred " + err.message);
}
);
}
Copyright/TrademarkYou can also read
