Scribd
Upload
43 views19 pages

Consuming OData Service in JavaScript

Consuming OData Service in JavaScript

Uploaded by

mohammedmeeran3061
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
43 views19 pages

Consuming OData Service in JavaScript

Consuming OData Service in JavaScript

Uploaded by

mohammedmeeran3061
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

GW100 SAP NetWeaver Gateway

Consuming a Gateway Service in JavaScript


March, 2012

INTE

RNA

Objectives

At the end of this chapter, you will understand:


How Use the SAP UI5 JavaScript Libraries to Create a Gateway
Service (Read-only)

2012 SAP AG. All rights reserved.

Agenda
u

Consuming an OData Service using the SAPUI5 JavaScript Libraries

2012 SAP AG. All rights reserved.

Setup Eclipse Workspace


Create a new folder within your workspace. This will contain your SAP OData
developments.
Underneath this folder, create:
An index.html file
Three more folders named Models, Views and Controllers.

2012 SAP AG. All rights reserved.

Define a Basic Web Page 1/2


It is assumed that the SUPUI5 libraries are already installed on your web server
under /sapui5. Edit index.html and add the following coding to start with:
<!DOCTYPE html>
<html>
<head>
Heres the important part
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAP OData/SAPUI5 demo</title>
Boot up SAPUI5, load a theme

then load the required libraries
<!-- Load SAPUI5, select gold reflection theme and load the commons, table and ux3
libraries -->
<script id="sap-ui-bootstrap" type="text/javascript"
src="/sapui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"></script>

... snip ...
The output from SAPUI5

<body class="sapUiBody">
will be written here
<div id="shellArea"></div>
</body>
</html>

2012 SAP AG. All rights reserved.

Define a Basic Web Page 2/2


After the <script> tag to boot up SAPUI5, add the following JavaScript file
references:
<!-- Declare MVC files in reverse order of dependency
Models first, then controllers, then views -->
<script type="text/javascript" src="./Models/flightInfoModel.js"></script>

<script type="text/javascript" src="./Controllers/flightController.js"></script>

<script type="text/javascript" src="./Views/ui_utilities.js"></script>
<script type="text/javascript" src="./Views/showFlights.js"></script>
<script type="text/javascript" src="./Views/showAirports.js"></script>
<script type="text/javascript" src="./Views/showBookings.js"></script>

The coding for models, views and controllers is separated into different files in order
to make it easier to manage.

2012 SAP AG. All rights reserved.

Create a JavaScript Closure for the Model


In the ./Models folder create flightInfoModel.js.
The following code creates a closure around the declaration of the OData model
object hiding it as a private property and exposing it through method getModel().
The statement to create the OData model is highlighted.
// **************************************************************************
// Create a model object closure
// **************************************************************************
var oFlightModel = (function(uri,service,user,password) {
var dflt_uri = uri || "http://localhost/sap/Gateway/ABC/";
var dflt_service = service || "Flight_Information_nn/";
var dflt_user = user || "GW_USER"; // Add default user
var dflt_password = password || "password"; // Add default user password

var oModel = new sap.ui.model.odata.ODataModel(dflt_uri + dflt_service,
false, dflt_user, dflt_password);

return {
getModel : function() { return oModel; },
getMetadata : function() { return oModel.oMetadata.dataServices.schema[0]; }
}
}());

2012 SAP AG. All rights reserved.

Create a Controller
In the ./Controllers folder create flightController.js.
In this example, the coding in the controller does nothing more than return an
anonymous object having methods that return the name of each of the entity types.
This functionality is used by a utility that creates a UI table for an entity type.
// **************************************************************************
// Define a controller for handling Flight Information
// **************************************************************************
sap.ui.controller("sap.training.gw100.controller.doFlightInfo",
(function() {
return {
Each controller is named using
getFlightEntityName: function() { return "Flight"; },
an arbitrary namespace.
getBookingEntityName: function() { return "Booking"; },
getAirportEntityName: function() { return "Airport"; },
};
}())
);

2012 SAP AG. All rights reserved.

Create Views for each Entity Type


In the ./Views folder create a file for each view called showAirports.js,
showFlights.js, and showBookings.js.
Here, well use a utility function to create the required UI table using the methods
found in the controller that return the entity type name.

Each view needs to know the


identity of its associated controller.
// ****************************************************************************
// Airports view
// ****************************************************************************
sap.ui.jsview("sap.training.gw100.view.show s",
Airport
{ getControllerName: function() { return "sap.training.gw100.controller.doFlightInfo"; },
createContent: function(oController) {
return buildTableFromMetadata(oFlightModel, oController.get EntityName());
Airport
}
}
);

This value is then passed to

method createContent()

This function is repeated for each view with the entity type name changed as
required.

2012 SAP AG. All rights reserved.

Utility to Create a UI Table from OData Metadata 1/2


In the ./Views folder create the file ui_utilities.js.
// ****************************************************************************
// Create a UI table based on supplied Entity Type name and OData metadata
// ****************************************************************************
var buildTableFromMetadata = function(oModel, entityName) {
var oMetaData = oModel.getMetadata()
var thisEntityType = oMetaData.namespace + "." + entityName;
var thisEntitySetName = "";
var colList = [];
var i = 0, j = 0;

// Loop around entity types
for (i=0; i<oMetaData.entityType.length; i++) {
// Have we found the entity type we're looking for?
if (oMetaData.entityType[i].name &&
oMetaData.entityType[i].name === entityName) {
// Use the fully qualified entity name to determine the entity set name
for (j=0; j<oMetaData.entityContainer[0].entitySet.length; j++) {
if (oMetaData.entityContainer[0].entitySet[j].entityType === thisEntityType) {
thisEntitySetName = oMetaData.entityContainer[0].entitySet[j].name;
}
}
2012 SAP AG. All rights reserved.

10

Utility to Create a UI Table from OData Metadata 2/2


Continuation of the coding in ./Views/ui_utilities.js.
// Loop around the entity type properties creating a table column for each
for (j=0; j<oMetaData.entityType[i].property.length; j++) {
// For simplicity, miss out complex types
if (oMetaData.entityType[i].property[j].type.substring(0,4) == "Edm.") {
colList.push({label : oMetaData.entityType[i].property[j].name,
template: oMetaData.entityType[i].property[j].name});
}
}
}
}

// Create a table using the column list created above
var oTable = new sap.ui.table.DataTable({ columns: colList });

// bind model to Table
oTable.setModel(oModel.getModel());
oTable.bindAggregation("rows", thisEntitySetName);

return oTable;
};

2012 SAP AG. All rights reserved.

11

Complete the JavaScript Coding in the Web Page 1/4


The remainder of the index.html web page now needs to be completed.
After the last <script> element, add the following:
<script>
// **************************************************************************
// Instantiate views declared in the above ./views/*.js files
// **************************************************************************
var flightsView = sap.ui.jsview("sap.training.gw100.view.showFlights");
var airportsView = sap.ui.jsview("sap.training.gw100.view.showAirports");
var bookingsView = sap.ui.jsview("sap.training.gw100.view.showBookings");

Create an instance of each view. Notice that views need to be identified by their
fully qualified name.

2012 SAP AG. All rights reserved.

12

Complete the JavaScript Coding in the Web Page 2/4


The UX3 Shell object defines the entire screen layout.
The worksetItems array holds the menu structure.
// **************************************************************************
// Create the ux3 shell (navigation and content container)
// **************************************************************************
var oShell = new sap.ui.ux3.Shell("myShell",
{ appIcon:"http://www.sap.com/global/images/SAPLogo.gif",
appTitle:"SAPUI5 Interface to Gateway",

worksetItems:[
new sap.ui.ux3.NavigationItem( {


key:"wi_FlightInfo",
text:"Flight Information",

subItems:[

new sap.ui.ux3.NavigationItem({key:"wi_FlightInfo_Flights", text:"Flights"}),

new sap.ui.ux3.NavigationItem({key:"wi_FlightInfo_Airports",text:"Airports"}),


new sap.ui.ux3.NavigationItem({key:"wi_FlightInfo_Bookings",text:"Bookings"})
]

})


],
paneBarItems: [ new sap.ui.core.Item({key:"pb_people", text:"People"}) ],
logout: function() { alert("Bye bye..."); }
}
);
2012 SAP AG. All rights reserved.

13

Complete the JavaScript Coding in the Web Page 3/4


The getContent() function examines the key of the selected menu item and
returns the appropriate view instance.
// Page content creation - for each workset item the content is defined here
var mContent = {};

var getContent = function(key) {
// If content is already created, return it directly
if (mContent[key]) return mContent[key];

if (key === "wi_FlightInfo_Bookings") { mContent[key] = bookingsView; }
else if (key === "wi_FlightInfo_Airports") { mContent[key] = airportsView; }
else if (key === "wi_FlightInfo_Flights") { mContent[key] = flightsView; }

return mContent[key];
}

The returned view instance is then displayed in the UX3 shells content area.

2012 SAP AG. All rights reserved.

14

Complete the JavaScript Coding in the Web Page 4/4


Attach a function to the UX3 Shells WorksetItemSelected event that returns the
selected view instance, then set the initial view.
// When the user selects a workset item, put the respective content into the shell's
// main area
oShell.attachWorksetItemSelected(function(oEvent) {
var key = oEvent.getParameter("key");
oShell.setContent(getContent(key));
});

// Set the initial content of the Shell - the Home Overview is selected initially
oShell.setContent(getContent("wi_FlightInfo_Flights"));

// Place the Shell into the <div> element defined below
oShell.placeAt("shellArea");
</script>
</head>

Finally, place the output of the UX3 Shell into the HTML <div> called shellArea.

2012 SAP AG. All rights reserved.

15

Finished Application

2012 SAP AG. All rights reserved.

16

Hands-on Exercise

Exercise 14
Create a Gateway Application Using SAPUI5
JavaScript Libraries

2012 SAP AG. All rights reserved.

17

Summary

You should now understand:


How Use the SAP UI5 JavaScript Libraries to Create a Gateway
Service (Read-only)

2012 SAP AG. All rights reserved.

18

2012 SAP AG. All rights reserved

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.

2012 SAP AG. All rights reserved.

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.
The information in this document is proprietary to SAP. No part of this document may be
reproduced, copied, or transmitted in any form or for any purpose without the express prior
written permission of SAP AG.
This document is a preliminary version and not subject to your license agreement or any
other agreement with SAP. This document contains only intended strategies, developments,
and functionalities of the SAP product and is not intended to be binding upon SAP to any
particular course of business, product strategy, and/or development. Please note that this
document is subject to change and may be changed by SAP at any time without notice.
SAP assumes no responsibility for errors or omissions in this document. SAP does not
warrant the accuracy or completeness of the information, text, graphics, links, or other items
contained within this material. This document is provided without a warranty of any kind,
either express or implied, including but not limited to the implied warranties of
merchantability, fitness for a particular purpose, or non-infringement.
SAP shall have no liability for damages of any kind including without limitation direct, special,
indirect, or consequential damages that may result from the use of these materials. This
limitation shall not apply in cases of intent or gross negligence.
The statutory liability for personal injury and defective products is not affected. SAP has no
control over the information that you may access through the use of hot links contained in
these materials and does not endorse your use of third-party Web pages nor provide any
warranty whatsoever relating to third-party Web pages.

19

You might also like