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.

Datetime on Visualforce Page

Whenever we are working with datetime on visualforce page, we may face some issue either with its formatting or its value not coming correctly. So basically the formatting of date depends on the locale of the user, and second thing which is its value depends on the timezone.

In the salesforce database each datetime value is stored in GMT, and when this is shown on the detail page it is adjusted with the current user’s timezone or offset. But sometime we developer create custom visualforce pages to fulfil different different business requirements. Here I come up with the all possible use cases and solution of showing Datetime on visualforce page with their pros and cons.

Datetime on Visualforce Page
  • Datetime Format (Showing DD/MM/YYYY, showing time only, showing year only, showing week day etc).
  • Datetime Value (Either in GMT or in current user timezone).
Method/Approach Taken Is Format Customizable ? Is Current Timezone ?
apex:outputText – direct datetime value. NO NO
apex:outputText – formatted using apex:param. YES NO
apex:outputText – with one space in value(Trick). NO YES
apex:outputText – (Offset is added on page). YES(But in controller) YES
apex:outputText – Showing a String containing formatted Datetime from controller. YES YES
apex:outputText – (Offset is added from controller). YES YES
apex:outputField – (No Customization can be done with format). NO YES
Datetime on visualforce page
Datetime on Visualforce page
Source Code

Visualforce page Code

Apex controller

Conclusion

For Different format see Datetime format Patterns.

So I have shared my finding on the datetime on visualforce page, I hope that this will help developers. Please comment if you need further explanation or have any feedback.

Apex:actionRegion not working with Apex:actionFunction

One of my friend was using apex:inputFile on a Visual force page, and he also needs to reRender some information on the same page. If we need to use both together, we have to use apex:actionRegion in order to isolate apex:inputFile (because inputFile doesn’t support reRender and throws error).

He was also doing the same thing but the state of information was not maintained, See the below psuedo code to get an idea of code

You will think that the above code will work fine, But It won’t!

Issue In the Above Code

Let’s say you are using a list of contact in editable mode where user can add or remove rows and update the information of contact.
User has added one row and filled the information, Now he clicked on some button to add one more row. To add row, function “myFun” (placed in actionRegion 1) is invoked. Here the information for first row of contact will go away on reRender of myInfo panel.

Solution/ Workaround

As of now, after doing some research and hit and trial approach  I have found one workaround or you can say solution. Instead of putting apex:actionFuntion and your part which needs to reRendered put them in a single actionRegion. So the updated code (working) will be as follows.

Reason/Explanation

For now there is no 100% correct explanation behind this behavior. May be actionFunction sends only information of apex:actionRegion in which it is placed to the server. For example if actionFunction is in actionRegion A, then it will send information from actionRegion A to the server. May Be my assumption is wrong. So for now no solid reason, but we have solution. So for now just solve this issue and move faster to meet your deadlines.

Disable Inline Editing on Apex:EnhancedList through jquery script

Sometimes we don’t want to keep inline editing on the apex:enhancedList, and unfortunately there is no standard way to disable inline editing. But there is always a solution for , not a standard way but we can say workaround to fulfill the requirement.

Here is the jQuery code snippet which can be put in a javascript function and then we can call this function on the “oncomplete” attribute of apex:enhancedList. Its obvious that you must include jQuery files for the execution of the below code snippet.