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.
1 2 3 4 |
<script> sforce.console.setTabIcon("../servlet/servlet.FileDownload?file={!tabIconURL}",null); </script> <span class="tabIcon" id="ext-gen123" style="background: url('../servlet/servlet.FileDownload?file=01541000001WkR4AAK') 0px 0px no-repeat transparent; width: 16px; height: 16px;"></span> |
What element standard page creates is
1 |
<img class="tabIcon" src="../servlet/servlet.ImageServer?id=01541000001WkR4AAK" alt=""> |
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.
1 2 3 4 5 6 7 8 |
// Below method will return the id of image/icon public string getTabIconURL(){ String docId = ''; for(Document doc : [SELECT id FROM Document WHERE developerName = 'DEV_NAME_DOCUMENT']){ docId = doc.Id; } return docId; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
<apex:includeScript value="/support/console/39.0/integration.js"/> $(document).ready(function(){ if(sforce.console.isInConsole()) { sforce.console.setTabTitle('New Title'); sforce.console.getEnclosingTabId(setTabIconUsingCSS); } }); function setTabIconUsingCSS(result) { var tabId = result.id; sforce.console.setTabStyle('background: url("../servlet/servlet.FileDownload?file={!tabIconURL}") 20px 7px no-repeat transparent;background-size: 16px;padding-left:25px;', tabId); // You can change padding and position accordingly if you need some adjustment }; |
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.