<!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>
<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-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-resourceroots='{"demo": "./"}'
data-sap-ui-xx-componentpreload="off"
data-sap-ui-xx-waitfortheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div data-sap-ui-component style="height: 100%;"
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",
], function(UIComponent, Device) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.setDensity().getRouter().initialize();
},
setDensity: function({
styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
targetElement = document.body,
} = {}) {
targetElement.classList.add(styleClass);
return this;
},
});
});
{
"_version": "1.16.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"myDataSource": {
"type": "JSON",
"uri": "localData/demoData.json"
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize_hcw",
"sap_belize_hcb",
"sap_belize",
"sap_belize_plus",
"sap_fiori_3"
]
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.58.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"js": [],
"css": []
},
"models": {
"": {
"dataSource": "myDataSource",
"preload": true
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true
},
"routing": {
"routes": [
{
"name": "home",
"pattern": "",
"target": "home"
}
],
"targets": {
"home": {
"viewId": "homeView",
"viewName": "Home",
"transition": "fade",
"viewLevel": 1
},
"notFound": {
"viewName": "Home",
"transition": "slide",
"viewLevel": 98
}
},
"config": {
"async": true,
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
}
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
<Shell>
<App id="rootApp" autoFocus="false">
<pages>
<!-- will be added by Router -->
</pages>
</App>
</Shell>
</mvc:View>
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="demo.controller.Home"
>
<Page id="homePage"
title="Hierarchical Form Binding in Panel"
class="sapUiResponsiveContentPadding"
content="{
path: '/Pages',
templateShareable: false
}"
>
<Panel
expandable="true"
expanded="true"
headerText="{name}"
xmlns:form="sap.ui.layout.form"
>
<form:Form id="myFormTemplate" editable="true" formContainers="{
path: 'widgetList',
templateShareable: true
}">
<form:layout>
<form:ColumnLayout />
</form:layout>
<form:FormContainer id="myFormContainerTemplate" title="{name}" formElements="{
path: 'infoList',
templateShareable: true
}">
<form:FormElement label="{label}">
<Input placeholder="{labelFor}" />
</form:FormElement>
</form:FormContainer>
</form:Form>
</Panel>
</Page>
</mvc:View>
{
"Pages": [
{
"name": "Page (Analysis)",
"widgetList": [
{
"name": "Widget 1",
"infoList": [
{
"label": "Title",
"labelFor": "Title for chart 1"
},
{
"label": "Description",
"labelFor": "Description for chart 1"
}
]
},
{
"name": "Widget 2",
"infoList": [
{
"label": "Title",
"labelFor": "Title for chart 2"
},
{
"label": "Description",
"labelFor": "Description for chart 2"
},
{
"label": "Header 2",
"labelFor": "Header for chart 2"
}
]
}
]
},
{
"name": "Page (Sales Manager Overview)",
"widgetList": [
{
"name": "Widget 3",
"infoList": [
{
"label": "Title",
"labelFor": "Title for chart 1"
},
{
"label": "Description",
"labelFor": "Description for chart 1"
}
]
},
{
"name": "Widget 4",
"infoList": [
{
"label": "Title",
"labelFor": "Title for chart 2"
},
{
"label": "Description",
"labelFor": "Description for chart 2"
},
{
"label": "Header 2",
"labelFor": "Header for chart 2"
}
]
}
]
}
]
}
sap.ui.define([
"sap/ui/core/mvc/Controller",
], Controller => {
"use strict";
return Controller.extend("demo.controller.Home", {
onInit: function() {
// ...
},
onExit: function() {/* Destroy the shared templates (ListBindings w/ templateShareable: true) when they're no longer in use: */
this.byId("myFormTemplate").destroy();
this.byId("myFormContainerTemplate").destroy(); /*
* With `templateShareable: false`, the templates are
* automatically destroyed by the framework but
* unshared templates might consume more memory or drag the performance.
*
* For more information about the `templateShareable`, see:
* - Documentation: https://openui5.hana.ondemand.com/topic/3a4a9e562988456c9be0ef883ae7da50
* - API reference: https://github.com/SAP/openui5/blob/f40bc4763b43dd51ec43d8af707d56ca59714296/src/sap.ui.core/src/sap/ui/base/ManagedObject.js#L3699-L3707
*/
},
});
});