Salesforce Dev Utility Post #1 -- Creating Custom Lookup in Visualforce Page

Sometime while developing visualforce, you may encountered problem to create a custom look where you can show all list of related record and select one.


This Post will show you how to create custom lookup functionality in visual - force page.

Code For Main Visual force Page

 <!--   
 //** Custom Lookup For Visualforce Page    
 Description: Creating a custom look up to populate field details of lookup field   
 Post By : Swayam Chouskey (@salesforceguy)  
 Version : 1.0  
 -->  
 <apex:page controller="Post1CustomLookupController" tabstyle="Account" showHeader="false" sidebar="false">  
   <!-- Import Style Sheet From Static Resource For Colorbox/Modal Popup -->  
   <apex:stylesheet value="{!URLFOR($Resource.Colorboxcss, 'colorbox.css')}"/>  
   <!-- Import Script From Static Resource For Colorbox/Modal Popup -->  
   <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>    
   <apex:includeScript value="{!$Resource.Colorboxjs}"/>   
   <!-- function Which Call Popup/Colorbox -->  
   <script>  
   function openLookupPopup(name, id)  
   {  
     var url="/apex/Post1CustomLookupPopupPage?namefield=" + name + "&idfield=" + id;  
     $.colorbox({iframe:true, href: url, innerWidth:340, innerHeight:290 , width:"90%", height:"80%", overlayClose : false ,escKey :false ,fixed :true });  
   }  
   </script>  
   <apex:form >  
     <apex:pageBlock title="Custom Lookup For Visualforce Page">  
       <apex:pageBlockSection columns="1">  
         <apex:pageBlockSectionitem >  
           <apex:outputLabel value="Select Account"/>  
           <apex:outputPanel >  
             <apex:inputHidden value="{!accountId}" id="targetId" />  
             <apex:inputText value="{!accountName}" id="targetName" onFocus="this.blur()" disabled="false"/> <a href="#" onclick="openLookupPopup('{!$Component.targetName}', '{!$Component.targetId}'); return false"><apex:image url="/img/icon/telescope32.png"/></a>  
           </apex:outputPanel>  
         </apex:pageBlockSectionitem>  
       </apex:pageBlockSection>  
       <apex:pageBlockSection >  
         <apex:pageBlockSectionitem >  
           <apex:commandButton value="Get Opportunity" action="{!findOpportunities}"/>  
         </apex:pageBlockSectionitem>  
       </apex:pageBlockSection>  
     </apex:pageBlock>  
   </apex:form>  
   <apex:pageBlock title="Contacts">  
     <apex:pageBlockTable value="{!opportunityList}" var="opp">  
       <apex:column headerValue="Opportunity Name" value="{!opp.Name}"/>  
       <apex:column headerValue="Opportunity Stage" value="{!opp.StageName}"/>  
     </apex:pageBlockTable>  
   </apex:pageBlock>  
 </apex:page>  

Main Visualforce Page

Main Page Controller Code :

 /*  
  Custom Lookup For Visualforce Page Controller for Main page   
 Description: Creating a custom look up to populate field details of lookup field   
 Post By : Swayam Chouskey (@salesforceguy)  
 Version : 1.0  
 */  
 public with sharing class Post1CustomLookupController   
 {  
      public String accountName {get; set;}  
      public Id accountId {get; set;}  
      public List<Opportunity> opportunityList{get;set;}  
      public PageReference findOpportunities()  
      {  
           if (null!=accountId)  
           {  
             opportunityList =[select id, Name, StageName from Opportunity where AccountId=:accountId];  
           }  
           return null;  
      }  
 }  

Custom Lookup Popup :

 <!--   
 //** Custom Lookup For Visualforce Page    
 Description: Creating a custom look up to populate field details of lookup field   
 Post By : Swayam Chouskey (@salesforceguy)  
 Version : 1.0  
 -->  
 <apex:page controller="Post1CustomLookupPopupController" sidebar="false" showheader="false">  
   <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>    
   <apex:includeScript value="{!$Resource.Colorboxjs}"/>   
   <script language="javascript">  
   function fillIn(name, id)  
   {  
     var element = parent.document.getElementById('{!$CurrentPage.parameters.namefield}');  
     element.value=name;  
     element=parent.document.getElementById('{!$CurrentPage.parameters.idfield}');  
     element.value=id;  
     parent.$.fn.colorbox.close();  
   }  
   function CloseWindow()  
   {  
     parent.$.fn.colorbox.close();  
   }  
   </script>  
   <apex:messages />  
   <apex:form id="form" >   
     <div style="width 100%">  
       <apex:pageBlock title="Lookup" id="block">  
         <apex:pageBlockSection id="section">  
           Enter Account Name (Search Text) and click Go<br/>  
           <apex:inputText value="{!query}" id="query"/>   
           <apex:commandButton value="Go" action="{!runQuery}"/>  
         </apex:pageBlockSection>  
       </apex:pageBlock>  
       <apex:pageBlock >  
         <apex:pageBlockSection columns="1">  
           <apex:pageBlockTable value="{!accounts}" var="account">  
             <apex:column headerValue="Name">  
               <apex:outputLink value="#" onclick="fillIn('{!account.Name}', '{!account.id}')">{!account.Name}</apex:outputLink>      
             </apex:column>  
             <apex:column headerValue="Street" value="{!account.BillingStreet}"/>  
             <apex:column headerValue="City" value="{!account.BillingCity}"/>  
             <apex:column headerValue="Postcode" value="{!account.BillingPostalCode}"/>  
           </apex:pageBlockTable>    
         </apex:pageBlockSection>  
       </apex:pageBlock>  
       <button type="button" onclick="CloseWindow();">Close Window</button>  
     </div>  
   </apex:form>  
 </apex:page>  

Custom Lookup Page Controller :

 /*  
  //** Custom Lookup For Visualforce Page Controller for popup page   
 Description: Creating a custom look up to populate field details of lookup field   
 Post By : Swayam Chouskey (@salesforceguy)  
 Version : 1.0  
 */  
 public class Post1CustomLookupPopupController {  
   public String query {get; set;}  
      public List<Account> accounts {get; set;}  
      public PageReference runQuery()  
      {  
           List<List<Account>> searchResults=[FIND :query IN ALL FIELDS RETURNING Account (id, name, billingstreet, billingcity, billingpostalcode)];  
           accounts=searchResults[0];  
            return null;  
      }  
 }  

Please Click Here To Download  to download complete Package ,

Please connect with me in case of any doubt.

                                         Happy Coding !!