$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: true, vro: true, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

IconTabBar - issue with replacing sap icon with custom image

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

               })

            ],

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    Sep 17, 2014 at 07:56 PM

    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.png

    Regards,

    Kimmo

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      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.