<!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://sdk.openui5.org/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-async="true"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
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 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: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
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.40.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "App Title",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"myDataSource": {
"type": "JSON",
"uri": "model/demoData.json"
}
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.77.1",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"css": []
},
"models": {
"": {
"dataSource": "myDataSource"
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true
},
"routing": {
"routes": {
"home": {
"pattern": "",
"target": "home"
}
},
"targets": {
"home": {
"id": "homeView",
"name": "Home",
"level": 1
},
"notFound": {
"id": "notFoundView",
"name": "Home",
"transition": "slide",
"level": 98
}
},
"config": {
"routerClass": "sap.m.routing.Router",
"async": true,
"type": "View",
"viewType": "XML",
"path": "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"
height="100%"
>
<App id="rootApp" autoFocus="false">
<pages>
<!-- will be added by Router -->
</pages>
</App>
</mvc:View>
<mvc:View controllerName="demo.controller.Home"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%">
<Page id="homePage"
title="Displaying nested JSON"
class="sapUiResponsiveContentPadding">
<Panel headerText="Using Tree" class="sapUiNoContentPadding">
<Tree items="{
path: '/',
factory: '.createTreeItem',
templateShareable: false,
key: 'ID'
}"/>
</Panel>
<Panel headerText="Using Two List Controls"
class="sapUiNoContentPadding sapUiLargeMarginTop">
<List headerText="Select Department"
mode="SingleSelectMaster"
selectionChange=".onSelectionChange"
items="{
path: '/Departments',
templateShareable: false,
key: 'ID'
}">
<StandardListItem title="{Name}" />
</List>
<Table id="employeeList"
noDataText="Select a department first"
headerText="Employees in that selected Department"
items="{
path: 'Employees',
templateShareable: false,
key: 'ID'
}">
<columns>
<Column>
<Text text="Last name"/>
</Column>
</columns>
<ColumnListItem>
<Input value="{LastName}" valueLiveUpdate="true" />
</ColumnListItem>
</Table>
</Panel>
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/StandardTreeItem",
"sap/m/CustomTreeItem",
"sap/m/Input",
], function(Controller, StandardTreeItem, CustomTreeItem, Input) {
"use strict";
return Controller.extend("demo.controller.Home", {
onInit: function() {
this._createTreeItem = {
"Departments": this.createStandardTreeItem.bind(this),
"Employees": this.createEmployeeItem.bind(this),
};
},
createTreeItem: function(id, context) {
const type = context.getPath().split("/").reverse()[1];
return this._createTreeItem[type](id, context);
},
createStandardTreeItem: function(id, context) {
return new StandardTreeItem(id, {
title: context.getProperty("Name"),
});
},
createEmployeeItem: function(id, context) {
return new CustomTreeItem(id, {
content: new Input(id + "-input", {
value: "{LastName}",
valueLiveUpdate: true,
}),
});
},
onSelectionChange: function(event) {
const path = event.getParameter("listItem").getBindingContext().getPath();
this.byId("employeeList").bindObject(path);
},
onExit: function() {
this._createTreeItem = null;
},
});
});
{
"Departments": [
{
"ID": "1",
"Name": "Oil and Gas",
"Employees": [
{
"ID": "12345",
"LastName": "Tom"
},
{
"ID": "678",
"LastName": "Jerry"
}
]
},
{
"ID": "2",
"Name": "Gasoline",
"Employees": [
{
"ID": "21",
"LastName": "Donald"
},
{
"ID": "22",
"LastName": "Duck"
}
]
}
]
}