<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<!-- Make sure to bootstrap from a specific UI5 version. DO NOT rely on the latest CDN release. The below `src` is for testing and demos only. -->
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div style="height: 100%;"
data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{ "id": "rootComponent" }'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
},
init () {
UIComponent.prototype.init.apply(this, arguments);
this.setDensity().getRouter().initialize();
},
setDensity ({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
{
"_version": "1.33.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.46.7",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.f": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"js": [
],
"css": [
]
},
"models": {
},
"rootView": {
"viewName": "demo.view.App",
"type": "XML",
"id": "rootView",
"async": true,
"height": "100%"
},
"routing": {
"routes": [{
"pattern": "",
"name": "initial",
"target": "initial",
"layout": "OneColumn"
}, {
"pattern": "master",
"name": "master",
"target": "master",
"layout": "OneColumn"
}, {
"pattern": "masterDetail",
"name": "masterDetail",
"target": [
"master",
"detail"
],
"layout": "TwoColumnsMidExpanded"
}, {
"pattern": "masterDetailDetail",
"name": "masterDetailDetail",
"target": [
"master",
"detail",
"detailDetail"
],
"layout": "ThreeColumnsEndExpanded"
}],
"targets": {
"initial": {
"viewId": "initialView",
"viewName": "Initial",
"viewLevel": 1,
"controlAggregation": "beginColumnPages"
},
"master": {
"viewId": "masterView",
"viewName": "Master",
"viewLevel": 2,
"controlAggregation": "beginColumnPages"
},
"detail": {
"viewId": "detailView",
"viewName": "Detail",
"viewLevel": 3,
"controlAggregation": "midColumnPages"
},
"detailDetail": {
"viewId": "detailDetailView",
"viewName": "DetailDetail",
"viewLevel": 4,
"controlAggregation": "endColumnPages"
}
},
"config": {
"routerClass": "sap.f.routing.Router",
"async": true,
"viewType": "XML",
"viewPath": "demo.view",
"controlId": "fcl",
"homeRoute": "initial"
}
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:f="sap.f"
displayBlock="true"
>
<App>
<f:FlexibleColumnLayout id="fcl"/>
</App>
</mvc:View>
<mvc:View
xmlns="sap.m"
xmlns:f="sap.f"
xmlns:mvc="sap.ui.core.mvc"
controllerName="demo.controller.Initial"
>
<f:DynamicPage>
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="Initial"></Title>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<Button
text="To Master"
icon="sap-icon://navigation-right-arrow"
iconFirst="false"
press=".onBtnPress"
/>
</f:content>
</f:DynamicPage>
</mvc:View>
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.f"
xmlns="sap.m"
controllerName="demo.controller.Master"
>
<f:DynamicPage>
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="Master"></Title>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<Button
text="To Detail"
icon="sap-icon://navigation-right-arrow"
iconFirst="false"
press=".onBtnPress"
/>
</f:content>
</f:DynamicPage>
</mvc:View>
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.f"
xmlns="sap.m"
controllerName="demo.controller.Detail"
>
<f:DynamicPage>
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="Detail"></Title>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<Button
text="To DetaiDetail"
icon="sap-icon://navigation-right-arrow"
iconFirst="false"
press=".onBtnPress"
/>
</f:content>
</f:DynamicPage>
</mvc:View>
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.f"
xmlns="sap.m"
>
<f:DynamicPage>
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="DetailDetail"></Title>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<Text text="Navigate back by pressing the back button or [Alt] + [Left arrow]." />
</f:content>
</f:DynamicPage>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.Initial", {
onInit: function() {
},
onBtnPress: function() {
this.getOwnerComponent().getRouter().navTo("master");
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.Master", {
onInit: function() {
},
onBtnPress: function() {
this.getOwnerComponent().getRouter().navTo("masterDetail");
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.Detail", {
onInit: function() {
},
onBtnPress: function() {
this.getOwnerComponent().getRouter().navTo("masterDetailDetail");
},
});
});