Redirect to Custom object home page from visualforce page using Apex

Whenever if you want to redirect to the list view page or the home of the custom object or the standard object from a visualforce page try like this along with pagereference,


Schema.DescribeSObjectResult result = Standard/custom_object__c.SObjectType.getDescribe();
PageReference pg = new PageReference('/'+ result.getKeyPrefix()+'/o');
return pg;

Post Chatter Feed with @Mention into a record in Salesforce

Posting a Chatter feed from Apex is a easy task. we can achieve this using the FeedItem Object. But is not so easy to add the chatter post along with @Mention  i.e to Some of the users.

One of the possible examples would be using a HTTP request call as described here.

Another best way is to use ConnectApi. With this the @Mention and posting the feed to a specific record is so easy.

a small part of my coding is,,,



            String userToMention = a.OwnerId;
            String subject = a.id;
         
            ConnectApi.MessageBodyInput messageInput = new ConnectApi.MessageBodyInput();
            messageInput.messageSegments = new List<ConnectApi.MessageSegmentInput>();
         
            ConnectApi.TextSegmentInput textSegment = new ConnectApi.TextSegmentInput();
            textSegment.text = 'Account Created by ';
            messageInput.messageSegments.add(textSegment);
         
            ConnectApi.MentionSegmentInput mentionSegment = new ConnectApi.MentionSegmentInput();
            mentionSegment.id = userToMention;
            messageInput.messageSegments.add(mentionSegment);
         
            ConnectApi.FeedItemInput inputdata = new ConnectApi.FeedItemInput();
            inputdata.body = messageInput;
         
            ConnectApi.FeedItem feedItemRep = ConnectApi.ChatterFeeds.postFeedItem(null, ConnectApi.FeedType.Record, subject, inputdata, null);

Streaming Realtime data in Visualforce pages - Thanks Sieve

I have been looking so hard to show a real time data into visualforce page quite a long. But after seeing the detailed note by Sieve it turned out to be big pain reliever for me thanks once again to Sieve.

Please have a look at this blog post in Streaming Real Time Data in Visualforce Page and his video session 

Organization Chart in Salesforce Using Google's OrgChart

I have been thinking for developing an organization chart in Salesforce.In my developer Organization I have used the Google's OrgChart Api and developed an Organization chart and I am  so glad to share with you all. Please have a look at it and give suggestions.

The working demo is available Here...

 <div id="OrgChart">
               <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      var chart;
      var options;
      function drawChart() {
       
               options ={
                       
                        allowHtml:true,
                        allowCollapse:true,
                        animation: {         
                            duration: 1000,
                            easing: 'in'
                                    },
                       
                     };
        
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
     
        var response = [{!userdata}];        
        data.addRows(response);        
        chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, options);        
        google.visualization.events.addListener(chart, 'onmouseover', barMouseOver);     
        google.visualization.events.addListener(chart, 'onmouseout', barMouseOut); 
      }
      
      function barMouseOver(e) {
           chart.setSelection([e]);   
      }   
      
      function barMouseOut(e) {
           chart.setSelection([{'row': null, 'column': null}]);   
      } 
      
      /*Zooming*/
      
      
      $(document).ready(function(){
      var disablebuttons = false;
      var currZoom = 1;
    
        
       $("#chart_div").draggable(
        {
                        containment: 'parent',
                        drag: function() {
                                console.log('the mouse is being moved in chart');
                                 disablebuttons = true;
                                 $('#resetdiv').css("opacity","1");
                                 $('#zoomindiv').css("opacity","0.4");                 
                                 $('#zoomoutdiv').css("opacity","0.4");
                                 $('#moveupdiv').css("opacity","0.4");
                                 $('#movedowndiv').css("opacity","0.4");
                                 $('#moverightdiv').css("opacity","0.4");
                                 $('#moveleftdiv').css("opacity","0.4");
                          }
        });
      
  
      
      $("#_zi_icon").click(function(){
            
           if(disablebuttons != true)
           { 
           currZoom+=0.1;
            $('#chart_div').css(
            {
                'zoom' : currZoom
            });
             $('#zoomoutdiv').css("opacity","0.7");
             $('#zoomindiv').css("opacity","1");
           }
        });
        
       
     
     $("#_zo_icon").click(function(){
          if(disablebuttons != true)
          { 
            currZoom-=0.1;
            $('#chart_div').css(
            {
               'zoom' : currZoom
            });
            $('#zoomoutdiv').css("opacity","1");
            $('#zoomindiv').css("opacity","0.7");
          }
        }); 
 
     var Margin = 0; 
      $("#_ml_icon").click(function(){
           if(disablebuttons != true)
           {                 
            Margin +=100; 
            $('#chart_div').animate({                
               'right' : Margin+'px' 
            },'slow');
            $('#moveleftdiv').css("opacity","1");
            $('#moverightdiv').css("opacity","0.7");
            }
        });  
      
      $("#_mr_icon").click(function(){

          if(disablebuttons != true)
          {                                   
           Margin -=100;             
           if(Margin >=0)
           {
                $('#chart_div').animate({
                   'right' : Margin+'px' 
                },'slow');
           }else{
               Margin = 100;
           }
           
            $('#moverightdiv').css("opacity","1");
            $('#moveleftdiv').css("opacity","0.7");
           }
        }); 
        
        var topmargin =0;
         $("#_md_icon").click(function(){
          if(disablebuttons != true)
           {                 
              topmargin +=100

                $('#chart_div').animate({
                   'top' : topmargin+'px' 
                },'slow');
           
           $('#movedowndiv').css("opacity","1");
           $('#moveupdiv').css("opacity","0.7");
           }

        }); 
        
        $("#_mu_icon").click(function(){
          if(disablebuttons != true)
           { 
              topmargin -=100
                $('#chart_div').animate({
                   'top' : topmargin+'px' 
                },'slow');           
           $('#moveupdiv').css("opacity","1");
           $('#movedowndiv').css("opacity","0.7");
           }

        }); 
     
     
        $("#_rs_icon").click(function(){
            currZoom=1;
            topmargin =0;
            Margin=0;
            window.location = "http://strickerforce-developer-edition.ap1.force.com/CloudStrikerDemos?show_div=5";
        });
              
        
        $("#zoomindiv").hover(function(){
           if(disablebuttons != true)
           {   
            $('#_zinorm').css("display","none");        
            $('#_ziover').css("display","block");            
           }
        }, function() {
            $('#_zinorm').css("display","block");        
            $('#_ziover').css("display","none");   
           }
        );             
        $("#zoomoutdiv").hover(function(){
           if(disablebuttons != true)
           {
            $('#_zonorm').css("display","none");        
            $('#_zoover').css("display","block");              
           }
        }, function() {
            $('#_zonorm').css("display","block");        
            $('#_zoover').css("display","none");       
           });
        $("#moverightdiv").hover(function(){
           if(disablebuttons != true)
           {
            $('#_mrnorm').css("display","none");        
            $('#_mrover').css("display","block");       
           }
        }, function() {
            $('#_mrnorm').css("display","block");        
            $('#_mrover').css("display","none");       
           });
        $("#moveleftdiv").hover(function(){
           if(disablebuttons != true)
           {
            $('#_mlnorm').css("display","none");        
            $('#_mlover').css("display","block");       
           }
        }, function() {
            $('#_mlnorm').css("display","block");        
            $('#_mlover').css("display","none");       
           });
        $("#moveupdiv").hover(function(){
           if(disablebuttons != true)
           {   
            $('#_munorm').css("display","none");        
            $('#_muover').css("display","block");       
           }        
        }, function() {
            $('#_munorm').css("display","block");        
            $('#_muover').css("display","none");       
           });
         $("#movedowndiv").hover(function(){
           if(disablebuttons != true)
           {  
            $('#_mdnorm').css("display","none");        
            $('#_mdover').css("display","block");       
           }        
        },function() {
            $('#_mdnorm').css("display","block");        
            $('#_mdover').css("display","none");       
           });
        
       $("#resetdiv").hover(function(){
           if(disablebuttons != true)
           { 
                $('#_rsnorm').css("display","none");        
                $('#_rsover').css("display","block");       
           }
        
        }, function() {
           if(disablebuttons != true)
           { 
            $('#_rsnorm').css("display","block");        
            $('#_rsover').css("display","none");       
           }
           });
        
        var datalength = [{!userdata}];
        if(datalength.length>0)
        {       
            $("#navdiv").css("display","block");
        }else{        
            $("#navdiv").css("display","none");
        }

      
      });
      
      
    </script>

  
  <style>
  .hoverClass{
      opacity:1;
  }
  </style>
   <!-- Adding Zoom Panel -->

    <div id="navdiv" style="position: absolute; right:10px; bottom: 10px; width: 97px; height: 64px; z-index: 20;" class="noSel;">      
        <div class="noSel controlsBg" style="position: relative; width: 100%; height: 100%; z-index: 1; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: rgb(0, 0, 0); opacity: 0.55;">
        </div>

        <div id="zoomindiv" style="position: absolute; display: block; left: 4px; top: 11px; width: 20px; height: 20px; z-index: 1;opacity: 0.7; filter: alpha(opacity=70);" class="noSel">
            <div id="_zinorm" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_ziover" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_zi_icon" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -16px -16px no-repeat;">
            </div>
        </div>
       
        <div id="zoomoutdiv" style="position: absolute; display: block; left: 4px; top: 33px; width: 20px; height: 20px; z-index: 2; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
            <div id="_zonorm" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_zoover" style="position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_zo_icon" style="position: absolute; left: 1px; top: 1px; width: 18px; height: 18px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -66px -16px no-repeat;">
            </div>
        </div>
        <div id="moverightdiv" style="position: absolute; display: block; left: 37px; top: 23px; width: 18px; height: 18px; z-index: 3; opacity: 0.4;filter: alpha(opacity=70);" class="noSel"> 
            <div id="_mrnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_mrover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_mr_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -117px -17px no-repeat;">
            </div>
        </div>
        <div id="moveleftdiv" style="position: absolute; display: block; left: 75px; top: 23px; width: 18px; height: 18px; z-index: 4; opacity: 0.4;filter: alpha(opacity=70);" class="noSel"> 
            <div id="_mlnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_mlover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_ml_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -167px -17px no-repeat;">  
            </div>
        </div>
        <div id="moveupdiv" style="position: absolute; display: block; left: 56px; top: 42px; width: 18px; height: 18px; z-index: 5; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
            <div id="_munorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_muover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; display: none; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_mu_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -217px -17px no-repeat;">
            </div>
        </div>
        <div id="movedowndiv" style="position: absolute; display: block; left: 56px; top: 4px; width: 18px; height: 18px; z-index: 6; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
            <div id="_mdnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_mdover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; display: none; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_md_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -267px -17px no-repeat;">
            </div>
        </div>
        <div id="resetdiv" style="position: absolute; display: block; left: 56px; top: 23px; width: 18px; height: 18px; z-index: 7; opacity: 0.4;filter: alpha(opacity=70);" class="noSel">
            <div id="_rsnorm" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: block; background-position: initial initial; background-repeat: initial initial;">  
            </div>
            <div id="_rsover" style="position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; background-color: rgb(255, 255, 255); border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; display: none; background-position: initial initial; background-repeat: initial initial;">
            </div>
            <div id="_rs_icon" style="position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: transparent url({!URLFOR($Resource.GoogleApiResource, 'GAResources/icons.png')}) -317px -17px no-repeat;">
            </div>
        </div>
</div>
    <!-- End of Zoom Panel-->
    
    
     <br/>
          <div id='chart_div' style="font-size:18px;padding:30px;background-color: white;">    
          </div> 
           
       </div>

How to add Content related list in visualforce page

If you need to add content related list in you visualforce page try the following...

<apex:relatedlist list ='content__r'>

Filter for pageblocktable in salesforce

Often when we create a pageblock table in a visualforce page we wish to filter the records if it is having many records.To filter such a pageblock table we normally use one picklist field or selectlist field and filter the records by passing the selected values to the controller to query the records.

But we can also do this simply by writing a jQuery function.please follow below steps

1)Create a picklist/select list first

2)Write a jQuery function so as to compare the selected value from the picklist and the table values.

3)This can be done by defining a id for the column header in the pageblocktable and in the jQuery funtion traverse through the child elements. Compare both values.

4)If the values are same display the Parent i.e. The current ro else hide.by defining the css display property.
Thus pageblock table can be filtered out very quickly.

JQuery Function:

 $("[id$='AccountFilter']").change(function() {
    var selval=$(this).val();
    $("[id$='AccNameHeader']").each(function(){
          var t= $(this).children('span').text();
           if(selval != 'All'){
             if(selval == t){
                    $(this).parent().css('display','');
             }else{
                    $(this).parent().css('display','none');
             }
           }else{
                $(this).parent().css('display','');
           }                    
        }); 
    });

Visualforce page:

<apex:pageBlock title="JQuery Filter For PageblockTable" id="AccountNamewithFilter">
     <apex:form >
        <apex:selectList value="{!AccPick}" size="1" id="AccountFilter">
             <apex:selectOptions value="{!AccNames}"/>                        
        </apex:selectList>
     </apex:form>
     <apex:pageBlockTable value="{!AccountList}" var="a">
        <apex:column headerValue="Account Name" id="AccNameHeader">
             <apex:outputText styleClass="AccountNameClass" value="{!a.Name}" id="AccName"/>         </apex:column>
        <apex:column headerValue="Phone">
             <apex:outputText styleClass="AccountNameClass" value="{!a.Phone}"/>            
        </apex:column>        
     </apex:pageBlockTable>
</apex:pageBlock>

please check out the live action in my Demo page here.
Pros:

1. Filtered very quickly.
2. No need to Query the DB each time.

Cons:

1. Real time data wont be returned.for this we can keep a refresh button to refresh the page.

Getting Salesforce URL using Javascript in Visualforce Page

This will return the salesforce base URL which can be used visualforce pages

function salesforcebaseURL()
{

    var d = $gc(location).attr('href');

    pathArray = d.split( '/' );

    var Protocol = pathArray[0]; 

    var host = pathArray[2];

    return Protocol+'//'+host;

}

if we need to call any other visualforce page append with the "apex/page name"

var URL = salesforceURL()+'apex/samplepage';