Salesforce Context Menu for list views

Tuesday, May 20, 2014 by Aslam - The Alexendra
Hi All,
This is a quick demo for a utility component. I designed it for standard salesforce list views. Its a kind of context menu which can be opened on clicking of a IMAGE formula field. You can show your useful menu options in this context menu. Each option can have the record id automatically by JS, so that your target page or screen can have proper processing based on passed record id.

How to configure:
  1. Make a IMAGE formula field as given in screeshot above
  2. Upload the file available on this url
  3. Make one home page component (HTML type and Narrow side)
  4. Put below code in that component
<!-- include files --> <script src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/jquery.min.js"></script> <link rel="stylesheet" href="/resource/1400648652000/dupedetector__menu_resources/menu-resources/menu.css"> <!-- HTML Menu --> <div class="dropdown-menu" id="dropdown-menu"> <a href="/003?rlid=RelatedContactList&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/application_view_detail.png" /> Sync Contacts </a> <a href="/006?rlid=RelatedOpportunityList&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/calendar-disabled.png"> Export Orders</a> <a href="/005?rlid=RelatedCaseList&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/zip.png"/> View Cases </a> <div class="break"></div> <a href="/_ui/core/chatter/ui/ChatterPage" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/connect_light_small_short.gif"/> Sync Feeds</a> <a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/phone.png"/> Calls History </a> <a href="/002?parent_id=001900000054UZ7&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/3668432.png"/> Box.Net Documents </a> <a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/feature_gmail_icon.gif"/> Google Mails </a> <div class="break"></div> <a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK"> <img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/delete.png"/> Delete Logs </a> </div> <!-- JS Part --> <script> function init_sfdc_menu(){ $('.x-grid3-col-00N9000000A4pIp').click(function(event){ event.stopPropagation(); var id = $(this).attr("id").split("_")[0]; $('.dropdown-menu').css( {position:"absolute", top:event.pageY-100, left: event.pageX-30}); $('.dropdown-menu').find('a').each(function(){ var oldhref = $(this).attr("href"); oldhref = oldhref.substring(0,oldhref.lastIndexOf('=')+1); $(this).attr("href", oldhref + id); }); $('.dropdown-menu').show(); }); $(document).click(function(){ $('.dropdown-menu').hide(); }); } $(document).ready(function(e) { $('#bodyCell').bind('DOMNodeInserted DOMNodeRemoved', function(event) { setTimeout(init_sfdc_menu(),500); }); }); </script>

I have designed this component for just showing how to use this utility, so i have not make it very robust or optimize and have left few hard coded ids few places, but any developer who needs to make it work proper, needs to do following changes in files:
  •    Open the menu.css and change hard coded id "00N9000000A4pIp" to your image formula field id on list view
  •    Change the same id available on component code
  •    Once you uploaded your static resource, you will get one timestamp for that which you can see in my component code few places, you need to change it with yours as well and make sure you provide proper url, for example my url for jquery.js is this:
   You need to change this url with yours.
Here is a screencast you can see how it works.

Email if for any issue, happy coding :)

Aslam Bari