Wednesday 21 August 2013

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.
 

77 comments:

  1. Thanks for sharing this.

    A couple of quick comments:
    1. On line #9 in your homepage component, you are tying yourself to a specific org by hardcoding the id value to "006" ---- if(url.indexOf('006')!=-1). You should consider getting the id value dynamically otherwise this may not work for all your orgs)

    2. You could perhaps look into a SOSL query to get the list of possible values for a given field as you type using a controller.

    Just sharing experiences here.

    ReplyDelete
  2. Thanks for your comments....

    for the first point it wont get change since account id always start with 001 and contact 003, opportunity 006 like it goes. So no impact on any particular instance

    ReplyDelete
  3. Thanks for sharing this information. This really help for any salesforce developer when make the pages.

    ReplyDelete
  4. The information you have deliver here is really useful to make my knowledge good. Thanks for your heavenly post. It is truly supportive for us and I have accumulated some essential data from this blog.
    Salesforce training in Chennai | Salesforce training

    ReplyDelete
  5. Hi, I wish to be a regular contributor of your blog. I have read your blog. Your information is really useful for us. I did Software Testing Training at Fita training and placement academy which offer best Software Testing Course in Chennai with years of experienced professionals. This is really useful for me to make a bright career.

    ReplyDelete
  6. Your blog is really nice and informative. Thanks for sharing this post. Keep posting..

    Regards..
    Salesforce Developer Training in Chennai




    ReplyDelete
  7. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog. Recently I did Software Testing Course in Chennai at a reputed training institutes.

    ReplyDelete
  8. Java is one of the popular technologies with improved job opportunity for hopeful professionals. Java Training in Chennai helps you to study this technology in details.If you are looking for best Java Training Institutes in Chennai reach Fita academy.


    ReplyDelete
  9. There are lots of information about latest technology and how to get trained in them, like Hadoop Training Chennai have spread around the web, but this is a unique one according to me. The strategy you have updated here will make me to get trained in future technologies(Hadoop Training in Chennai). By the way you are running a great blog. Thanks for sharing this. FITA chennai reviews

    ReplyDelete

  10. Web designing Training Institute in noida - with 100% placement support - web trackker is the is best training institute for web designing, web development in delhi. In you are looking web designing Training in noida, web designing Training Institute in Noida, web designing training in delhi, web design training institute in Ghaziabad, web designing training institute, web designing training center in noida, web designing course contents, web designing industrial training institute in delhi, web designing training coaching institute, best training institute for web designing training, top ten training institute, web designing training courses and content then Webtrackker is the best option for you.

    ReplyDelete
  11. SAS Training Institute in noida
    Best SAS training in Noida- with 100% placement support - Fee Is 15000 Rs - web trackker is the best institute for industrial training institute for SAS in Delhi, Ghaziabad, if you are interested in SAS industrial training then join our specialized training programs now. SAS Training In Noida, SAS industrial training in noida, SAS training institute in noida, SAS Training In ghaziabad, SAS Training Institute in noida, SAS coaching institute in noida, SAS training institute in Ghaziabad.

    ReplyDelete
  12. 1800-640-8917 Norton antivirus technical support phone number, Norton customer support toll free number, NORTON antivirus customer Support number, 1800-640-8917 NORTON antivirus tech support number, Norton antivirus technical support phone number, 1800-640-8917 Norton antivirus technical support number, 1800-640-8917 Norton antivirus technical support toll free number, Norton technical support number.

    ReplyDelete
  13. Paris airport transfer - Parisairportransfer is very common in Paris that provides facilities to both the businessmen and the tourists. We provide airport transfers from London to any airport in London and also cruise transfer services at very affordable price to our valuable clients.

    Paris taxi
    Paris airport shuttle
    paris hotel transfer
    paris airport transfer
    paris shuttle
    paris car service
    paris airport service
    disneyland paris transfer
    paris airport transportation
    beauvais airport transfer
    taxi beauvais airport
    taxi cdg airport
    taxi orly airport

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Content have lots of information. Thanks for providing us.
    trainingatdelhi provides Summer Training in PHP with Live Project in Delhi with live Project in Delhi for M.Tech, B.Tech CSE, MCA, BCA. Our trainers’ enthusiastic approach and industry compliance designed module assist students in completing the project in less time and with confidence. Our trainers are subject specialist who acquired knowledge and experience after spending 20+ years in the industry.
    6 Weeks Summer Training in PHP in Delhi
    Summer Training in PHP with Live Project in Delhi

    ReplyDelete
  17. Salesforce Training Institute in Noida Webtrackker Technology a noticeable educational portal has carved a niche for itself in the field of academy services and offers the Salesforce Training in Noida to the students.

    Best Salesforce Training institute in noida

    Java Training Institute in Noida

    Digital Marketing Training Institute in Noida

    ReplyDelete
  18. All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.



    MEAN stack training in Chennai

    MEAN stack training in bangalore

    MEAN stack training in tambaram

    MEAN stack training in annanagar

    MEAN stack training in Velachery

    ReplyDelete
  19. Its really an Excellent post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog. Thanks for sharing....
    python training in chennai | python training in bangalore

    python online training | python training in pune

    python training in chennai | python training in bangalore

    ReplyDelete
  20. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    Devops Training in Chennai

    Devops Training in Bangalore

    ReplyDelete
  21. I was recommended this web site by means of my cousin. I am now not certain whether this post is written through him as nobody else recognise such precise about my difficulty. You're amazing! Thank you!
    python training in tambaram
    python training in annanagar
    python training in Bangalore

    ReplyDelete
  22. The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.
    DevOps online Training

    ReplyDelete
  23. Hmm, it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well as an aspiring blog writer, but I’m still new to the whole thing. Do you have any recommendations for newbie blog writers? I’d appreciate it.

    Best Selenium Training in Chennai | Selenium Training Institute in Chennai | Besant Technologies

    Selenium Training in Bangalore | Best Selenium Training in Bangalore

    AWS Training in Bangalore | Amazon Web Services Training in Bangalore

    ReplyDelete
  24. It seems you are so busy in last month. The detail you shared about your work and it is really impressive that's why i am waiting for your post because i get the new ideas over here and you really write so well.

    angularjs-Training in velachery

    angularjs Training in bangalore

    angularjs Training in bangalore

    angularjs Training in btm

    angularjs Training in electronic-city

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. I am happy to find this post Very useful for me, as it contains lot of information

    Article submission sites

    Education

    ReplyDelete
  27. Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful while being straight forward and to the point.
    Cloud computing Training
    Hadoop Training in Chennai
    Cloud computing Training Chennai
    Cloud computing Training centers in Chennai Big Data Hadoop Training
    Hadoop training institutes in chennai

    ReplyDelete
  28. This is very good content you share on this blog. it's very informative and provide me future related information.
    online Python training | python training in chennai

    ReplyDelete
  29. Hi there I am so thrilled I found your website, I really found you by mistake, while I was browsing on Yahoo for something else,
    nebosh course in chennai

    ReplyDelete
  30. This is such a good post. One of the best posts that I\'ve read in my whole life. I am so happy that you chose this day to give me this. Please, continue to give me such valuable posts. Cheers!
    online Python training
    python training in chennai

    ReplyDelete
  31. Awesome! Education is the extreme motivation that open the new doors of data and material. So we always need to study around the things and the new part of educations with that we are not mindful.
    Microsoft Azure online training
    Selenium online training
    Java online training
    uipath online training
    Python online training

    ReplyDelete
  32. Our many years of experience have made us leaders in language instruction and intercultural training. We have designed programs to create world-class executives with leadership capabilities in the global context. We are best english speaking course in noida because of following reasons:


    Join English Speaking Course In Noida

    ReplyDelete
  33. Thank you for sharing such a nice and interesting blog with us regarding Java. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information. I would like to suggest your blog in my dude circle.
    Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

    ReplyDelete
  34. Very Informative blog thank you for sharing. Keep sharing.

    Best software training institute in Chennai. Make your career development the best by learning software courses.

    blue prism training in chennai
    power bi training in chennai
    rpa training in chennai

    ReplyDelete
  35. Intriguing test for a weblog. I've been filtering the net for diversion just and showed up re your web site page. impeccable lucid. Thankful to you a ton for sharing your knowledge! it is fortifying to look that specific people anyway supplement an undertaking into adjusting to their locales. I'll be genuine to check affirm inside the works over again unambiguous quickly. Earth Day Quotes Funny

    ReplyDelete
  36. Great blog The content is informative and engaging. The author's writing style is captivating. Visit my website to get best Information About Online SP3D Training in India and mention Below Technologies.

    Online SP3D Training in India

    ReplyDelete
  37. Great blog The content is informative and engaging. Visit my website to get best Information
    pillar candle stand

    ReplyDelete
  38. I really appreciate this wonderful post that you have provided for us. You can visit my website Link. Roof Repairs in North York

    ReplyDelete