bind values of specific array of a json model to a control in sapui5

Question

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.

Rafael López Martínez · Accepted Answer · 2018-03-03 12:12:32Z

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:

With Aggregation binding

<!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>

EDIT: Model Node without aggregation binding + Element binding on click

<!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>

this works like charm, thank you so much for the example Rafael! wish you a good day and many thanks!
make sure you mark it as the correct aswer clicking the 'green tic' on the left side of my answer. It is important for other users who may have your same problem. It is expleined here: meta.stackexchange.com/questions/5234/…
one thing is not really clear: what kind of navigation to just access a specific year of one region? like MEA in 2016?
Then use the index you want to display when digging into the arrays. Something like '/Region/0/Year/0/Monat'. Check out my edits in the answer
exactly the example i was looking for ! you are really a great rafael, that one helps me a lot! thank you again!

Collectives™ on Stack Overflow

bind values of specific array of a json model to a control in sapui5

1 Answer 1

With Aggregation binding

EDIT: Model Node without aggregation binding + Element binding on click

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

With Aggregation binding

EDIT: Model Node without aggregation binding + Element binding on click

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related