Skip to content

Instantly share code, notes, and snippets.

@dewdad

dewdad/jsbin.sudicu.html

Created July 21, 2014 11:23
Show Gist options
  • Save dewdad/5beb8c52dd088486e423 to your computer and use it in GitHub Desktop.
Save dewdad/5beb8c52dd088486e423 to your computer and use it in GitHub Desktop.
Download ZIP
A single page test template for SAPUI5 and OData
Raw
jsbin.sudicu.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SAPUI5 BlueCrystal Example using Mock Service</title>
<script id='sap-ui-bootstrap'
src='https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-debug="true"
type="text/javascript" data-sap-ui-libs="sap.m, sap.me"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script type="text" id="rootview">
<core:View
xmlns="sap.m"
xmlns:me="sap.me"
xmlns:core="sap.ui.core" >
<Shell id="shell" showLogout="false">
<app>
<App id="app" defaultTransitionName="slide">
<pages>
<Page id="page1" title="Products by Category" enableScrolling="false">
<content>
<TileContainer id="tc" editable="false" allowAdd="false" tiles="{/Categories}">
<tiles>
<StandardTile title="{CategoryName}" info="{Description}" icon="sap-icon://action" number="{CategoryID}" numberUnit="Products"></StandardTile>
</tiles>
</TileContainer>
</content>
</Page>
<Page id="page2">
<content>
<ObjectHeader intro="{Description}" introActive="false" titleActive="false" iconActive="false"></ObjectHeader>
<me:TabContainer selectedTab="0" badgeInfo="{CategoryID}" badgeNotes="0" badgeAttachments="0" badgePeople="0">
<me:contentInfo>
<List id="ProductList" busy="true" noDataText="No data" items="{Products}">
<items>
<ObjectListItem counter="0" title="{ProductName}" number="{UnitPrice}" numberUnit="EUR" markFavorite="false" markFlagged="false" showMarkers="false">
<attributes>
<ObjectAttribute text="{QuantityPerUnit}" active="false"></ObjectAttribute>
</attributes>
</ObjectListItem>
</items>
</List>
</me:contentInfo>
</me:TabContainer>
</content>
<customHeader>
<Bar>
<contentLeft>
<Button icon="sap-icon://home"></Button>
</contentLeft>
<contentMiddle>
<Label text="{CategoryName}"></Label>
</contentMiddle>
</Bar>
</customHeader>
<footer>
<Bar translucent="true">
<contentLeft>
<Button icon="sap-icon://action-settings"></Button>
</contentLeft>
</Bar>
</footer>
</Page>
</pages>
</App>
</app>
</Shell>
</core:View>
</script>
<!-- The OData Northwind service was down this morning, so i used the fake service based on
Sinon.JS FakeXHR. To run on the real service instead please comment out the following 2 lines. -->
<script type="text/javascript" src="https://sapui5.netweaver.ondemand.com/resources/sap/ui/thirdparty/sinon.js"></script>
<script type="text/javascriptet" src="https://sapui5.netweaver.ondemand.com/test-resources/sap/ui/core/qunit/ODataModelFakeService.js"></script>
<script type="text/javascript">
var sURI= "http://services.odata.org/Northwind/Northwind.svc/"
if (typeof baseURL === "string") sURI=baseURL; //if mock service use the baseURL
var oModel = new sap.ui.model.odata.ODataModel(sURI, true);
sap.ui.getCore().setModel(oModel);
function _handleTileTap(oEvent) {
sap.ui.getCore().byId("app").to("page2");
sap.ui.getCore().byId("page2").setBindingContext(this.getBindingContext());
};
function _handleHomeTap(oEvent) {
sap.ui.getCore().byId("app").back();
};
function productCount(oValue) {
//return the number of products linked to Category
if (oValue) {
var sPath = this.getBindingContext().getPath() + '/Products';
return this.getModel().bindList(sPath).getContexts().length;
}
return 10;
};
sap.ui.xmlview({viewContent:$('#rootview').text(), type:'XML'}).placeAt('content');
</script>
</head>
<body class="sapUiBody" id="body" role="application">
<div id="content" >
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment