cancel
Showing results for 
Search instead for 
Did you mean: 

IconTabBar - issue with replacing sap icon with custom image

Former Member
0 Kudos

Hi,

I'm using IconTabBar and for IconTabFilter, I'm replacing the icon : "sap-icon://hint" with my custom image. Custom Image is displaying in place of icon But, clicking on that, tab select functionality is not working.

But it is working with sap-icon://hint or with text also. Any one please suggest me how to replace the sap-icon with custom image and the tab select functionality.

Below is my code.

this.tabBar = new sap.m.IconTabBar({

        expanded : "{device>/isNoPhone}",

            items: [

              new sap.m.IconTabFilter({

            key: "MyHistory",

              icon: "img/history-gray.png",

              text : "My History",

                            }),

              new sap.m.IconTabFilter({

            key: "MyWatchList",

            icon: "img/watch-list.png",

            text : "My Watch List",

               })

            ],

Accepted Solutions (0)

Answers (1)

Answers (1)

former_member189945
Contributor
0 Kudos

Hi Hima,

Tab selection should be working with a custom image. See below jsbin for example.

http://jsbin.com/boqawoxeyilo/2/edit

Can you replace icon with below url to see if that works?

https://sapui5.netweaver.ondemand.com/sdk/resources/sap/ui/core/mimes/logo/icotxt_white_220x72_blue....

Regards,

Kimmo

Former Member
0 Kudos

Hi Kimmo,

Thanks for your reply. Custom image is displaying in place of sap-icon. But on click of tab, nothing was happening. But, on clicking on sap-icon, the tab functionality is working.

If I selected, Sap-icon, tab control is working. But on click of "My Watch List" image or "My History" it is not working. But the tab select functionality is working with removal of custom images.

Please suggest. I'm using SAP version 1.18

Former Member
0 Kudos

Hi HIma,

The code should work. Can you paste your code here?

Regards,

Nikhil

Former Member
0 Kudos

Hi Nikhil,


Here is my code


View Code:

this.tabBar = new sap.m.IconTabBar({

        expanded : "{device>/isNoPhone}",

            items: [

              new sap.m.IconTabFilter({

                 key: "MyHistory",

                 icon : "img/watch.png",

                 text : "My History",

                 }),

              new sap.m.IconTabFilter({

                 key: "MyWatchList",

                 icon: "https://sapui5.netweaver.ondemand.com/sdk/resources/sap/ui/core/mimes/logo/icotxt_white_220x72_blue....",

                 text : "My Watch List",                                                                  

              }),

              new sap.m.IconTabFilter({

                  key: "MyActions",

                 icon: "sap-icon://hint",

                 text : "My Actions",                    

              }),

            ],

           

            select:function(oEvent){

            jQuery('#loader').show();

              setTimeout(oController.tabSelect(oEvent), 1000);           

            }

           

          });

Controller Code:

tabSelect:function(evt)

    {

    var tabShow = evt.getParameter("key");

    if(tabShow == "MyHistory")

    {

    jQuery('#loader').show();

    this.historyList(evt);

    }

    else if(tabShow == "MyWatchList")

    {

    jQuery('#loader').show();

    this.watchList(evt);

    }

    else if(tabShow == "MyActions")

    {

    jQuery('#loader').show();

    this.OpenActions(evt);

    }

    else

    return evt;

  

  

  

    },

former_member189945
Contributor
0 Kudos

Hi Hima,

Does it show any error, for example, in Chrome developer tools?

Btw, just to understand your use case better: What are you trying to do with handling the select and tab change yourself. UI5 should handle those automatically.

Regards,

Kimmo

Former Member
0 Kudos

Hi Kimmo,

It is not showing any error. I tried to debug also. But no luck.

But If removed the custom image, the selection is working.

Former Member
0 Kudos

On click of tac, different functions will be called from controller. So I used this tabselect functionality.

Former Member
0 Kudos

Hi HIma,

Try removing your controller code and put the following code in view

this.page = new sap.m.Page({

       title : 'tile',

       showNavButton : jQuery.device.is.phone,

                     navButtonTap : function(){},

       content : [ this.tabBar,

                     ]

   });

  var oapp = new sap.m.App();

  oapp.addPage(this.page);

  oapp.placeAt("content");

and check the output. I believe you are having issue in the controller code.

Regards,

Nikhil

former_member189945
Contributor
0 Kudos

What if you replace:

setTimeout(oController.tabSelect(oEvent), 1000);

with inline function

setTimeout(function() { oController.tabSelect(oEvent); }, 1000);

This is needed to pass the params.

Regards,

Kimmo

Former Member
0 Kudos

Firstly pardon me, I dindt see your requirement for tab select functionality. This is working for me:

view


sap.ui.jsview("test_tab2.Main", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf test_tab2.Main

  */

  getControllerName : function() {

  return "test_tab2.Main";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf test_tab2.Main

  */

  createContent : function(oController) {

  this.tabBar = new sap.m.IconTabBar({

         expanded : "{device>/isNoPhone}",

             items: [

               new sap.m.IconTabFilter({

                  key: "MyHistory",

                  icon : "images/001.jpg",

                  text : "My History",

                  }),

 

               new sap.m.IconTabFilter({

                  key: "MyWatchList",

                  icon: "https://sapui5.netweaver.ondemand.com/sdk/resources/sap/ui/core/mimes/logo/icotxt_white_220x72_blue....",

                  text : "My Watch List",                                                                

               }),

 

               new sap.m.IconTabFilter({

                   key: "MyActions",

                  icon: "sap-icon://hint",

                  text : "My Actions",                  

               }),

             ],

          

             select:function(oEvent){

             jQuery('#loader').show();

               setTimeout(oController.tabSelect(oEvent), 1000);         

             }

          

           });

   this.page = new sap.m.Page({

       title : 'tile',    

       content : [  this.tabBar,

                   ]

   });

  var oapp = new sap.m.App();

  oapp.addPage(this.page);

  oapp.placeAt("content");

  }

});

Controller:


tabSelect:function(evt)

    {

    var tabShow = evt.getParameter("key");

    if(tabShow == "MyHistory")

    {

    jQuery('#loader').show();

    alert("my histroy");

    this.historyList(evt);

    }

    else if(tabShow == "MyWatchList")

    {

    jQuery('#loader').show();

    alert("my watch");

    this.watchList(evt);

    }

    else if(tabShow == "MyActions")

    {

    jQuery('#loader').show();

    alert("my action");

    this.OpenActions(evt);

    }

    else

    return evt;

    },

See the output.

Regards,

Nikhil

Former Member
0 Kudos

Hi Nikhil,

Thanks for reply.

Only for the sap-icon, tab selection passing to controller.

Or without Icons, Even only with Text also, it is passing to controller.

But if I enable the custom image, then key is not passing to controller.

This is where I stuck.

Former Member
0 Kudos

Hi Hima,

It is working for me for any image. Try changing your browser. Delete cookies. Reset browser settings. Check logs. What is the UI5 version? If its not the latest, try upgrading.

Regards,

Nikhil

Former Member
0 Kudos

Working.

former_member209728
Active Participant
0 Kudos

Hi Hima,

Can you please share your solution ? Which function or event are you talking about ?

Thanks

Former Member
0 Kudos

Hi,

I faced this issue with old version of SAP UI5 i.e., 1.18.

After upgrade to new version, the issue is resolved and able to replace the sap-icon with custom icon for IconTabBar.