Filtering on Nested Aggregation Binding - sapui5

Question

I want to be able to apply a filter to a nested aggregation binding, but it doesn't seem to work. Here is the XML:
<l:Grid id="test" defaultSpan="L6 M6 S6" content="{path : 'test>/', templateShareable:false}">
<l:content>
<VBox width="100%">
<HBox height="100px" alignItems="Center" justifyContent="Start">
<VBox alignItems="Center" width="25%">
<core:Icon src="{test>icon}" width="100%" />
<Text text="{test>text}" width="100%"/>
</VBox>
<VBox id="test" height="80px" items="{path: 'test>data/', templateShareable:false}">
<Link text="{parts: [{ path: 'test>key'},
{ path: 'test>value' }],
formatter : 'dostuff'}"/>
</VBox>
</HBox>
</VBox>
</l:content>
</l:Grid>
And my JSON data is as follows:
{
"results": [{
"text": "object1",
"icon": "icon1",
"data": [{
"value1": "foo",
"value2": "bar"
}, {
"value1": "john",
"value2": "smith"
}]
},
{
"text": "object2",
"icon": "icon2",
"data": [{
"value1": "adam",
"value2": "bobson"
}, {
"value1": "john",
"value2": "smith"
}, {
"value1": "whatever",
"value2": "work please"
}]
}
]
}
I want to be able to filter on test>/results/[n]/data/[n]/[value1 + value2] and have the gird filtered at that level. Whatever I try, it only filters on the Grid content because I can't seem to get the binding for the in VBox "test".
Cheers,
James

Answer 1

Are you trying to filter the content dynamically from JS? Or statically from the XML directly? I assume that you want to do it from JS.
Your VBox with id test is inside a Grid whose content aggregation you have binded. This means that the whole VBox inside the grid (including the test VBox) is treated as a template for the content aggregation of the grid (i.e. with our JSON, you will end up having two copies of the VBox).
Using this.byId("test") will clearly not work, as it will return a control which is part of the Grid's content aggregation template. So be able to filter the inner VBoxes (because there will be several of them depending on the contents of the model), you have to iterate through the contents of the grid and apply the filtering to each of the target VBoxes. Something along the lines of:
this.byId("grid").getContent().forEach(function(oVbox) {
// need to get the HBox and the second VBox from it.
oVbox.getItems()[0].getItems()[1].getBinding("items").filter(...);
});
Also, both the Grid and the VBox have the same IDs, so your code will fail because of that as well. Generally, you don't need to define an ID for an aggregation template or a child.