SAPUI5 IconTabBar/IconTabFilter: Trigger Icon Tab Select - sapui5

Question

I have an XML view which I am using to display an IconTabBar. On the user selecting one of these "IconTab's" I would like to trigger a method in the controller js file.
I have the following code for one of the IconTab definitions.
<IconTabFilter text="Data" icon="sap-icon://documents" press="onData">
<content press="onData" id="data">
<cmn:Tree nodes="{/aRoot}">
<cmn:TreeNode text="{#name} TagNameHere?"></cmn:TreeNode>
</cmn:Tree>
</content>
</IconTabFilter>
I was assuming the press="onData" would allow me to trigger a method on the controller file. It does not.
Does anyone know if this can be done and if so how?
Thanks
Martin

Answer 1

You can use the select(oControlEvent) event of the parent IconTabBar by switching the logic according to the key value of IconTabFilter
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:VerticalLayout>
<IconTabBar select="onSelectChanged">
<items>
<IconTabFilter key="1" text="Test1">
<Text text="Test1 " />
</IconTabFilter>
<IconTabFilter key="2" text="Test2">
<Text text="Test2 " />
</IconTabFilter>
</items>
</IconTabBar>
</l:VerticalLayout>
</mvc:View>
</script>
<script>
sap.ui.controller("test.controller", {
onSelectChanged: function(oEvent) {
var key =oEvent.getParameters().key;
if(key=='1') {
alert("Click Test1");
}
else if(key == '2')
{
alert("Click Test2")
};
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
</script>
<boy class="sapUiBody" id="content" />