Wednesday, June 6, 2012

Roll Your Own Salesforce “Lookup” Popup Window Using JavaScript

Usually when we establish a relationship in Salesforce  between two different objects and in other cases we see a icon on page during inserting values in records of those objects and when we click on this icon a new pop up window open containing values of related objects and other values depends on the condition., this functionality is provided by Salesforce automatically but if we want to get this functionality through code then for this we have to use Apex and JavaScript.

I have two object name Class and Student and among them i want to get above functionality through code then i can get this functionality simply  through by designing visualforce page and JavaScript as given below:---

%%%%%%%%%%%%%%%(Insert Student)%%%%%%%%%%%%%%%%%%%
--------------------------------------------------
<apex:page controller="StudentController" id="pg">
  <apex:form id="frm">
      <apex:pageBlock id="pb" >
      <apex:pageBlockButtons >
          <apex:commandButton value="save" action="{!save}"/>
      </apex:pageBlockButtons>
      <table>
          <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Class</th>
              <th>DOB</th>
              <th>Email</th>
              <th>Gender</th>
          </tr>
          <tr>
              <td><apex:inputText value="{!firstName}"/></td>
              <td><apex:inputText value="{!lastName}"/></td>
              <td><apex:inputText value="{!classId}" id="classId"/><apex:image url="{!URLFOR($Resource.searchImg)}" height="10" width="30" alt="Search ClassId" onclick="showClass()"/></td>
              <td><apex:inputText value="{!dob}"/></td>
              <td><apex:inputText value="{!email}"/></td>
              <td><apex:selectList value="{!gender}" size="1">
                  <apex:selectOption itemLabel="Male" itemValue="male"></apex:selectOption>
                  <apex:selectOption itemLabel="Female" itemValue="female"></apex:selectOption>
              </apex:selectList>
              </td>
          </tr>
      </table>
      </apex:pageBlock>
  </apex:form>
    <script language="JavaScript" type="text/javascript">
        function showClass(){
            window.open('https://c.ap1.visual.force.com/apex/classList','', 'height=800,width=900');
            window.close("https://c.ap1.visual.force.com/apex/insertStudent");
        }
        function studentPage(id,name){
             //alert(val);
            document.getElementById("pg:frm:pb:classId").value = id;
         
        }
    </script>
</apex:page>

Lookup Which I make through Visualforce Pages:--




// For showing the lookup through javaScript we have to bind two seperate pages with each other.

=====================================================================================================
%%%%%%%%%%%%%%%%%%%%%%%%%%Class List%%%%%%%%%%%%%%

<apex:page standardController="Class__c" recordSetVar="cls">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockTable value="{!cls}" var="cl" width="100%">
                <apex:column >
                    <a herf="#" onclick="setValue('{!cl.id}','{!cl.Name}')">{!cl.Name}</a>
                </apex:column>
               
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
          <script>
                  function setValue(id,name){
                      window.opener.studentPage(id,name);
                      window.close("/apex/classList");
                  }
              </script>
</apex:page>
===========================================================================

Now one can get and understand lookup functionality simply by saving these page where Class and Student both are Custom Objects.  Implement these pages in our org and after saving them successfully you can easily get this functionality. Enjoy Coding.


                      ======================Abhinav Sharma=======================