<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>prototype_treetable</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{"treetable": "./"}'
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-libs="sap.m,sap.ui.table">
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
height : "100%",
width : "100%",
name : "treetable"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
{
"_version": "1.8.0",
"sap.app": {
"id": "treetable",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.38.11"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"rootView": {
"viewName": "treetable.view.Main",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "i18n"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "view",
"controlAggregation": "pages",
"controlId": "idAppControl",
"clearControlAggregation": false
},
"routes": [
{
"name": "RouteView1",
"pattern": "RouteView1",
"target": [
"TargetView1"
]
}
],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "View1"
}
}
}
}
}
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("treetable.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
}
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
"use strict";
return Controller.extend("treetable.view.Main", {
onInit: function () {
var oModel = new JSONModel("model/Clothing.json");
this.getView().setModel(oModel);
},
onExpand: function(oEvent)
{
var sum=0;
var length=0;
if (oEvent.getParameter("expand") == true)
{
if (oEvent.mParameters.id == "__xmlview0--panel1")
{
length=this.getView().getModel().oData["girlscatalog"].length
for (var i=0;i<length;i++)
{
sum=sum+this.getView().getModel().oData["girlscatalog"][i].amount
}
var a= new sap.m.Label({ text : "Sum " + sum});
this.getView().byId("tableId").getColumns()[3].setFooter(a);
}
if (oEvent.mParameters.id == "__xmlview0--panel2")
{
length=this.getView().getModel().oData["boyscatalog"].length
for (var i=0;i<length;i++)
{
sum=sum+this.getView().getModel().oData["boyscatalog"][i].amount
}
var a= new sap.m.Label({ text : "Sum " + sum});
this.getView().byId("tableId2").getColumns()[3].setFooter(a);
}
}
}
})
})
<mvc:View controllerName="treetable.view.Main" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m"
xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core" xmlns:dnd="sap.ui.core.dnd" xmlns:f="sap.f" xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true"
height="100%">
<m:Page showHeader="false" enableScrolling="true">
<m:content>
<m:VBox>
<m:List id="listNamedModel"
headerText="Multiple sap.m.tables inside a list" >
<m:CustomListItem>
<m:Panel expandable="true" headerText="Girls table" width="auto" class="sapUiResponsiveMargin" expand="onExpand" id="panel1">
<m:content>
<m:Table id="tableId" inset="false" items="{/girlscatalog}">
<m:columns>
<m:Column width="12em">
<m:ObjectIdentifier text="Name"/>
</m:Column>
<m:Column>
<m:Text text="Size"/>
</m:Column>
<m:Column>
<m:Text text="Currency"/>
</m:Column>
<m:Column>
<m:ObjectNumber number="Price"/>
<!-- <m:footer><m:Text text="sum" /></m:footer> -->
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem>
<m:cells>
<m:ObjectIdentifier title="{name}"/>
<m:Text text="{size}"/>
<m:Text text="{currency}"/>
<m:ObjectNumber
number="{amount}" />
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
</m:content>
</m:Panel>
<m:Panel expandable="true" headerText="Boys table" width="auto" class="sapUiResponsiveMargin" expand="onExpand" id="panel2">
<m:content>
<m:Table id="tableId2" inset="false" items="{/boyscatalog}">
<m:columns>
<m:Column width="12em">
<m:ObjectIdentifier text="Name"/>
</m:Column>
<m:Column>
<m:Text text="Size"/>
</m:Column>
<m:Column>
<m:Text text="Currency"/>
</m:Column>
<m:Column>
<m:ObjectNumber number="Price"/>
<!-- <m:footer><m:Text text="sum" /></m:footer> -->
</m:Column>
</m:columns>
<m:items>
<m:ColumnListItem>
<m:cells>
<m:ObjectIdentifier title="{name}"/>
<m:Text text="{size}"/>
<m:Text text="{currency}"/>
<m:ObjectNumber
number="{amount}" />
</m:cells>
</m:ColumnListItem>
</m:items>
</m:Table>
</m:content>
</m:Panel>
</m:CustomListItem>
</m:List>
</m:VBox>
</m:content>
</m:Page>
</mvc:View>
{"girlscatalog": [
{"name": "Casual Red Dress", "amount": 16.99, "currency": "EUR", "size": "S"},
{"name": "Short Black Dress", "amount": 47.99, "currency": "EUR", "size": "M"},
{"name": "Long Blue Dinner Dress", "amount": 103.99, "currency": "USD", "size": "L"}
],
"boyscatalog": [
{"name": "Black T-shirt", "amount": 9.99, "currency": "USD", "size": "XL"},
{"name": "Polo T-shirt", "amount": 47.99, "currency": "USD", "size": "M"},
{"name": "White Shirt", "amount": 103.99, "currency": "USD", "size": "L"}
]
}