I am new to SAPUI5 and currently, I am trying to understand the meaning and the usage of bindingContext and context.
Let's assume that I have the following files:
Years.json
{
"FiscalYear": [
{
"Jahr": 2017,
"JahrID": 2017,
"AEIst": 400,
"AEPlan": 200,
"UEIst": 300,
"UEPlan": 200,
"EBITIst": 300,
"EBITPlan": 400,
"Umsatzkategorie": [
{
"Umsatzkategorie": "ABC",
"AE": 2
},
{
"Umsatzkategorie": "DEF",
"AE": 3
},
{
"Umsatzkategorie": "GHI",
"AE": 6
},
{
"Umsatzkategorie": "XYZ",
"AE": 8
}
],
"FiscalYearPeriod": [
{
"Monat": "JAN.2017",
"AEIst": 14,
"UEIst": 11
},
{
"Monat": "FEB.2017",
"AEIst": 12,
"UEIst": 32
},
{
"Monat": "MAR.2017",
"AEIst": 15,
"UEIst": 10
},
{
"Monat": "APR.2017",
"AEIst": 18,
"UEIst": 9
},
{
"Monat": "MAI.2017",
"AEIst": 19,
"UEIst": 5
},
{
"Monat": "JUN.2017",
"AEIst": 20,
"UEIst": 12
},
{
"Monat": "JUL.2017",
"AEIst": 13,
"UEIst": 14
},
{
"Monat": "AUG.2017",
"AEIst": 10,
"UEIst": 13
},
{
"Monat": "SEP.2017",
"AEIst": 7,
"UEIst": 15
},
{
"Monat": "OKT.2017",
"AEIst": 9,
"UEIst": 18
},
{
"Monat": "NOV.2017",
"AEIst": 8,
"UEIst": 7
},
{
"Monat": "DEZ.2017",
"AEIst": 34,
"UEIst": 20
}
]
},
{
"Jahr": 2018,
"JahrID": 2018,
"AEIst": 400,
"AEPlan": 20022222222222,
"UEIst": 300,
"UEPlan": 200,
"EBITIst": 300,
"EBITPlan": 400,
"Umsatzkategorie": [
{
"Umsatzkategorie": "ABC",
"AE": 2
},
{
"Umsatzkategorie": "DEF",
"AE": 3
},
{
"Umsatzkategorie": "GHI",
"AE": 6
},
{
"Umsatzkategorie": "XYZ",
"AE": 8
}
],
"FiscalYearPeriod": [
{
"Monat": "JAN.2017",
"AEIst": 14,
"UEIst": 11
},
{
"Monat": "FEB.2017",
"AEIst": 12,
"UEIst": 32
},
{
"Monat": "MAR.2017",
"AEIst": 15,
"UEIst": 10
},
{
"Monat": "APR.2017",
"AEIst": 18,
"UEIst": 9
},
{
"Monat": "MAI.2017",
"AEIst": 19,
"UEIst": 5
},
{
"Monat": "JUN.2017",
"AEIst": 20,
"UEIst": 12
},
{
"Monat": "JUL.2017",
"AEIst": 13,
"UEIst": 14
},
{
"Monat": "AUG.2017",
"AEIst": 10,
"UEIst": 13
},
{
"Monat": "SEP.2017",
"AEIst": 7,
"UEIst": 15
},
{
"Monat": "OKT.2017",
"AEIst": 9,
"UEIst": 18
},
{
"Monat": "NOV.2017",
"AEIst": 8,
"UEIst": 7
},
{
"Monat": "DEZ.2017",
"AEIst": 34,
"UEIst": 20
}
]
}
]
}
View (just the part I want to change):
<Select id="theList" forceSelection="false" change="onListSelect" selectedKey="{years>/FiscalYear/1/JahrID}" width="auto" items="{
path: 'years>/FiscalYear',
sorter: { path: 'Jahr' }
}" class="sapUiResponsiveMargin">
<core:Item key="{years>Jahr}" text="{years>JahrID}" />
</Select>
//... some more stuff
<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" frameType="TwoByOne" id="idtile" header="Auftragseingang Gesamt" subheader="Aktuell in EUR" press="press">
<TileContent footer="YTD">
<content>
<NumericContent scale="M" indicator="Down" value="{years>/FiscalYear/1/AEPlan}" valueColor="Error" />
</content>
</TileContent>
</GenericTile>
Controller:
onListSelect: function(oEvent) {
var selectedItem = oEvent.getSource().getSelectedItem();
var context = selectedItem.getBindingContext("years"); //trying to get the binding path
console.log(context);
var oTile = this.getView().byId("idtile");
//pseudocode:
//get relevant tile (oTile in this case) and change the binding path of the numeric content value to something else
oTile.setBindingContext(new sap.ui.model.Context("years", "/years>/FiscalYear/1/AEPlan"));
},
What I want to achieve is the following case:
Based on the selected value of sap.m.Select I want to adjust the binding path for the mentioned tile.
For example: If its binded to the node 2017 and the users selects 2018 in the select control, the value of the numeric content of the tile should be adjusted to the relevant one from the node 2018.
https://flpportal-p1942326342trial.dispatcher.hanatrial.ondemand.com/sites/digidash#dashboard3602-Display This is an example of what I want to achieve.
Actually I am struggling with the understanding of the bindingContext and bindingPath.
I would really appreciate it, if someone could provide me an example for the mentioned case. Hopefully this will provide a better understanding of that case.
You need to do ElementBinding, here the documentation
I made a snippet selecting a year from a table row here: bind values of specific array of a json model to a control in sapui5
you just need to do the same using the Select 'change' event
Didn't try it, but I would change this:
onListSelect: function(oEvent) {
var selectedItem = oEvent.getParameter('selectedItem');
var sPath = selectedItem.getBindingContext("years").getPath(); //This path will include the index of your selected year (e.g. /FiscalYear/1/)
this.getView().byId("idtile").bindElement("years>" + sPath);
}
On the other hand, if you want to do the element binding at the very begining without doing a selection yet and binding the hardcoded path '/FiscalYear/1/'. Just choose an event in the lifecicle and do elemenet binding with the hardcoded path. For example using onInit
onInit: function() {
this.getView().byId("idtile").bindElement("years>/FiscalYear/1/");
}
And make the binding relative in the XML, so it completes the path binded by element binding:
<NumericContent scale="M" indicator="Down" value="{years>AEPlan}" valueColor="Error" />