Creating Multi Select Lookup in Salesforce

Hi All,

There is always a requirement and also an idea that is being proposed of having Multiselect Lookup Relationship between the 2 objects that might be between either a Standard Objects or can be between custom objects but till now there has nothing being available of such type of nothing in Salesforce.

So here is it. As you can achieve everything that you desire of through coding, so we would create multiselect lookup also with help of Apex and Visualforce pages through which we can add as many records in one time through custom lookups.

So to start with the functionality first you will have to create a Vf page with its custom controller and also will have a standard controller of the desired object that you might take according to your requirement so that you can make it an inline Salesforce Visualforce page on the detail page of your records.

In my code since I have worked upon the relation between Account and Contact (standard objects in Salesforce), so I have created a Vf page with the standard controller of Account that adds up multiple contacts from the detail page of Account record and also a custom controller named customMutliSelectLookUpCntrl.

Below is my code for the vf page:-

<apex:page standardController="Account" extensions="customMutliSelectLookUpCntrl">
    <style type="text/css">
        .customPopupStyle{ background-color: white; border-style: solid; border-width: 2px; left:20%; padding:10px; position: absolute; z-index: 9999; width: 500px; top:20%;} .disabledTextBoxStyle{ background-color: white; border: 1px solid; color: black; cursor: default; width: 90px; display: table; padding: 2px 1px; text-align: right;}.closeButtonStyle{ float: right;}
    </style>
    <apex:form>
        <apex:pageBlock id="counter">
            <apex:inputtextarea value="{!lookUp}" label="Contact"/>
            <apex:commandButton value="Add Value" reRender="out" action="{!add}"/>
            <apex:outputPanel id="out">
                <apex:outputPanel styleClass="customPopupStyle" rendered="{!bool}">
                    <apex:commandButton value="XX" title="Close the popup" action="{!closePopup}" styleClass="closeButtonStyle" rerender="out"/>
                    <apex:pageBlockTable value="{!show}" var="e" title="show">
                        <apex:column >
                            <apex:inputCheckbox value="{!e.check}"/>
                            <apex:actionSupport event="onclick" action="{!inIt}"/>
                        </apex:column>
                        <apex:column>
                            <apex:commandLink value="{!e.con.Name}"/>
                        </apex:column>
                    </apex:pageBlockTable>
                </apex:outputPanel>
            </apex:outputPanel>
            <apex:commandButton value="Save" action="{!mySave}"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

As you can see that there is also a custom controller associated with it which controls the functionality of the above page.So once you have created the above page just copy and paste the below apex class code:-

public with sharing class customMutliSelectLookUpCntrl {
    public string lookUp{get;set;}
    public list<conContact> contactList{get;set;}
    public boolean allbool{get;set;}
    public string inputValue{get;set;}
    public boolean bool{get;set;}
    public set<id> contactids{get;set;}
    ApexPages.StandardController controller;

    public customMutliSelectLookUpCntrl(ApexPages.StandardController con) {
        controller = con; contactList = new list<conContact>();
        bool = false; contactids = new Set<Id>();
    }    

    public class conContact {
        public contact con{get;set;}
        public boolean check{get;set;}
        public conContact(contact c, boolean boo){ con = c; check = boo; }
    }

    public void inIt() {
        list<Contact> selectedContact = new list<Contact>();
        lookUp = '';
        for(conContact conObj : contactList) {
            if(conObj.check != false){
                system.debug('conObj.con'+conObj.con);
                selectedContact.add(conObj.con);
                lookUp += conObj.con.name + ' ';
                system.debug('lookUp::'+lookUp);
                contactids.add(conObj.con.id);
            }
        }
        bool = true;
    }

    public list<conContact> getShow(){
        for(Contact coObj:[select id,name from Contact]){
            contactList.add(new conContact(coObj,allbool));
        }
        return contactList;
    }

    public PageReference mySave() {
        list<Contact> updateSelectedContact = new list<Contact>();
        id accId = ApexPages.CurrentPage().getparameters().get('id');
        for(Contact co:[select id,name,accountid from Contact where id =: contactids]) {
            co.accountid = accId;
            updateSelectedContact.add(co);
        }
        update updateSelectedContact;
        return null;
    }

    public void closePopup() {
        bool = false;
    }

    public void add(){
        bool = true;
    }
}

As you can see that I have worked upon wrapper class just to select the different records that you want to add to related records in one time which takes the value back to the controller and saves it back to the related child object.

After the class is being saved go to the layout page of the Account object and this page Custom Lookup as an inline Salesforce VF page to the objects detail page layout.

Save the layout after adding the Visualforce page and start using the multi-select lookup functionality.

Thanks.