Professional Documents
Culture Documents
6.1 - Consuming - A - Gateway - Service - in JavaScript PDF
6.1 - Consuming - A - Gateway - Service - in JavaScript PDF
INTE
RNA
L
Objectives
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.
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>
After the <script> tag to boot up SAPUI5, add the following JavaScript file
references:
The coding for models, views and controllers is separated into different files in order
to make it easier to manage.
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.
//
****************************************************************************
//
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;
}
}
//
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;
};
Create an instance of each view. Notice that views need to be identified by their
fully qualified name.
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.
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.
Exercise 14
Create a Gateway Application Using SAPUI5
JavaScript Libraries
No part of this publication may be reproduced or transmitted in any form or for any purpose Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal
without the express permission of SAP AG. The information contained herein may be Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services
changed without prior notice. mentioned herein as well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP company.
Some software products marketed by SAP AG and its distributors contain proprietary
software components of other software vendors. Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase
Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft products and services mentioned herein as well as their respective logos are trademarks or
registered trademarks of Sybase, Inc. Sybase is an SAP company.
Corporation.
All other product and service names mentioned are the trademarks of their respective
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x,
companies. Data contained in this document serves informational purposes only. National
System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/
product specifications may vary.
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, The information in this document is proprietary to SAP. No part of this document may be
OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, reproduced, copied, or transmitted in any form or for any purpose without the express prior
RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent written permission of SAP AG.
Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of This document is a preliminary version and not subject to your license agreement or any
IBM Corporation. other agreement with SAP. This document contains only intended strategies, developments,
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. and functionalities of the SAP product and is not intended to be binding upon SAP to any
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered 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.
trademarks of Adobe Systems Incorporated in the United States and/or other countries.
SAP assumes no responsibility for errors or omissions in this document. SAP does not
Oracle is a registered trademark of Oracle Corporation.
warrant the accuracy or completeness of the information, text, graphics, links, or other items
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. contained within this material. This document is provided without a warranty of any kind,
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are either express or implied, including but not limited to the implied warranties of
trademarks or registered trademarks of Citrix Systems, Inc. merchantability, fitness for a particular purpose, or non-infringement.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World SAP shall have no liability for damages of any kind including without limitation direct, special,
Wide Web Consortium, Massachusetts Institute of Technology. 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.
Java is a registered trademark of Sun Microsystems, Inc.
The statutory liability for personal injury and defective products is not affected. SAP has no
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for control over the information that you may access through the use of hot links contained in
technology invented and implemented by Netscape. these materials and does not endorse your use of third-party Web pages nor provide any
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, warranty whatsoever relating to third-party Web pages.
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.