Skip to content

Instantly share code, notes, and snippets.

@grahamrobbo

grahamrobbo/singlepagedemo

Created January 12, 2015 04:26
Show Gist options
  • Save grahamrobbo/141361b3d1ca7f70667d to your computer and use it in GitHub Desktop.
Save grahamrobbo/141361b3d1ca7f70667d to your computer and use it in GitHub Desktop.
Download ZIP
Single page demo with event handler
Raw
singlepagedemo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Single Page XML View</title>
<script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.ap1.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- XML-based view definition -->
<script id="view1" type="sapui5/xmlview">
<mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<Page title="My View">
<IconTabBar>
<items>
<IconTabFilter text="Employees" icon="sap-icon://group">
<content>
<List noDataText="No data" items="{/Employees}">
<items>
<StandardListItem counter="0" title="{FirstName} {LastName}" description="{Title}" info="{HomePhone}" type="Active" press="handleEmployeePress"></StandardListItem>
</items>
</List>
</content>
</IconTabFilter>
<IconTabFilter text="Products" icon="sap-icon://product">
<content>
<List noDataText="No data" items="{/Products}">
<items>
<DisplayListItem counter="0" label="{ProductName}" value="{UnitsInStock}"></DisplayListItem>
</items>
</List>
</content>
</IconTabFilter>
</items>
</IconTabBar>
</Page>
</App>
</mvc:View>
</script>
<script>
jQuery.sap.require("sap.m.MessageToast");
// Controller definition
sap.ui.controller("local.controller", {
handleEmployeePress: function(oEvent) {
sap.m.MessageToast.show('Employee ' + oEvent.getSource().getTitle() + ' pressed', {
of: oEvent.getSource()
});
}
});
// Instantiate the View, assign a model and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.setModel(sap.ui.model.odata.ODataModel("http://services.odata.org/Northwind/Northwind.svc/", true));
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" 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