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:

<!-- 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>

   "/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