Thursday, 7 January 2016

lightning

Lightning Multi Lookup

9
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





Posted by

9 comments:

  1. Anonymous7 January 2016 at 17:19

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

    ReplyDelete
  2. Anonymous7 January 2016 at 19:30

    Good job sagar :)

    ReplyDelete
  3. Suman3 February 2016 at 22:23

    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?

    ReplyDelete
    Replies
    1. Anonymous4 February 2016 at 11:34

      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);


      });

      Delete
    2. Anonymous4 February 2016 at 11:37

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

      Delete
  4. Suman10 February 2016 at 02:01

    This comment has been removed by the author.

    ReplyDelete
  5. Suman10 February 2016 at 02:10

    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

    ReplyDelete
    Replies
    1. Anonymous11 February 2016 at 11:28

      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.

      Delete
  6. Anonymous20 February 2016 at 11:13

    Great work Sagar, Very useful tool !

    ReplyDelete

Subscribe to: Post Comments (Atom)