I am quite new to SAPUI5 and currently I am struggling with the json model.
Lets assume that I have the following .json file:
{
"Region": [{
"Region": "MEA",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}, {
"Region": "Amercias",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}]
}
I already defined the model in the manifest.json to access it globally (if I have understood that way correctly).
What I want to achieve is the following thing: I want to build the sum Region for the value MEA for the year 2016 by building the sum of the key "AE" for all the months. This sum should be finally displayed on a tile. Iam able to do that in flat hierarchy, but since I am using 2 nodes here (2016, 2017) and the parent node region, I am not quite sure on how to navigate the specific year.
I read something in the documentation and on this platform here about the getproperty part, is that maybe a way to solve my problem? Would be great if anyone has an example for that, so I can try to achieve it on my own.
Even though you have your global model, you can create models on run time and bind them to certain views.
Anyway to do the sum, just navigate trough your levels and do the sum at the end with a formatter function.
Here an example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
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-xx-bindingSyntax='complex'></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="my.own.controller"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns="sap.m">
<VBox items="{/Region}">
<Panel headerText="Region: {Region}" content="{Year}">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{Year} Profit" press="press">
<TileContent unit="Unit">
<NumericContent value="{path: 'Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
</TileContent>
</GenericTile>
</Panel>
</VBox>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
mySumFormatter: function(aMonat){
var sum = 0;
for(var i=0; i<aMonat.length; i++){
console.log("ssss")
sum += aMonat[i].AE
}
return sum;
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
"Region": [{
"Region": "MEA",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}, {
"Region": "Amercias",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap'
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-xx-bindingSyntax='complex'></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="my.own.controller"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns="sap.m">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{/Region/0/Region} {/Region/0/Year/0/Year} Profit">
<TileContent unit="Unit">
<NumericContent value="{path: '/Region/0/Year/0/Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
</TileContent>
</GenericTile>
<l:Grid spanLayout="XL6 L6 M6 S6">
<VBox items="{/Region}">
<List headerText="{Region}" items="{Year}" mode="SingleSelectMaster" selectionChange="onItemSelected">
<StandardListItem title="{Year}"></StandardListItem>
</List>
</VBox>
<Panel id="myPanelForSelection" headerText="Selected Region/Year">
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="{Year} Profit">
<TileContent unit="Unit">
<NumericContent value="{path: 'Monat', formatter: '.mySumFormatter'}" valueColor="Critical" indicator="Up" />
</TileContent>
</GenericTile>
</Panel>
</l:Grid>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onItemSelected: function(oEvent){
var sPath = oEvent.getParameter("listItem").getBindingContext().getPath();
this.getView().byId("myPanelForSelection").bindElement(sPath)
},
mySumFormatter: function(aMonat){
if(aMonat){
var sum = 0;
for(var i=0; i<aMonat.length; i++){
console.log("ssss")
sum += aMonat[i].AE
}
return sum;
}
}
});
// instantiate the View
var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
// create some dummy JSON data
var data = {
"Region": [{
"Region": "MEA",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}, {
"Region": "Amercias",
"Year": [{
"Year": 2016,
"Monat": [{
"Monat": "Januar",
"AE": 5,
"UE": 1
}, {
"Monat": "Februar",
"AE": 10,
"UE": 2
}, {
"Monat": "März",
"AE": 15,
"UE": 3
}]
}, {
"Year": 2017,
"Monat": [{
"Monat": "Januar",
"AE": 20,
"UE": 4
}, {
"Monat": "Februar",
"AE": 25,
"UE": 5
}, {
"Monat": "März",
"AE": 30,
"UE": 6
}]
}]
}]
};
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>