jquery – Salesforce, junglified.

Hiding selected Side bar custom components(HTML)

There are times in the project where we have to have some UI changes done on the Standard pages. For example, you may have to change the label of the ‘open Activities’ related list on a particular object’s standard page. To achieve this functionality we usually write a simple javascript / jquery script in the side bar component (of type HTML) and then that will do the work. So there are scenarios where multiple team might have implemented such functionality and this results in a lot of sidebar components showing up on the UI which will not make sense to the End Users

In the below code one have to just enter the name of the such side bar components and then that side bar component will be automatically hidden.

//Referencing the jQuery library from the static resource
<script src="/resource/jQuerylib"></script>
<script>
	
var j$ = jQuery.noConflict();
//Add All the name of the components that you want to hide.
var hideComponentArray = ['component1','component2','HideSideBarComponents'];
j$(function(){
   j$("h2.brandPrimaryFgr").each(function(){
      if(j$.inArray(j$(this).text(), hideComponentArray) != -1){
         //Hiding the entire div.
         j$(this).parent("div.sidebarModuleHeader").parent("div.htmlAreaComponentModule").hide();
      }
    });
});
</script>

Using jQuery’s AutoComplete in Salesforce – Part 2

In the first part we saw that we are using a static array to show the country value. This is of no use in real-time scenario. In most of the cases one will be required to show the values from some where else. So how do we do it in salesforce??

In this example we will use the account and contact object to get the data.
Now, there are 2 ways to get the data from the database.
1.) Use a controller, which will return you a list of accounts.
2.) Query directly in the VF page using the Salesforce’s Ajax toolkit.

I will demonstrate both the ways in the same code.

Step 1: Create an apex class with the below code. The name of the class is AutoCompleteDemoController
Step 2: Create a the VF page with the below code. Name the VF page : AutocompleteDemoPage

Apex Class:

public class AutoCompleteDemoController{
    public list<account> getAccountList(){
        return [select id,name from account limit 25];
    }
}

VF page:

<apex:page controller="AutoCompleteDemoController">
    <!--Make sure you have the Javascript in the same order that I have listed below.-->
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/soap/ajax/26.0/connection.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        var j$ = jQuery.noConflict();
        var apexAccountList =[];
        
        //use the <!-- <apex:repeat> -->tag to iterate through the list returned from the class and store only the names in the javascript variable.
        <apex:repeat value="{!accountList}" var="accList">
            //Store the name of the account in the array variable.
            apexAccountList.push('{!accList.name}');
        </apex:repeat>
        
        //We will establish a connection salesforce database using the sforce.connection.init(sessionID, ServerURL) function.
        var sid = '{!$Api.Session_ID}';
        var server = "https://" + window.location.host + "/services/Soap/u/26.0";
        sforce.connection.init(sid, server);
        
        //We will query the contact object using the sforce.connection.query function. This will return 200 results.
        var result = sforce.connection.query("select Name from Contact");
        var records = result.getArray("records");
        var javascriptContactList =[];
        
        //Iterate thru the list of contact and store them in a javascript simple array variable which will then assign it to the source of the autocomplete.
        for(i=0;i<records.length;i++){
            javascriptContactList[i]=records[i].Name;
        }
        //on Document ready
        j$(document).ready(function(){
            
            j$("#apexaccountautocomplete").autocomplete({
                source : apexAccountList
            });
            j$("#sfjscontactautocomplete").autocomplete({
                source : javascriptContactList
            });
        });
    </script>
    
    <apex:form>
        <b>Account(This uses the Apex class to display the list)</b><input type="text" id="apexaccountautocomplete"/><br/><br/>
        <b>Contact(This uses the salesforce's ajax toolkit to display the list)</b><input type="text" id="sfjscontactautocomplete"/>
    </apex:form>
    
</apex:page>

P.S:This code may not work correctly in Google Chrome Browser initially.
Workaround: When you load the VF page for the 1st time in Chrome, you will see a shield (gray in color) in the address bar, click on it and select ‘Load unsafe javascript’. Another option is to load the script in the static resource and refer the scripts from there in the VF page.

Using jQuery’s AutoComplete in Salesforce – Part 1

Using the Auto-Complete plugin enhances the UI functionality. Whenever a user enter a value in a input field, the auto-complete will show the user a possible set of value which matches the user input value.

Now, Just to show an example , I will use the auto-complete functionality on a country input field. When a user starts entering a value, based on his entry we will show the possible values. We will make use of the jQuery auto-complete plugin. This plugin makes it very simple to implement the autocomplete in salesforce, any HTML content for that matter.

In the first example we will use the plugin in a VF page then we will implement a similar functionality on a standard page.

Step 1: Create a VF page, I will name it AutoCompleteExample
Step 2: Copy the below code and save the page.
Step 3: Open the VF page you have just created (https://yourSaleforceInstance/apex/AutoCompleteExample). You will be able to see a input field, Start entering some text. Voila!! you will be able to see autocomplete in Action.

<apex:page>
	<!--Make sure you have the Javascript in the same order that I have listed below.-->
	<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
	<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
	<script type="text/javascript">
		//Create a new variable j$ just to avoid any conflicts with other libraries which may be using $.
		var j$ = jQuery.noConflict();
		//Capture the list of countries in a Array.
		var countryArray = ['India', 'USA', 'China','FInland','Norway','Netherlands','England','Ukraine','Russia','Japan','Korea','Burma','Srilanka','Iran','Iceland','Canada','Rome','Australia','Armenia','Albania','Afghanisthan'];
		//on Document ready
		j$(document).ready(function(){
			j$("#countryautocomplete").autocomplete({
				source : countryArray
			});
		});
	</script>
	<apex:form>
		<b>Enter Text</b><input type="text" id="countryautocomplete"/>
	</apex:form>
</apex:page>