<!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://sapui5.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>
// Code goes here
/* Styles go here */
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.otuniyi.sample",
"type": "application",
"i18n": "i18n.properties",
"title": "",
"description": "",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"testModel": {
"uri": "data.json",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "sap.otuniyi.sample/data.json",
"annotations": []
}
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_bluecrystal"]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "sap.otuniyi.sample.App",
"type": "XML",
"async": true,
"id": "rootControl"
},
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.otuniyi.sample.i18n"
}
},
"testModel": {
"type": "sap.ui.model.json.JSONModel",
"dataSource": "testModel"
}
},
"resources": {
"css": [{
"uri": "style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewPath": "sap.otuniyi.sample",
"controlId": "rootControl",
"viewType": "XML",
"async": true,
"bypassed": {
"target": ["master"]
}
},
"routes": [{
"name": "master",
"pattern": "",
"target": ["master"]
}, {
"name": "detail",
"pattern": "masterList/:detailID:",
"target": ["master", "detail"]
}],
"targets": {
"master": {
"viewName": "Master",
"controlAggregation": "masterPages",
"viewLevel": "0"
},
"detail": {
"viewName": "Detail",
"controlAggregation": "detailPages",
"viewLevel": "1"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" controllerName="sap.otuniyi.sample.Detail"
xmlns:semantic="sap.m.semantic" xmlns:core="sap.ui.core" xmlns:m="sap.m" xmlns:c="sap.suite.ui.microchart">
<semantic:DetailPage id="page" navButtonPress="onNavBack">
<semantic:content>
<HBox>
<Button text="Press ME!" press="openDialog"></Button>
</HBox>
</semantic:content>
</semantic:DetailPage>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/Device", "sap/suite/ui/microchart/RadialMicroChart", "sap/m/Dialog", "sap/m/Button",
"sap/viz/ui5/controls/VizFrame"
],
function(Controller, Device, RadialMicroChart, Dialog, Button, VizFrame) {
"use strict";
return Controller.extend("sap.otuniyi.sample", {
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
this._detailID = oEvent.getParameter("arguments").detailID;
this.getView().bindElement("/masterList/" + this._detailID);
},
openDialog: function() {
var that = this;
var oModel = sap.ui.getCore().getModel("testModel");
var dataset = new sap.viz.ui5.data.FlattenedDataset({
measures: [{
name: 'value',
value: '{value}',
}],
data: {
path: "/masterList",
}
});
var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
"uid": "valueAxis",
"type": "Measure",
"values": ["value"]
});
if (!this.draggableDialog) {
this.draggableDialog = new Dialog({
title: "Charts",
type: "Message",
contentWidth: "900px",
contentHeight: "700px",
resizable: true,
content: [
new RadialMicroChart({
percentage: 75,
total: 100,
size: "Responsive",
valueColor: "Critical"
}),
new VizFrame("barChart", {
uiConfig: {
applicationSet: "fiori"
},
vizType: "column",
width: "100%",
height: "446px",
vizProperties: {
legend: {
visible: true
},
title: {
visible: true,
text: "Bar Chart"
},
valueAxis: {
title: {
visible: true,
text: "%"
}
},
categoryAxis: {
title: {
visible: false,
text: "Bar Chart"
}
}
}
}).setDataset(dataset).setModel(oModel).addFeed(oFeedValueAxis)
],
beginButton: new Button({
text: "Close",
press: function() {
this.draggableDialog.close();
}.bind(this)
})
});
this.getView().addDependent(this.draggableDialog);
}
this.draggableDialog.open();
},
});
}, true);
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/Device"], function(Controller, Device) {
"use strict";
return Controller.extend("sap.otuniyi.sample.Master", {
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("master").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
if (!Device.system.phone) {
this.getOwnerComponent().getRouter()
.navTo("detail", {
detailID: 0
}, true);
}
},
onSelectionChange: function(oEvent) {
var sdetailID = oEvent.getSource().getSelectedItem().getBindingContext().getProperty("detailID");
this.getOwnerComponent().getRouter()
.navTo("detail", {
detailID: sdetailID
}, !Device.system.phone);
}
});
}, true);
<mvc:View controllerName="sap.otuniyi.sample.Master" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:semantic="sap.m.semantic">
<semantic:MasterPage id="page" title="Contents">
<semantic:content>
<List id="list" items="{/masterList}" mode="SingleSelectMaster" noDataText="No List Found" growing="true" growingScrollToLoad="true"
selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
<items>
<StandardListItem title="{titleName}" type="Active" press="onSelectionChange" icon="{icon}" description="{description}"/>
</items>
</List>
</semantic:content>
</semantic:MasterPage>
</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);
{
"masterList": [{
"detailID": 0,
"titleName": "Master 1",
"description": "001",
"icon": "sap-icon://alert",
"value" : 40,
"titlesProperties": [{
"subDetailID": 0,
"imageURL": "https://blogs.sap.com/wp-content/uploads/2018/02/file.png",
"caption": "Caption for Image 0"
}, {
"subDetailID": 1,
"imageURL": "http://www.eweek.com/imagesvr_ez/b2bezp/2017/05/1088SAPApps.jpg?alias=article_hero",
"caption": "Caption for Image 1"
}, {
"subDetailID": 2,
"imageURL": "https://cdns.tblsft.com/sites/default/files/sap_0.png",
"caption": "Caption for Image 2"
}, {
"subDetailID": 3,
"imageURL": "https://blogs.sap.com/wp-content/uploads/2018/02/file.png",
"caption": "Caption for Image 3"
}]
}, {
"detailID": 1,
"titleName": "Master 2",
"description": "002",
"icon": "sap-icon://alert",
"value" : 40,
"titlesProperties": [{
"subDetailID": 0,
"imageURL": "https://zdnet1.cbsistatic.com/hub/i/r/2017/04/26/eafa2cae-0958-4fb9-b3ef-4d163a131fab/resize/370xauto/de25fbce832bfb55481e02f411d88be3/sap-cloud-logo.png",
"caption": "Caption for Image 4"
}]
}, {
"detailID": 2,
"titleName": "Master 3",
"description": "003",
"icon": "sap-icon://alert",
"value" : 40,
"titlesProperties": [{
"subDetailID": 0,
"imageURL": "https://en.wikipedia.org/wiki/SAP_SE#/media/File:SAP_2011_logo.svg",
"caption": "Caption for Image 5"
}, {
"subDetailID": 1,
"imageURL": "http://www.eweek.com/imagesvr_ez/b2bezp/2017/05/1088SAPApps.jpg?alias=article_hero",
"caption": "Caption for Image 6"
}]
}]
}
<View xmlns="sap.m">
<SplitApp id="rootControl"></SplitApp>
</View>