setTabIcon in Service Console is not showing full icon/image.

Recently I came across service console in Salesforce, Where I need to show the tab Icon for a custom visual-force page. There is a standard method setTabIcon() , which we can use to set the tab icon. This method works fine if we have image/icon of exactly 16*16 px. But if our image/icon is larger, than its not shown completely, only some part will be shown.

So the first workaround we will think is to upload a image/icon of 16*16px. For this first we need to resize the all images/icons and then we need to upload them either on salesforce document or somewhere on net where they are publicly accessible. We need to also take care if we are in a minor release of managed package.

Analysis of Problem :

When we use setTabIcon method, it creates the below element in the HTML for showing the tab icon.

What element standard page creates is

Possible Solutions :

1.) If we can play with tab elements using javascript then we can change the span into img tag and that will resolve the issue, but for that we may face DOM exception when accessing parent element from an iframe.

2.) We can do something with setTabStyle(), that I will be using as a workaround here.

Workaround :

So instead of using setTabIcon method we can use setTabStyle method, And using that we can set the image/icon as background accordingly. See the below code snippet of apex class and visual-force page.

Here is the visual-force page code. In document ready method of jQuery (else window.onload if using only javascript) write the below method to set tab icon using setTabStyle.

I hope that will help other developer guys, if they stuck in such kind of problem. Use this workaround if it can help you to save your day.

Leave a Reply

Your email address will not be published. Required fields are marked *