Lightning Multi Lookup

03:11 9 Comments A+ a-

Hi All,

I have made a lightning multi lookup plugin which is very useful and time saving for you.
Watch Demo Here : http://www.screencast.com/t/UshQVagP6




How To Use :

Steps :

1: Install package named 'Lightning_Multi_Lookup_Package' in your org , URL of package is : 'https://login.salesforce.com/packaging/installPackage.apexp?p0=04t28000000UPMh'.

2: All rules of lightning design system should be followed in visualforce page .for example : 'salesforce-lightning-design-system-vf.css' css file must me included in vf page etc.

3: After that include a component named 'Lightning_multilookup_component' in vf page.
For example : <c:Lightning_multilookup_component />

4: Now for a multi lookup create three elements in vf page:
a: a input text element with id.
b: a input hidden element with id.
c: a empty <Div> element with id.

These three things must have to specify (position) where you have to display multi lookup.

5: Then create two javascript maps , one for 'object name = URL of lightning object icon'(key=value) and second for 'URL of lightning object icon = class of object icon background'(key=value).
For example creating multi lookup for 'account and case' then :
eg =>
var objIconMap = {};
var iconClassMap = {};

objIconMap["account"] = "{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#account')}";
objIconMap["student__c"] = "{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#case')}";
objIconMap["case"] = "{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#case')}";

iconClassMap1["{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"] = "slds-icon-standard-account";
iconClassMap1["{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#case')}"] = "slds-icon-standard-article";

6: then finally call a method 'createMultiLookup' on page load or in document.ready like 'createMultiLookup('<div id>','<input text id>','<input hidden id>',<Map1>,<Map2>);'

Specifications :

This multi lookup fully customized , we can add as many as objects in this multi lookup.



We can specify object icon and icon's background according to our requirement (use map1 and map2 for this).
This Multi lookup has been created using 'Lightning Designn System' and 'SOAP'(sforce).


We can also filter according to characters(auto complete).


Example of lightning visual force page in which we are using lightning multi lookup plugin :


<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyBodyTag="false" docType="html-5.0" applyHtmlTag="false" id="thePage"> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>Lightning_Multi_Lookup_Component</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <apex:stylesheet value="{!URLFOR($Resource.slds040, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> <script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script> <!-- <script src="{!URLFOR($Resource.Light_custom_MultiLookup_JS)}"></script> --> </head> <body class="slds"> <apex:form > <c:Lightning_multilookup_component /> <div class="slds-container slds-container--center"> <div class="slds-box"> <div class="slds-page-header slds-text-heading--medium">Activity Details</div> <div class="slds-grid slds-wrap slds-form--vertical slds-p-top--medium"> <div class="slds-large-size--6-of-12 slds-col slds-col--padded" > <div class="slds-form-element"> <label class="slds-form-element__label" for="sample1">Activity Name</label> <div class="slds-form-element__control"> <input type="text" class="slds-input"/> </div> </div> </div> <div class="slds-large-size--6-of-12 slds-col slds-col--padded" > <div class="slds-form-element"> <label class="slds-form-element__label" for="sample1">Activity Date</label> <div class="slds-form-element__control"> <input type="text" class="slds-input"/> </div> </div> </div> <div class="slds-large-size--6-of-12 slds-col slds-col--padded" > <div class="slds-form-element"> <label class="slds-form-element__label" for="sample1">Due Date</label> <div class="slds-form-element__control"> <input type="text" class="slds-input"/> </div> </div> </div> <div class="slds-large-size--6-of-12 slds-col slds-col--padded" > <div class="slds-form-element"> <label class="slds-form-element__label" for="sample1">Related To</label> <div class="slds-form-element__control"> <apex:inputText id="inptName"/> <apex:inputHidden id="inptId"/> <div id="lk" class=""></div> </div> </div> </div> <div class="slds-large-size--12-of-12 slds-col slds-col--padded slds-m-top--small" > <center> <button class="slds-button slds-button--brand">Save</button> <button class="slds-button slds-button--neutral">Cancel</button> </center> </div> </div> </div> </div> </apex:form> <script> var dropdownIcon = "{!URLFOR($Resource.slds040, 'assets/icons/utility-sprite/svg/symbols.svg#switch')}"; var objIconMap = {}; var iconClassMap1 = {}; objIconMap["account"] = "{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"; objIconMap["case"] = "{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#case')}"; iconClassMap1["{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"] = "slds-icon-standard-account"; iconClassMap1["{!URLFOR($Resource.slds040, 'assets/icons/standard-sprite/svg/symbols.svg#case')}"] = "slds-icon-standard-article"; $(document).ready(function(){ createMultiLookup('lk','inptName','inptId',objIconMap,iconClassMap1); }); </script> </body> </html> </apex:page>

--------------------------------------------------------------------------------------------------------------------------
Please give your feedback and if you have any other queries/issues drop me an email(sagar.sadhnani@ibirdsservices.com).

Thank you





9 comments

Write comments
Anonymous
AUTHOR
7 January 2016 at 03:49 delete

Great Stuff Sagar :)
It will surely help others to create Lightning Application with multi lookup functionality in real fast time.

Reply
avatar
Anonymous
AUTHOR
7 January 2016 at 06:00 delete

Good job sagar :)

Reply
avatar
Unknown
AUTHOR
3 February 2016 at 08:53 delete

when i am using the Lightning Multi Lookup in the apex:repeat or apex:datalist component then I can two input fields. how to use the Lightning Multi Lookup with datalist?

Reply
avatar
Anonymous
AUTHOR
3 February 2016 at 22:04 delete

Hi Mr/Miss/Mrs , you have to give unique ids to your input text , input hidden and div which are used for multilookup and then you can call 'CreateMultilookup' function in apex:repeat in document.ready().
For example :


$(document).ready(function(){

createMultiLookup('lk','inptName','inptId',objIconMap,iconClassMap1); createMultiLookup('lkT','inptNameT','inptIdT',objIconMap,iconClassMap1);


createMultiLookup('lkRepeat{!l}','inptNameRepeat{!l}','inptIdRepeat{!l}',objIconMap,iconClassMap1);


});

Reply
avatar
Anonymous
AUTHOR
3 February 2016 at 22:07 delete

Sorry , tags are not supported in reply , last 'CreateMultilookup' function you can call in apex:repeat.

Reply
avatar
Suman
AUTHOR
9 February 2016 at 12:31 delete This comment has been removed by the author.
avatar
Suman
AUTHOR
9 February 2016 at 12:40 delete

Sagar below is the code. Can you let me known what changes i need to do? I kept the inputtext, inputhidden and div class in the repeat component like below:






after the repeat i kept the createMuiltiplelookup function

Reply
avatar
Anonymous
AUTHOR
10 February 2016 at 21:58 delete

Hi Suman , you cannot write code in comment , so if you have any queries, ping me or mail me on my official mail id 'sagar.sadhnani@ibirdsservices.com', where i can give you better solution.

Reply
avatar
Anonymous
AUTHOR
19 February 2016 at 21:43 delete

Great work Sagar, Very useful tool !

Reply
avatar