CODEWITHSUNDEEP
sapui5
Martin Shinks
Martin Shinks

Reputation: 115

SAPUI5 IconTabBar/IconTabFilter: Trigger Icon Tab Select

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

Upvotes: 1

Views: 15867

Answers (1)

Haojie
Haojie

Reputation: 5713

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" />

Upvotes: 6

Related Questions