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/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

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 Metadata Document

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:
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.

Copyright/Trademark

The Flight service contains the following collections:

Collection URL

FlightCollection (list of flights) CarrierCollection (list of carriers BookingsCollection (list of Bookings)

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 Read Update Delete

HTTP POST GET PUT DELETE

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

SAP NetWeaver Gateway

OData library for JavaScript - datajs

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:
<script type="text/javascript" src="datajs-1.0.1.min.js"></script>

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 var var var var cityFrom = "NEW YORK"; cityTo = "SAN FRANCISCO"; fromDate = "20110105"; toDate = "20110728"; 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); } );

Refer the full code snippet found in Appendix 2.

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/";

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 += "<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); } );

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> <atom:updated>2011-09-27T10:00:38Z</atom:updated> </atom:entry>

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/";

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/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); } );

Refer the full code snippet found in Appendix 2.

Copyright/Trademark

Creation of Request Body for Create Method: The request body can be easily created by looking at the tags in the collections metadata. For example, the metadata for Booking Collection provides information about the various fields (tags) that are needed for creating a booking:
<Property Name="carrid" Type="Edm.String" Nullable="false" MaxLength="3" sap:label="Airline" sap:filterable="false"/> <Property Name="connid" Type="Edm.String" Nullable="false" MaxLength="4" sap:label="Flight Number" sap:filterable="false"/> <Property Name="fldate" Type="Edm.DateTime" Nullable="false" Precision="10" sap:label="Date" sap:filterable="false"/> <Property Name="bookid" Type="Edm.String" Nullable="false" MaxLength="8" sap:label="Booking number" sap:filterable="false"/> <Property Name="CUSTOMID" Type="Edm.String" MaxLength="8" sap:label="Customer Number" sap:filterable="false"/> <Property Name="CUSTTYPE" Type="Edm.String" MaxLength="1" sap:label="B/P customer" sap:filterable="false"/> <Property Name="SMOKER" Type="Edm.String" MaxLength="1" sap:label="Smoker" sap:filterable="false"/> <Property Name="WUNIT" Type="Edm.String" MaxLength="3" sap:label="Unit of measure" sap:filterable="false"/> <Property Name="LUGGWEIGHT" Type="Edm.Decimal" Precision="10" Scale="4" sap:label="Luggage Weight" sap:filterable="false" sap:unit="WUNIT"/> <Property Name="INVOICE" Type="Edm.String" MaxLength="1" sap:label="Invoice pty." sap:filterable="false"/> <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"/> <Property Name="FORCURKEY" Type="Edm.String" MaxLength="5" sap:label="Paymnt currency" sap:filterable="false"/> <Property Name="LOCCURAM" Type="Edm.Decimal" Precision="20" Scale="2" sap:label="Amount" sap:filterable="false"/> <Property Name="LOCCURKEY" Type="Edm.String" MaxLength="5" sap:label="Airline Currency" sap:filterable="false"/> <Property Name="ORDER_DATE" Type="Edm.DateTime" Precision="10" sap:label="Booking date" sap:filterable="false"/> <Property Name="COUNTER" Type="Edm.String" MaxLength="8" sap:label="Sales office" sap:filterable="false"/> <Property Name="AGENCYNUM" Type="Edm.String" MaxLength="8" sap:label="Agency No." sap:filterable="false"/> <Property Name="CANCELLED" Type="Edm.String" MaxLength="1" sap:label="Cancelation flag" sap:filterable="false"/> <Property Name="RESERVED" Type="Edm.String" MaxLength="1" sap:label="Reserved" sap:filterable="false"/> <Property Name="PASSNAME" Type="Edm.String" MaxLength="25" sap:label="Passenger Name" sap:filterable="false"/> <Property Name="PASSFORM" Type="Edm.String" MaxLength="15" sap:label="Title" sap:filterable="false"/> <Property Name="PASSBIRTH" Type="Edm.DateTime" Nullable="true" Precision="10" sap:label="DOB of Passeng." sap:filterable="false"/>

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 users 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/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

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"> <Schema Namespace="RMTSAMPLEFLIGHT" xmlns="http://schemas.microsoft.com/ado/2008/09/edm"> <EntityType Name="Subscription" sap:content-version="1"> <Key> <PropertyRef Name="ID"/> </Key> <Property Name="ID" Type="Edm.String" Nullable="false" MaxLength="32" sap:label="Sub. ID" sap:filterable="false"/> <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"/> <Property Name="deliveryAddress" Type="Edm.String" sap:label="Delivery Address" sap:creatable="true" sap:filterable="false"/> <Property Name="collection" Type="Edm.String" MaxLength="40" sap:label="Collection" sap:creatable="true" sap:filterable="false"/> <Property Name="filter" Type="Edm.String" sap:label="Filter" sap:creatable="true" sap:filterable="false"/> <Property Name="select" Type="Edm.String" MaxLength="255" sap:label="Select" sap:creatable="true" sap:filterable="false"/> </EntityType> <EntityType Name="Notification" sap:content-version="1"> <Key> <PropertyRef Name="ID"/> </Key> <Property Name="ID" Type="Edm.String" Nullable="false" MaxLength="32" sap:label="Notification ID" sap:filterable="false"/> <Property Name="collection" Type="Edm.String" MaxLength="40" sap:label="Collection" sap:filterable="false"/> <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> <EntityType Name="Flight" sap:content-version="1"> <Key> <PropertyRef Name="carrid"/> <PropertyRef Name="connid"/> <PropertyRef Name="fldate"/> </Key> <Property Name="carrid" Type="Edm.String" Nullable="false" MaxLength="3" sap:label="Airline" sap:filterable="false"/> <Property Name="connid" Type="Edm.String" Nullable="false" MaxLength="4" sap:label="Flight Number" sap:filterable="false"/> <Property Name="fldate" Type="Edm.DateTime" Nullable="false" Precision="10" sap:label="Date" sap:filterable="false"/>

Copyright/Trademark

<Property Name="PRICE" Type="Edm.Decimal" Precision="20" Scale="2" sap:label="Airfare" sap:filterable="false"/> <Property Name="CURRENCY" Type="Edm.String" MaxLength="5" sap:label="Airline Currency" sap:filterable="false"/> <Property Name="PLANETYPE" Type="Edm.String" MaxLength="10" sap:label="Plane Type" sap:filterable="false"/> <Property Name="SEATSMAX" Type="Edm.Int32" sap:label="Max. capacity econ." sap:filterable="false"/> <Property Name="SEATSOCC" Type="Edm.Int32" sap:label="Occupied econ." sap:filterable="false"/> <Property Name="PAYMENTSUM" Type="Edm.Decimal" Precision="22" Scale="2" sap:label="Total" sap:filterable="false"/> <Property Name="SEATSMAX_B" Type="Edm.Int32" sap:label="Max. capacity bus." sap:filterable="false"/> <Property Name="SEATSOCC_B" Type="Edm.Int32" sap:label="Occupied bus." sap:filterable="false"/> <Property Name="SEATSMAX_F" Type="Edm.Int32" sap:label="Max. capacity 1st" sap:filterable="false"/> <Property Name="SEATSOCC_F" Type="Edm.Int32" sap:label="Occupied 1st" sap:filterable="false"/> <Property Name="flightDetails" Type="RMTSAMPLEFLIGHT.FlightDetails" Nullable="false" sap:label="FlightDetails" sap:creatable="true" sap:updatable="true" sap:filterable="false"/> <NavigationProperty Name="flightbooking" Relationship="RMTSAMPLEFLIGHT.BookingFlight" FromRole="FromRole_Flight_Booking" ToRole="ToRole_Booking_Flight"/> <NavigationProperty Name="flightBookings" Relationship="RMTSAMPLEFLIGHT.FlightBookings" FromRole="FromRole_Flight_Booking" ToRole="ToRole_Booking_Flight"/> </EntityType> <EntityType Name="Booking" sap:content-version="1" sap:semantics="FLIGHT_BOOKING"> <Key> <PropertyRef Name="carrid"/> <PropertyRef Name="connid"/> <PropertyRef Name="fldate"/> <PropertyRef Name="bookid"/> </Key> <Property Name="carrid" Type="Edm.String" Nullable="false" MaxLength="3" sap:label="Airline" sap:filterable="false"/> <Property Name="connid" Type="Edm.String" Nullable="false" MaxLength="4" sap:label="Flight Number" sap:filterable="false"/> <Property Name="fldate" Type="Edm.DateTime" Nullable="false" Precision="10" sap:label="Date" sap:filterable="false"/> <Property Name="bookid" Type="Edm.String" Nullable="false" MaxLength="8" sap:label="Booking number" sap:filterable="false"/> <Property Name="CUSTOMID" Type="Edm.String" MaxLength="8" sap:label="Customer Number" sap:filterable="false"/> <Property Name="CUSTTYPE" Type="Edm.String" MaxLength="1" sap:label="B/P customer" sap:filterable="false"/> <Property Name="SMOKER" Type="Edm.String" MaxLength="1" sap:label="Smoker" sap:filterable="false"/> <Property Name="WUNIT" Type="Edm.String" MaxLength="3" sap:label="Unit of measure" sap:filterable="false"/> <Property Name="LUGGWEIGHT" Type="Edm.Decimal" Precision="10" Scale="4" sap:label="Luggage Weight" sap:filterable="false" sap:unit="WUNIT"/> <Property Name="INVOICE" Type="Edm.String" MaxLength="1" sap:label="Invoice pty." sap:filterable="false"/> <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"/> <Property Name="FORCURKEY" Type="Edm.String" MaxLength="5" sap:label="Paymnt currency" sap:filterable="false"/> <Property Name="LOCCURAM" Type="Edm.Decimal" Precision="20" Scale="2" sap:label="Amount" sap:filterable="false"/>

Copyright/Trademark

<Property Name="LOCCURKEY" Type="Edm.String" MaxLength="5" sap:label="Airline Currency" sap:filterable="false"/> <Property Name="ORDER_DATE" Type="Edm.DateTime" Precision="10" sap:label="Booking date" sap:filterable="false"/> <Property Name="COUNTER" Type="Edm.String" MaxLength="8" sap:label="Sales office" sap:filterable="false"/> <Property Name="AGENCYNUM" Type="Edm.String" MaxLength="8" sap:label="Agency No." sap:filterable="false"/> <Property Name="CANCELLED" Type="Edm.String" MaxLength="1" sap:label="Cancelation flag" sap:filterable="false"/> <Property Name="RESERVED" Type="Edm.String" MaxLength="1" sap:label="Reserved" sap:filterable="false"/> <Property Name="PASSNAME" Type="Edm.String" MaxLength="25" sap:label="Passenger Name" sap:filterable="false"/> <Property Name="PASSFORM" Type="Edm.String" MaxLength="15" sap:label="Title" sap:filterable="false"/> <Property Name="PASSBIRTH" Type="Edm.DateTime" Nullable="true" Precision="10" sap:label="DOB of Passeng." sap:filterable="false"/> <NavigationProperty Name="bookedFlight" Relationship="RMTSAMPLEFLIGHT.BookingFlight" FromRole="ToRole_Booking_Flight" ToRole="FromRole_Flight_Booking"/> </EntityType> <EntityType Name="Carrier" sap:content-version="1"> <Key> <PropertyRef Name="carrid"/> </Key> <Property Name="carrid" Type="Edm.String" Nullable="false" MaxLength="3" sap:label="Airline" sap:filterable="false"/> <Property Name="CARRNAME" Type="Edm.String" MaxLength="20" sap:label="Airline" sap:filterable="false"/> <Property Name="CURRCODE" Type="Edm.String" MaxLength="5" sap:label="Airline Currency" sap:filterable="false"/> <Property Name="URL" Type="Edm.String" MaxLength="255" sap:label="URL" sap:filterable="false"/> <NavigationProperty Name="carrierFlights" Relationship="RMTSAMPLEFLIGHT.CarrierToFlight" FromRole="FromRole_Carrier_Flight" ToRole="ToRole_Flight_Carrier"/> </EntityType> <EntityType Name="Travelagency" m:HasStream="true" sap:content-version="1"> <Key> <PropertyRef Name="agencynum"/> </Key> <Property Name="agencynum" Type="Edm.String" Nullable="false" MaxLength="8" sap:label="Agency No." sap:filterable="false"/> <Property Name="NAME" Type="Edm.String" MaxLength="25" sap:label="Travel agency name" sap:filterable="false"/> <Property Name="STREET" Type="Edm.String" MaxLength="30" sap:label="Street" sap:filterable="false"/> <Property Name="POSTBOX" Type="Edm.String" MaxLength="10" sap:label="PO Box" sap:filterable="false"/> <Property Name="POSTCODE" Type="Edm.String" MaxLength="10" sap:label="Postal Code" sap:filterable="false"/> <Property Name="CITY" Type="Edm.String" MaxLength="25" sap:label="City" sap:filterable="false"/> <Property Name="COUNTRY" Type="Edm.String" MaxLength="3" sap:label="Country" sap:filterable="false"/> <Property Name="REGION" Type="Edm.String" MaxLength="3" sap:label="Region" sap:filterable="false"/> <Property Name="TELEPHONE" Type="Edm.String" MaxLength="30" sap:label="Tel." sap:filterable="false"/> <Property Name="URL" Type="Edm.String" MaxLength="255" sap:label="Travel agency URL" sap:filterable="false"/> <Property Name="LANGU" Type="Edm.String" MaxLength="2" sap:label="Language" sap:filterable="false"/>

Copyright/Trademark

<Property Name="CURRENCY" Type="Edm.String" MaxLength="5" sap:label="Trav.Agency.Curr" sap:filterable="false"/> <Property Name="mimeType" Type="Edm.String" MaxLength="128" sap:label="MIME Type" sap:filterable="false"/> </EntityType> <ComplexType Name="FlightDetails"> <Property Name="countryFrom" Type="Edm.String" MaxLength="3" sap:label="Country" sap:filterable="false"/> <Property Name="cityFrom" Type="Edm.String" MaxLength="20" sap:label="Depart.city" sap:filterable="false"/> <Property Name="airportFrom" Type="Edm.String" MaxLength="3" sap:label="Dep. airport" sap:filterable="false"/> <Property Name="countryTo" Type="Edm.String" MaxLength="3" sap:label="Country" sap:filterable="false"/> <Property Name="cityTo" Type="Edm.String" MaxLength="20" sap:label="Arrival city" sap:filterable="false"/> <Property Name="airportTo" Type="Edm.String" MaxLength="3" sap:label="Dest. airport" sap:filterable="false"/> <Property Name="flightTime" Type="Edm.Int32" sap:label="Flight time" sap:filterable="false"/> <Property Name="departureTime" Type="Edm.Time" Precision="8" sap:label="Departure" sap:filterable="false"/> <Property Name="arrivalTime" Type="Edm.Time" Precision="8" sap:label="Arrival Time" sap:filterable="false"/> <Property Name="distance" Type="Edm.Decimal" Precision="11" Scale="4" sap:label="Distance" sap:filterable="false"/> <Property Name="distanceUnit" Type="Edm.String" MaxLength="3" sap:label="Distance in" sap:filterable="false"/> <Property Name="flightType" Type="Edm.String" MaxLength="1" sap:label="Charter" sap:filterable="false"/> <Property Name="period" Type="Edm.Byte" sap:label="n day(s) later" sap:filterable="false"/> </ComplexType> <ComplexType Name="FlightAvailability"> <Property Name="ECONOMAX" Type="Edm.Int32" sap:label="Max. capacity econ." sap:filterable="false"/> <Property Name="ECONOFREE" Type="Edm.Int32" sap:label="Free seats" sap:filterable="false"/> <Property Name="BUSINMAX" Type="Edm.Int32" sap:label="Max. capacity bus." sap:filterable="false"/> <Property Name="BUSINFREE" Type="Edm.Int32" sap:label="Free seats" sap:filterable="false"/> <Property Name="FIRSTMAX" Type="Edm.Int32" sap:label="Max. capacity 1st" sap:filterable="false"/> <Property Name="FIRSTFREE" Type="Edm.Int32" sap:label="Free seats" sap:filterable="false"/> </ComplexType> <ComplexType Name="FlightAvailability2" BaseType="RMTSAMPLEFLIGHT.FlightAvailability"/> <Association Name="FlightBookings" sap:content-version="1"> <End Type="RMTSAMPLEFLIGHT.Flight" Multiplicity="1" Role="FromRole_Flight_Booking"/> <End Type="RMTSAMPLEFLIGHT.Booking" Multiplicity="*" Role="ToRole_Booking_Flight"/> </Association> <Association Name="BookingFlight" sap:content-version="1"> <End Type="RMTSAMPLEFLIGHT.Flight" Multiplicity="1" Role="FromRole_Flight_Booking"/> <End Type="RMTSAMPLEFLIGHT.Booking" Multiplicity="1" Role="ToRole_Booking_Flight"/> <ReferentialConstraint> <Principal Role="FromRole_Flight_Booking"> <PropertyRef Name="carrid"/> <PropertyRef Name="connid"/> <PropertyRef Name="fldate"/> </Principal> <Dependent Role="ToRole_Booking_Flight"> <PropertyRef Name="carrid"/>

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

Appendix 2 Code Snippets

Get Available Flights (Function Import)
// Root URI for the service. var serviceUri = "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. 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); } ); }

Flight Booking (Create)

// Root URI for the service. var serviceUri = "http://<Gateway_Host>:<Gateway_Port>/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/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); } ); }

Get Carrier by ID (Read)

// Root URI for the service. var serviceUri = "http://<Gateway_Host>:<Gateway_Port>/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 += "<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) {

Copyright/Trademark

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

Copyright/Trademark