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

Hi All,
In past i have posted one blog regarding google map, using jquery and google map version 2. Now since, google have version 3 so i have upgraded my plugin with latest version and also used more featured jquery plugin i found which is gMap3. You can check it here:
http://gmap3.net/en/

I recommend you first refer my earlier version of google map component here:
http://techsahre.blogspot.in/2011/04/sfgmap-salesforce-google-map-jquery.html

I used this jQuery plugin and implemented my own new version of sfGmap, called sfGmap3


 This component has all features like previous component but have one more new feature called Clusters. You can turn On and Off this feature in my component using attribute "useCluster".

Here is a basic usage of this component:
<c:sfgmap3 addressmodel="{!addressmodel}" height="500px" usecluster="true" uselatlng="false" width="100%" zoom="2" />

I used this plugin and created one demo to show historical places in Rajasthan. Thanks to my collegue Rajendar Rathore, who helped me to make database for these places which included lat, long, pictures etc. Here the link for online demo:

http://labsprojects-developer-edition.ap1.force.com/GMapRajasthanPlaces

You can see each cluster is identified by a image, i used Camel image. Once you zoom in, you will keep go inside the cluster and finally you can find the actual place. You can click on each marker and you can find a info window containing image of that place and name like below.

 

Hi All,
Today I am going to show you how to make dependent picklist on visualforce page with some few lines of code. This is client side dependent list. So it has following benefits:

1) No Action Function or Ajax, means we dont need to call server side script to filter the list of records.
2) Its based on javascript so its fast
3) We can extend the level of dependency



The idea here to use jQuery and one small method to make the dependency. I have got this idea from here.
1) First make your parent select list as below

2) Make your child select list. Make sure to give option a class name like this "child_{parent_record_value}".

 <select id="contactList" size="1">                 
     <apex:repeat value="{!contacts}" var="con">                     
         <option class="child_{!con.accountid}" value="{!con.Id}">{!con.Name}</option>
     </apex:repeat>                 
 </select>

    function prepareList(parent,child,isSubselectOptional){
        $("body").append("<select style='display:none' id='"+parent+child+"'></select>");
        $('#'+parent+child).html($("#"+child+" option"));
        $('#'+child).html("<option> — </option>");
        $('#'+parent).change(function(){
            var parentValue = $('#'+parent).attr('value');
            $('#'+child).html($("#"+parent+child+" .child_"+parentValue).clone());
            if(isSubselectOptional) $('#'+child).prepend("<option> — Select — </option>");
        });
    }

$(function() {        
        prepareList('accountList','contactList', false);
    });

<ul id="menu" class="custom-menu">
        <li><a href="javascript:alert('Clicked Add Notes');"  onclick="addnote();">Add Notes</a></li>
        <li><a href="javascript:alert('Clicked Add Memos');" id="menu_2">Add Memos</a></li>
        <hr style="clear:both;color:#E6E6E6" />        
        <li><a href="javascript:alert('Clicked View Order');" id="menu_4">View Order</a></li>
        <li><a href="javascript:alert('Clicked View Invoice');" id="menu_5">View Invoice</a></li>
    <li><a href="javascript:alert('Clicked View Employee');" id="menu_3">View Employee</a></li>
</ul>

<script>
$(function() {
    $(".emp").bind("contextmenu", function(event) {
            event.preventDefault();
            $("#menu").show();
            $("#menu").css({top: event.pageY + "px", left: event.pageX + "px"});
    });
        
    $(document).bind("click", function(event) {
        $("#menu").hide();
    });
});
</script>

<style>
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#FFF;
    border: 1px solid black;
    padding: 5px;
    list-style: none;
    width:150px;
    display:none;
}
.custom-menu a{
    text-decoration: none;
    padding:5px;
    font-size:13px;
    width:100px;
    display:block;
    color:#000;
}
.custom-menu a:hover{
    text-decoration: none;
    border:1px solid #ccc;
    background-color:greenyellow;
    
}
.custom-menu li{
    margin:5px;
}
</style>