Skip to Content
avatar image
Former Member

IconTabBar Select event not getting fired

Dear experts,

I was trying to implement a simple sap.m.IconTabBar app using an XML view. But the problem is that when I use custom images instead of the icons, the "select" event is not fired. If I replace the images with plain text or icons, the select event works fine. Am I doing something wrong here or there is some other way to handle this? Below is my code.

View

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m" controllerName="test_icontabbar.app" xmlns:html="http://www.w3.org/1999/xhtml">
  <Page title="Title">
  <content>
  <IconTabBar id="idIconTabBar" select="handleIconTabBarSelect">
  <items>
  <IconTabFilter id="tab1" icon="Icons/1.png"
  text="First" keys="1" />
  <IconTabSeparator />
  <IconTabFilter id="tab2" icon="Icons/2.png"
  text="Second" key="2" />
  <IconTabFilter id="tab3" icon="Icons/3.png"  enabled="false"
  text="Third" key="3" />
  <IconTabFilter id="tab4" icon="Icons/4.png"  enabled="false"
  text="Fourth" key="4" />
  </items>
  </IconTabBar>
  </content>
  </Page>
</core:View>

Controller

sap.ui.controller("test_icontabbar.app", {

  handleIconTabBarSelect: function (oEvent) {
   
console.log(oEvent.getParameter("key"));
   
  var selectedTab = oEvent.getParameter("key");
  selectedTab = parseInt(selectedTab);

  switch (selectedTab) {
  case 1:
  sap.ui.getCore().byId("idapp1--tab2").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab3").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab4").setEnabled(false);
  break;
  case 2:
  sap.ui.getCore().byId("idapp1--tab1").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab3").setEnabled(true);
  sap.ui.getCore().byId("idapp1--tab4").setEnabled(false);
  break;
  case 3:
  sap.ui.getCore().byId("idapp1--tab1").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab2").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab4").setEnabled(true);
  break;
  case 4:
  sap.ui.getCore().byId("idapp1--tab1").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab2").setEnabled(false);
  sap.ui.getCore().byId("idapp1--tab3").setEnabled(false);
  break;
  }
  },
});

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    avatar image
    Former Member
    Jan 09, 2015 at 05:46 AM

    Resolved it myself. Seems like some issue with the older SAPUI5 libraries. The above code started working after I changed the script source to src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" .

    Add comment
    10|10000 characters needed characters exceeded