Wednesday, August 24, 2011

Displaying pop-up summaries on hover in visualforce

What if I want to make a summary pop-up window when a user hovers over a link in a visualforce page. This Feature is easy in standard salesforce pages, mostly because it happens automatically. But not in visualforce pages. I have seen most of example for pop-up in salesforce were created using the output panels with some embedded styles. 
Here I'm posting a pop-up example which show the details of a partuclar record on a mouseover using the Hover links similar to those used in standard Salesforce links. 
/*visualforce page*/
<apex:page controller="PopupTest">
<apex:form >
    <apex:repeat value="{!accounts}" var="acc">                            
          <br/>  <a href="/{!acc.Id}" id="{!acc.Id}" onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" onfocus="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" onmouseover="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();">{!acc.Name}</a>
    </apex:repeat>
</apex:form>
</apex:page>

/*Controller*/
public with sharing class PopupTest {  
    public List getAccounts()
    {
        List accounttList = new List();
        accounttList = [Select Id, Name from Account LIMIT 10];
        return accounttList ;
    }

}

Declaration: Directly depending on standard javascript libraries, query params, dom ID values or services (excluding the web services API, of course) is at your own risk. None of which are considered to be supported "APIs" and can change with any major or minor (patch) release without notice. Therefore promote this idea on ideaExchange in salesforce.
https://sites.secure.force.com/success/ideaView?c=09a30000000D9xtAAC&id=08730000000a53fAAA

38 comments:

  1. I tried your code and get the hover window to display, however it only displays the View and Edit buttons. Does not show any of the mini page layout details. Any ideas how to show the entire mini page layout?

    ReplyDelete
  2. Send your VF page code to my email. (chamil.madusanka@gmail.com)

    ReplyDelete
  3. I'm about to give this a try as well. Let you know if it works well..

    ReplyDelete
  4. It works for me. Check this link.
    http://www.4shared.com/photo/5zF09LZt/Popup.html

    It has the screen shot of popup in visualforce.

    ReplyDelete
  5. Works great...funny I tried using this on a VF page that I then put in a dashboard....doh... it popsup nice but is hidden inside that div... any idea how to make it show on top of that component?

    ReplyDelete
  6. Hi,
    I tried your example on example like you did and it's working great.
    But then I tried the same thing on Event and not on Account but then I received "The URL no longer exist...".
    Can someone help me with that.
    Thank you very much

    ReplyDelete
  7. Excellent Work done by chamil madusanka. Very Good !!!.

    ReplyDelete
  8. But your Example gives only two fields in Hover(Account Name,parent name)...what if i need to show more fields in hover panel?

    plz suggest me...

    ReplyDelete
    Replies
    1. The mini page layout controls what fields show in the hover.

      Delete
  9. I tried your code and got the hover Now I want to show a page block table on hover.Example consider page with all opportunities and when the user hovers on any of it the line items of that opportunity are shown with its details in a table.

    ReplyDelete
  10. Then You have to use Jquery for achieve page block table requirement.

    ReplyDelete
  11. Thanks a lot chamil for your suggestion. Will try that out.

    ReplyDelete
  12. Can we do the same to create hover links similar to the one on My Tasks on the Home page?

    ReplyDelete
  13. Thanks for this Chamil. I wrapped this in an apex:component and it works perfectly.

    Keith
    http://force201.wordpress.com/

    ReplyDelete
  14. am getting error is "Error: Unknown property 'String.Id'
    "...whai it means....how can i solve it..please help it, Thanks in Advance

    ReplyDelete
  15. It worked as a ninja kick! thanks!

    ReplyDelete
  16. #1
    I get "Insufficient Privileges" when I try to click on an case ownerId that is a queue. Any suggestions there?
    #2
    How are the fields in the display maintained? Can they be managed?

    ReplyDelete
  17. @Kevin
    It's probably you don't have permission to access case object or case records.

    ReplyDelete
    Replies
    1. @Chamil - no, it works fine for user id's, accounts, and contacts.. just not for user id's that are queues.
      There is a possible alternative url one could use, but during some quick prelim testing I couldn't get it to popup.

      url = '/p/own/Queue/d?id={!id}&m?retURL=/{!id}&isAjaxRequest=1'

      Delete
    2. Also found that my mini layout for assets did not work with this.. interesting. :)

      Delete
  18. I have a series of rows that contain the same name in the owner column. When I hover over, say the 5th item, the anchor on the dialog hits on the the first occurrence.. is there a way to have it anchor to the actual row?

    ReplyDelete
    Replies
    1. This behavior is same in salesforce standard pages as well. Here I'm using that same standard behavior (same javascript functions).

      Delete
  19. We're using top and sidebars in our service console.. This popup, when in a sidebar is underneath the main layout (if we widened the right sidebar, we could see the popup, but this would be undesirable) Might there be a way to have it also over over, say, the layout body, when applicable?

    ReplyDelete
  20. i9t might be because Salesforce queues cannot be referenced directly using https://org.salesforce.com/queueID

    its more like
    https://org.salesforce.com/p/own/Queue/d?id=queueID

    ReplyDelete
  21. This works great! can I remove the view and edit button in the hovers displayed in the visualforce page without removing it in the standard mini page layout?

    ReplyDelete
  22. Hi,

    I used this, and Its working fine for few accounts in pageblocktable.
    But when i try to scroll and try to hover in other account link,the page size is increasing and hover is not showing adjacent to account..

    Please help me in this regard..

    ReplyDelete
  23. I get "URL No Longer Exists". I realized that the function adds a "/m" for a minipage to render. Consider that in the home page Minipages for events are shown. Also I tried another approach, using ActivityHover.getHover, as in the home page is used but don´t know which resources to add because I get some styles and javascript errors. Any help please.

    ReplyDelete
  24. use this on mouseover event of Event div
    onmouseover="LookupHoverDetail.getHover('{!userEvent.eventRec.id}', '/ui/core/activity/EventHoverPage?id={!userEvent.eventRec.id}&isAjaxRequest=1&nocache=1338963113197').show();"

    ReplyDelete
  25. Hi,
    Can you please tell me how to show the hover links in the Force.com Sites

    ReplyDelete
  26. Well done! Thanks for listing this. Basically the only resource that I could find on this topic. I embedded this functionality within a dataTable to give my table hovering capabilities.

    Thanks again!

    ReplyDelete
  27. Is it possible to display a mini page like popup for related lists on standard pages. I am specifically looking to show a popup when the user hovers over a field in detail.

    ReplyDelete
  28. Hi Chamil,

    I have one requirement like , i have a VFPage where event(Activity) is there (Event detail VFpage) there i have a custom link as Top Five Recommendation.(This is one more custom object)
    so i want to mouse over on the custom link to see the list of Top 5 Recommendation and when i mouse out the list(which is one more VFPage) will go off.

    Could u please help me with as i really appreciate what you have posted.

    Thanks in Advance.

    ReplyDelete
  29. HI Chamil,
    I have a vf page on the dashboard and we want the hover over message 'Click to go to report' as it does for the chart components on the dashboard. is it possible to do the same ?
    Thanks in advance

    ReplyDelete
  30. Note: Seems to not work in VisualForce components (like apex:outputLink)

    ReplyDelete
  31. hELLO cHAMIL, i PURCHASED YOUR vf BOOK AND i HAVE TO SAY IT IS JUST GREAT!!!! I HAVEN'T EVEN READ HALF OF IT ANDX ALREADY I HAVE SO MANY USE CASES FOR YOUR TIPS. ALSO THE TIP IN THIS CAME IN SO HANDY!!!!! KEEP IT UP, DEFINITELY BOOKMARKING YOUR BLOGSITE!!!!

    ReplyDelete
  32. . I would like to thanks for sharing excellent information. We provide Successful,user friendly, professional mobile sales force automation to handle all the personnel working in the field whether in sales or service or any other profile.Click Here For more Details sales force management software.

    ReplyDelete