Predictive search on a field in standard page with home page components

I had a requirement to add a predictive search (auto complete) on a field in standard page. The exact requirement was like whenever the user types some characters on a field then automatically a suggestion drop down should come and that should list all the values currently in the system for that field.

The requirement can be easily fulfilled by home page component, little java script and jQuery.

I am not going to discuss how can we add home page component to a standard page, all the documentation is available from sales force.

I have used the following code in my home page component

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script>

<script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>

<script>

var url = document.URL;

if(url.indexOf('006')!=-1)    

{        

        var sid = document.cookie.match(' sid=([^;]*)')[1];        

        sforce.debug.trace=true;        

        sforce.connection.sessionId = sid;        

        var stages = sforce.apex.execute("opportunitySearch", "getFieldValues", {});        

        var staheArray = stages.toString().split("+");        

        $ = jQuery.noConflict();       

        $(function()             

        {                

            var availableTags = staheArray;               

            $( "#00N90000006ikQJ" ).autocomplete({source: availableTags});           

        }        );    

}

</script>

I have created the below apex class for the above code to work.

global class opportunitySearch{ 
   webService static String getFieldValues()
   {
       String pickValues='';
       for( Schema.PicklistEntry f : Opportunity.StageName.getDescribe().getPicklistValues())
       {
           pickValues = pickValues +f.getValue()+'+';
       }         
       return pickValues ;
   }
}

EXPLANATION

Since sales force allows us to execute java script code from home page component we can use JavaScript or jQuery to implement some functionality in a standard page through home page component. Here I need to fetch the data from back end and populated it on the page I should be able to execute some query/apex code to do that. In the above example I fetch all the opportunity stage values from a pick list and populated on another field on the standard page.

To execute the apex class from java script I cannot use the java scrip remoting since it is not supported in the home page component. So I used sales force ajax toolkit to establish the connection between home page component and apex class.

The below lines of code is required for the Ajax tool kit to work.

<script src="/soap/ajax/15.0/connection.js" type="text/javascript"/>

<script src="/soap/ajax/15.0/apex.js" type="text/javascript"/>

 

Then I took the sales force session id from cookie through java script , the below line of code does that

document.cookie.match(' sid=([^;]*)')[1];

As we got the seesion id we need to set it on the sales force connection. Once we set the session id for sfoce we can execute the apex method from a class using the below piece of code

sforce.apex.execute(“Give apex class name here”,”Give apex methos here “,{“give apex method parameters here”});

The apex class should be declared as global and we need to have a webservice method also be there in the class for java script to execute. In the apex class I have got all the picklist values and I made it as a string separated with + sign. So the method returns all the picklist values separated with + symbol.

So in the java script I filter each status value with reference to the + symbol and I moved them into an array (stageArray).

From now I am using the jQuery to do the autocomplete job through autocomplete () function on a particular element by using the element id.