Friday, 30 October 2015

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 !!                                   



1 comment:



  1. We give the best Java Training Courses in Chennai and we have the best mentors who are chipping away at Top MNC organizations with right around 10 years of involvement in Java.Our preparing is of one of a kind style makes us the best java preparing foundation in Chennai and parcel of understudies are awed with our preparation which has made us to be the best decision for individuals intrigued by learning Java.

    ReplyDelete