<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
<script src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-bindingSyntax='complex'
data-sap-ui-resourceroots='{"sap.otuniyi.sample": "./"}'
data-sap-ui-frameOptions="trusted">
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
showLogout: false,
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.otuniyi.sample",
height: "100%",
width: "100%",
settings: {
id: "sample"
},
propagateModel: true
})
}).placeAt("content");
});
</script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<App id="rootControl"/>
</mvc:View>
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"],
function(UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.otuniyi.sample.Component", {
metadata: {
manifest: "json"
},
init: function() {
var oModel = new JSONModel("data.json");
this.setModel(oModel);
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
this.getRouter().attachTitleChanged(function(oEvent) {
document.title = oEvent.getParameter("title");
});
}
});
}, true);
{
"TileCollection": [
{
"homeId": 0,
"homeIcon": "sap-icon://waiver",
"homeType": "Create",
"homeNumber": 160,
"homeNumberUnit": "£",
"homeTitle": "Home-Waiver",
"homeInfo": "Lorem ipsum",
"homeInfoState": "Success",
"home0Data": [
{
"home0Id": 0,
"home0Icon": "sap-icon://loan",
"home0Type": "Create",
"home0Number": "0-1",
"home0NumberUnit": "T",
"home0Title": "Home-LevelOne-Loan",
"home0Info": "Lorem ipsum",
"home0InfoState": "Success",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo-Visit SAP Homepage 01",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo-Visit SAP Homepage 02",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo-Visit SAP Homepage 03",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}]
},{
"home0Id": 1,
"home0Icon": "sap-icon://money-bills",
"home0Type": "Create",
"home0Number": "1-1",
"home0NumberUnit": "T",
"home0Title": "Home-LevelOne-Money",
"home0Info": "Lorem ipsum",
"home0InfoState": "Success",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo-Visit SAP Homepage 11",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo-Visit SAP Homepage 12",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo-Visit SAP Homepage 13",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}]
}
]
}, {
"homeId": 1,
"homeIcon": "sap-icon://wallet",
"homeType": "Create",
"homeNumber": 200,
"homeNumberUnit": "£",
"homeTitle": "Home-Wallet",
"homeInfo": "Lorem ipsum",
"homeInfoState": "Warning",
"home0Data": [{
"home0Id": 0,
"home0Icon": "sap-icon://receipt",
"home0Type": "Create",
"home0Number": "0-1",
"home0NumberUnit": "T",
"home0Title": "Home-LevelOne-Receipt",
"home0Info": "Lorem ipsum",
"home0InfoState": "Warning",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo-Visit SAP Homepage 11",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo-Visit SAP Homepage 12",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo-Visit SAP Homepage 13",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}]
}]
}, {
"homeId": 2,
"homeIcon": "sap-icon://credit-card",
"homeType": "Create",
"homeNumber": 350,
"homeNumberUnit": "£",
"homeTitle": "Home-Credit-Card",
"homeInfo": "Lorem ipsum",
"homeInfoState": "Error",
"home0Data": [{
"home0Id": 0,
"home0Icon": "sap-icon://account",
"home0Type": "Create",
"home0Number": "3-1",
"home0NumberUnit": "£",
"home0Title": "Home-LevelOne-Account",
"home0Info": "Lorem ipsum",
"home0InfoState": "Error",
"home0Properties": [{
"propId": 0,
"text0": "Home-LevelTwo Visit SAP Homepage 31",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 1,
"text0": "Home-LevelTwo Visit SAP Homepage 32",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}, {
"propId": 2,
"text0": "Home-LevelTwo Visit SAP Homepage 33",
"url": "http://www.sap.com",
"icon":"sap-icon://menu"
}]
}]
}]
}
sap.ui.define([
"./BaseController"
], function(BaseController) {
"use strict";
return BaseController.extend("sap.otuniyi.sample.LevelOne", {
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("levelOne").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
this._levelOneID = oEvent.getParameter("arguments").levelOneID;
this.getView().bindElement("/TileCollection/" + this._levelOneID);
},
onSelectionChange: function(oEvent) {
var sLevelTwoID = oEvent.getSource().getBindingContext().getProperty("home0Id");
// console.log(sLevelTwoID);
this.getOwnerComponent().getRouter().navTo("levelTwo", {
levelOneID: this._levelOneID,
levelTwoID: sLevelTwoID
});
}
});
});
<mvc:View controllerName="sap.otuniyi.sample.LevelOne" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Page id="levelOnePage" title="{i18n>levelOneTitle}" showNavButton="true" navButtonPress="onNavBack" class="sapUiResponsiveContentPadding">
<content>
<TileContainer id="container1" tiles="{home0Data}">
<StandardTile icon="{home0Icon}" type="{home0Type}" number="{home0Id}" numberUnit="{home0NumberUnit}" title="{home0Title}"
info="{home0Info}" infoState="{home0InfoState}" press="onSelectionChange"/>
</TileContainer>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="Button3" press=""/>
<Button text="Button4" press=""/>
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</mvc:View>
appTitle = Page Title
appDescription = Sample App
detailTitle=Detail Page
levelOneTitle=Title for Level one
levelTwoTitle=Title for Level Two
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.otuniyi.sample",
"type": "application",
"i18n": "i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "CA-UI5-FST",
"dataSources": {
"view": {
"uri": "data.json",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "sap.otuniyi.sample/data.json",
"annotations": []
}
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.otuniyi.sample.App",
"type": "XML",
"async": true,
"id": "rootControl"
},
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {},
"sap.ui.core": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.otuniyi.sample.i18n"
}
},
"view": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "None",
"useBatch": false
},
"dataSource": "view"
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.otuniyi.sample",
"controlId": "rootControl",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": ["home", "notFound"]
},
"async": true
},
"routes": [{
"pattern": "",
"name": "apphome",
"target": "home"
}, {
"name": "levelOne",
"pattern": "TileCollection/:levelOneID:",
"target": ["home", "levelOne"]
}, {
"name": "levelTwo",
"pattern": "TileCollection/:levelOneID:/home0Properties/:levelTwoID:",
"target": ["levelOne", "levelTwo"]
}],
"targets": {
"home": {
"viewId": "home",
"viewName": "Homepage",
"viewLevel": 0
},
"notFound": {
"viewId": "notFound",
"viewName": "NotFound",
"transition": "show"
},
"levelOne": {
"viewName": "LevelOne",
"viewLevel": "1"
},
"levelTwo": {
"viewName": "LevelTwo",
"viewLevel": "2"
}
}
}
}
}
<mvc:View height="100%" controllerName="sap.otuniyi.sample.Homepage" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page showHeader="false" enableScrolling="false" title="HOMEPAGEEE">
<content>
<TileContainer id="container" tileDelete="handleTileDelete" tiles="{/TileCollection}">
<StandardTile icon="{homeIcon}" type="{homeType}" number="{homeNumber}" numberUnit="{homeNumberUnit}" title="{homeTitle}" info="{homeInfo}"
infoState="{homeInfoState}" press="onSelectionChange"/>
</TileContainer>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="Button1" press=""/>
<Button text="Button2" press=""/>
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</mvc:View>
sap.ui.define([
"./BaseController"
], function(BaseController) {
"use strict";
return BaseController.extend("sap.otuniyi.sample.LevelTwo", {
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("levelTwo").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
var sLevelOneID = oEvent.getParameter("arguments").levelOneID;
var sLevelTwoID = oEvent.getParameter("arguments").levelTwoID;
this.getView().bindElement("/TileCollection/" + sLevelOneID + "/home0Data/" + sLevelTwoID);
},
onSelectionChange: function(oEvent) {
window.open(oEvent.getSource().getSelectedItem().getBindingContext().getProperty("url"), "_blank");
}
});
});
<mvc:View controllerName="sap.otuniyi.sample.LevelTwo" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Page id="levelTwoPage" title="{i18n>levelTwoTitle}" showNavButton="true" navButtonPress="onNavBack" class="sapUiResponsiveContentPadding">
<content>
<OverflowToolbar>
<Title text="Title Bar"/>
<ToolbarSpacer/>
<SearchField width="12rem"/>
<SegmentedButton>
<buttons>
<Button icon="sap-icon://table-view"/>
<Button icon="sap-icon://bar-chart"/>
</buttons>
</SegmentedButton>
<Button icon="sap-icon://group-2" type="Transparent"/>
<Button icon="sap-icon://action-settings" type="Transparent"/>
</OverflowToolbar>
<List id="list" items="{home0Properties}" selectionChange="onSelectionChange" mode="SingleSelectMaster">
<items>
<ObjectListItem title="{text0}" description="{url}" icon="{icon}" selectionChange="onSelectionChange" type="Navigation"/>
</items>
</List>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="Button5" press=""/>
<Button text="Button6" press=""/>
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</mvc:View>
sap.ui.define(["./BaseController"], function(BaseController) {
"use strict";
return BaseController.extend("sap.otuniyi.sample.Homepage", {
onDisplayNotFound: function(oEvent) {
// display the "notFound" target without changing the hash
this.getRouter().getTargets().display("notFound", {
fromTarget: "home"
});
},
onSelectionChange: function(oEvent) {
this.getOwnerComponent().getRouter().navTo("levelOne", {
levelOneID: oEvent.getSource().getBindingContext().getProperty("homeId")
});
}
});
}, true);
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function (Controller, History) {
"use strict";
return Controller.extend("sap.otuniyi.sample.BaseController", {
getRouter : function () {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onNavBack: function (oEvent) {
var oHistory, sPreviousHash;
oHistory = History.getInstance();
sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("home", {}, true);
}
}
});
});