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 menu-resources.zip file available on this url
     http://www.aslambari.com/downloads/menu-resources.zip
  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>

Changes:
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:
   "/resource/1400648652000/dupedetector__menu_resources/menu-resources/jquery.min.js"
   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 :)


Thanks
Aslam Bari
http://www.aslambari.com

12 comments:

Unknown said...

Cool! Looking forward to implement.

Pravesh Rana said...

Nice. Thanks for sharing

Unknown said...

Excellent! Thanks

Raghvendra Rathore said...

Great job sir...
I implemented it today. Now enhancing according to my need.
Thanks to share...

viswa said...

Great Sharing for us,Thanks for sharing information. I really liked it.

TheAnonPirate said...

This is awesome! thanks man! Following your blog!

CodeFrux Technologies said...

This is Awesome Blog !

Salsforce Course Materials

Unknown said...

This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something like this.
Signature:
i like play games friv4 online and play games 2 girls Download baixar facebook movel

Unknown said...

menu-resources.zip is not found in the given url

kanchana said...

Truely a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic. keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
Java training in chennai

Abaxsoft Solution said...

Very informative article and thanks for information...Really enjoy while reading

subuvenni said...

i really like this blog.And i got more information's from this blog.thanks for sharing!!!!
Digital Marketing Company in Chennai

Post a Comment