├── .gitignore
├── src
    ├── classes
    │   ├── SDLSLookupComponentDemo.cls
    │   ├── SDLSLookupComponentDemo.cls-meta.xml
    │   ├── SLDSDynamicLookupController.cls-meta.xml
    │   ├── SLDSDynamicLookupControllerTest.cls-meta.xml
    │   ├── SLDSLookupComponentDemoController.cls-meta.xml
    │   ├── SLDSLookupComponentDemoControllerTest.cls-meta.xml
    │   ├── SLDSLookupComponentDemoControllerTest.cls
    │   ├── SLDSLookupComponentDemoController.cls
    │   ├── SLDSDynamicLookupControllerTest.cls
    │   └── SLDSDynamicLookupController.cls
    ├── staticresources
    │   ├── SLDS.resource
    │   ├── SLDS.resource-meta.xml
    │   ├── SLDSDynamicLookupScript.resource-meta.xml
    │   └── SLDSDynamicLookupScript.resource
    ├── tabs
    │   └── SLDS_Dynamic_Lookup_Demo.tab
    ├── components
    │   ├── SLDSDynamicLookup.component-meta.xml
    │   └── SLDSDynamicLookup.component
    ├── applications
    │   └── SLDS_Dynamic_Lookup.app
    ├── pages
    │   ├── SDLSLookupComponentDemo.page-meta.xml
    │   └── SDLSLookupComponentDemo.page
    └── package.xml
├── images
    ├── Demo1.png
    ├── Demo2.png
    ├── Demo3.png
    └── Demo4.png
├── .playground
    └── play.json
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | config/*
2 | debug/*
3 | *.sublime-*
4 | .history
5 | .playground/*.zip


--------------------------------------------------------------------------------
/src/classes/SDLSLookupComponentDemo.cls:
--------------------------------------------------------------------------------
1 | public class SDLSLookupComponentDemo {
2 | 
3 | }


--------------------------------------------------------------------------------
/images/Demo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lkatney/SLDS-Dynamic-Lookup-Component/HEAD/images/Demo1.png


--------------------------------------------------------------------------------
/images/Demo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lkatney/SLDS-Dynamic-Lookup-Component/HEAD/images/Demo2.png


--------------------------------------------------------------------------------
/images/Demo3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lkatney/SLDS-Dynamic-Lookup-Component/HEAD/images/Demo3.png


--------------------------------------------------------------------------------
/images/Demo4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lkatney/SLDS-Dynamic-Lookup-Component/HEAD/images/Demo4.png


--------------------------------------------------------------------------------
/src/staticresources/SLDS.resource:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lkatney/SLDS-Dynamic-Lookup-Component/HEAD/src/staticresources/SLDS.resource


--------------------------------------------------------------------------------
/.playground/play.json:
--------------------------------------------------------------------------------
1 | {
2 |   "title": "SLDS Dynamic Lookup Component",
3 |   "url": "slds-dynamic-lookup-component",
4 |   "id": "2",
5 |   "apiversion": "45.0"
6 | }


--------------------------------------------------------------------------------
/src/classes/SDLSLookupComponentDemo.cls-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>35.0</apiVersion>
4 |     <status>Active</status>
5 | </ApexClass>
6 | 


--------------------------------------------------------------------------------
/src/classes/SLDSDynamicLookupController.cls-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>35.0</apiVersion>
4 |     <status>Active</status>
5 | </ApexClass>
6 | 


--------------------------------------------------------------------------------
/src/classes/SLDSDynamicLookupControllerTest.cls-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>35.0</apiVersion>
4 |     <status>Active</status>
5 | </ApexClass>
6 | 


--------------------------------------------------------------------------------
/src/classes/SLDSLookupComponentDemoController.cls-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>35.0</apiVersion>
4 |     <status>Active</status>
5 | </ApexClass>
6 | 


--------------------------------------------------------------------------------
/src/classes/SLDSLookupComponentDemoControllerTest.cls-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>35.0</apiVersion>
4 |     <status>Active</status>
5 | </ApexClass>
6 | 


--------------------------------------------------------------------------------
/src/staticresources/SLDS.resource-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <cacheControl>Public</cacheControl>
4 |     <contentType>application/zip</contentType>
5 | </StaticResource>
6 | 


--------------------------------------------------------------------------------
/src/tabs/SLDS_Dynamic_Lookup_Demo.tab:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <CustomTab xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <label>SLDS Dynamic Lookup Demo</label>
4 |     <mobileReady>false</mobileReady>
5 |     <motif>Custom37: Bridge</motif>
6 |     <page>SDLSLookupComponentDemo</page>
7 | </CustomTab>
8 | 


--------------------------------------------------------------------------------
/src/staticresources/SLDSDynamicLookupScript.resource-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <cacheControl>Public</cacheControl>
4 |     <contentType>text/javascript</contentType>
5 |     <description>Script to work with SLDS dynamic component &amp; support multiple components on page</description>
6 | </StaticResource>
7 | 


--------------------------------------------------------------------------------
/src/components/SLDSDynamicLookup.component-meta.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <ApexComponent xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <apiVersion>35.0</apiVersion>
 4 |     <label>SLDSDynamicLookup</label>
 5 |     <packageVersions>
 6 |         <majorNumber>1</majorNumber>
 7 |         <minorNumber>7</minorNumber>
 8 |         <namespace>sf_com_apps</namespace>
 9 |     </packageVersions>
10 | </ApexComponent>
11 | 


--------------------------------------------------------------------------------
/src/applications/SLDS_Dynamic_Lookup.app:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <defaultLandingTab>SLDS_Dynamic_Lookup_Demo</defaultLandingTab>
4 |     <description>A component that can be used in Salesforce Lightning Design System VF pages</description>
5 |     <formFactors>Large</formFactors>
6 |     <label>SLDS Dynamic Lookup</label>
7 |     <tab>SLDS_Dynamic_Lookup_Demo</tab>
8 | </CustomApplication>
9 | 


--------------------------------------------------------------------------------
/src/classes/SLDSLookupComponentDemoControllerTest.cls:
--------------------------------------------------------------------------------
 1 | @isTest
 2 | public class SLDSLookupComponentDemoControllerTest {
 3 |     public static testmethod void createRecordTest(){
 4 |         SLDSLookupComponentDemoController controller = new SLDSLookupComponentDemoController();
 5 |         controller.con.Firstname = 'Test';
 6 |         controller.con.Lastname = 'SLDS Demo';
 7 |         
 8 |         Test.startTest();
 9 |             controller.createRecord();
10 |         Test.stopTest();
11 |     }
12 | }


--------------------------------------------------------------------------------
/src/pages/SDLSLookupComponentDemo.page-meta.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <ApexPage xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <apiVersion>35.0</apiVersion>
 4 |     <availableInTouch>false</availableInTouch>
 5 |     <confirmationTokenRequired>false</confirmationTokenRequired>
 6 |     <label>SDLSLookupComponentDemo</label>
 7 |     <packageVersions>
 8 |         <majorNumber>1</majorNumber>
 9 |         <minorNumber>7</minorNumber>
10 |         <namespace>sf_com_apps</namespace>
11 |     </packageVersions>
12 | </ApexPage>
13 | 


--------------------------------------------------------------------------------
/src/classes/SLDSLookupComponentDemoController.cls:
--------------------------------------------------------------------------------
 1 | public class SLDSLookupComponentDemoController {
 2 |     
 3 |     public contact con{get;set;}
 4 |     public String oppId{get;set;}
 5 |     
 6 |     /**
 7 |      * Constructor
 8 |     **/
 9 |     public SLDSLookupComponentDemoController(){
10 |         con = new Contact(AccountId = '00128000006QbVK', OwnerId = '00528000000MB72');
11 |     }
12 |     
13 |     /**
14 |      * Method to create a record
15 |     **/
16 |     public pagereference createRecord(){
17 |         insert con;
18 |         return new pagereference('/'+con.Id);
19 |     }
20 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Lakshay Katney
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/package.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <Package xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <types>
 4 |         <members>SDLSLookupComponentDemo</members>
 5 |         <members>SLDSDynamicLookupController</members>
 6 |         <members>SLDSDynamicLookupControllerTest</members>
 7 |         <members>SLDSLookupComponentDemoController</members>
 8 |         <members>SLDSLookupComponentDemoControllerTest</members>
 9 |         <name>ApexClass</name>
10 |     </types>
11 |     <types>
12 |         <members>SLDSDynamicLookup</members>
13 |         <name>ApexComponent</name>
14 |     </types>
15 |     <types>
16 |         <members>SDLSLookupComponentDemo</members>
17 |         <name>ApexPage</name>
18 |     </types>
19 |     <types>
20 |         <members>SLDS_Dynamic_Lookup</members>
21 |         <name>CustomApplication</name>
22 |     </types>
23 |     <types>
24 |         <members>SLDS_Dynamic_Lookup_Demo</members>
25 |         <name>CustomTab</name>
26 |     </types>
27 |     <types>
28 |         <members>SLDS</members>
29 |         <members>SLDSDynamicLookupScript</members>
30 |         <name>StaticResource</name>
31 |     </types>
32 |     <version>39.0</version>
33 | </Package>
34 | 


--------------------------------------------------------------------------------
/src/classes/SLDSDynamicLookupControllerTest.cls:
--------------------------------------------------------------------------------
 1 | @isTest
 2 | private class SLDSDynamicLookupControllerTest {
 3 |     
 4 |     private static String USERNAME = 'SLDSDemoUser@lkatney.com';
 5 |     
 6 | 	private static testMethod void generateObjectLabelPluralTest() {
 7 | 	    SLDSDynamicLookupController controller = new SLDSDynamicLookupController();
 8 | 	    controller.objectName = 'Account';
 9 | 	    System.assertEquals('Accounts', controller.objectLabelPlural);
10 | 	}
11 | 	
12 | 	private static testMethod void generateUniqueComponentIdTest() {
13 | 	    SLDSDynamicLookupController controller = new SLDSDynamicLookupController();
14 | 	    controller.Label = 'Set Account';
15 | 	    System.assertEquals('setaccount', controller.uniqueComponentId);
16 | 	}
17 |     
18 |     private static testmethod void searchTest(){
19 |         setupUser();
20 |         List<SLDSDynamicLookupController.Wrapper> lst = SLDSDynamicLookupController.search('User', 'Username,Name', 'Name(Username)', 'field->smallPhotoUrl', 'SLDS', null);
21 |         System.assertEquals(1, lst.size());
22 |     }
23 | 
24 |     private static testmethod void loadComponentTest(){
25 |         User u = setupUser();
26 |         SLDSDynamicLookupController controller = new SLDSDynamicLookupController();
27 | 
28 |         Test.startTest();
29 |             controller.objectName = 'User';
30 |             controller.fieldApiNames = 'Username,Name';
31 |             controller.displayPattern = 'Name(Username)';
32 |             controller.photoValue = 'field->smallPhotoUrl';
33 |             controller.setField = u.Id;
34 |         Test.stopTest();
35 | 
36 |         System.assertNotEquals(null, controller.displayValue);
37 |         System.assertNotEquals(null, controller.photoUrl);
38 | 
39 |     }
40 | 
41 |     private static testMethod User setupUser() {
42 |         Profile p = [SELECT Id FROM Profile WHERE Name='System Administrator'];
43 |         User u = new User(  Alias = 'standt', Email=USERNAME, 
44 |                             EmailEncodingKey='UTF-8', LastName='Testing', LanguageLocaleKey='en_US', 
45 |                             LocaleSidKey='en_US', ProfileId = p.Id, 
46 |                             TimeZoneSidKey='America/Los_Angeles', UserName=USERNAME
47 |                             );
48 |         insert u;
49 |         return u;
50 |     }
51 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SLDS-Dynamic-Lookup-Component
 2 | A package with a component that can be easily used to create lookup fields on VF page using Salesforce Lightning Design System(SLDS)   
 3 | 
 4 | Author [Lakshay Katney](http://blog.lkatney.com/about/)
 5 |   
 6 | ## Setup
 7 | 1. This repo is ready to deploy package in any Salesforce organization. Use any metadata tool to deploy it
 8 | 2. There is an unmanaged version of this package too. Use below links to install it  
 9 | **[Sandbox](https://test.salesforce.com/packaging/installPackage.apexp?p0=04t280000003LDx)**
10 | **[Production/Developer](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t280000003LDx)**
11 | 
12 | ## Usage
13 | On VF page, just add a static resource and component with appropriare attributes
14 | 
15 | **Static Resource**
16 | ```
17 | <apex:includeScript value="{!$Resource.SLDSDynamicLookupScript}"/>
18 | ```
19 | 
20 | **Component Usage**
21 | ```
22 | <c:SLDSDynamicLookup SLDSResourceName="{!$Resource.SLDS}" ObjectApiName="User" DisplayFieldApiNames="Username,Name" DisplayFieldsPattern="Name - Username"  photo="field->smallPhotoUrl" LabelName="Set User" SetValueToField="{!con.OwnerId}"/>
23 | ```
24 | 
25 | ## Attributes Usage
26 | 
27 |  Attribute     				| Requirement   | Description  																																						
28 | :--------------------------:|:------------:|:--------------------------------
29 |  **SLDSResourceName**  		| Required 		| Attribute in which name of your static resource to be passed which contains Salesforce Lightning Design System(SLDS)												
30 |  **ObjectApiName**     		| Required      | Api name of component on which search should happen.
31 |  **DisplayFieldApiNames**	| Required      | Attribute to get fields Api Names whose value needs to be displayed while searching. These are seperated by comma. For example : 'firstname,lastname'
32 |  **LabelName** 				| Required 		| Attribute to display label along with custom lookup field made by this component
33 |  **SetValueToField** 		| Required 		| Attribute that will tell where to put selected value. Also populates the default value if field has value.
34 |  **DisplayFieldsPattern**	| Optional		| Attribute to get pattern to display value.You can combine two fields with pattern.  For example : 'firstname - lastname'. By default it will take pattern as comma seperated fields
35 |  **photo** 					| Optional 		| Attribute that will tell if photo needs to be added to records while searching.  For fields to be used, pattern should be 'field->fieldAPiName'. For url, pattern should be 'url->pathofimage'
36 |  **FilterOn** | Optional | Attribute that will filter the list of records in results
37 |  **RenderOnComplete** | Optional | Attribute that will run an action function/javascript on complete
38 | 
39 | 
40 | ## Screenshots
41 | 
42 | ![Demo](/images/Demo1.png)  
43 | ![Demo](/images/Demo2.png)  
44 | ![Demo](/images/Demo3.png)  
45 | ![Demo](/images/Demo4.png)  
46 | 
47 | ## Versions
48 | 
49 | ### Version 1.4
50 | Introduction of dependent lookups  
51 | Allow filters on lookups on basis of parent lookup
52 | 
53 | ### Version 1.3    
54 | ##### Improvements  
55 | Allow default values to show if passed  
56 | 
57 | ### Version 1.2   
58 | First version to add lookup fields in SLDS styling on Visual force pages  
59 | 
60 | 
61 | 


--------------------------------------------------------------------------------
/src/pages/SDLSLookupComponentDemo.page:
--------------------------------------------------------------------------------
 1 | <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" controller="SLDSLookupComponentDemoController">    
 2 | 
 3 | <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
 4 | 
 5 | <head>
 6 |   <title>Salesforce Lightning Design System Trailhead Module</title>
 7 |   <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
 8 |   <style>
 9 |       .slds-form-element{
10 |           margin-bottom: 20px;
11 |       }
12 |   </style>
13 | </head>    
14 | 
15 | <body>    
16 | 
17 |   <!-- REQUIRED SLDS WRAPPER -->
18 |   <div class="slds">    
19 |     <div class="slds-container--center slds-container--small">
20 |         <!-- MASTHEAD -->
21 |         <div class="slds-text-heading--large slds-text-align--center" style="margin-bottom:50px">SLDS Dynamic Lookup Demo</div>
22 |         
23 |         <div class="slds-text-heading--medium slds-text-align--center" style="margin-bottom:30px">Create a contact</div>
24 |         <!-- / MASTHEAD -->    
25 |     
26 |         <!-- PRIMARY CONTENT WRAPPER -->
27 |         <div class="myapp">
28 |             <apex:form >
29 |                 <apex:actionFunction name="submit" action="{!createRecord}"></apex:actionFunction>
30 |                 <div class="slds-form-element">
31 |                   <label class="slds-form-element__label" for="text-input-01">Firstname</label>
32 |                   <div class="slds-form-element__control">
33 |                     <apex:inputText styleClass="slds-input" html-placeholder="Firstname" value="{!con.Firstname}"/>
34 |                   </div>
35 |                 </div>
36 |                 
37 |                 <div class="slds-form-element">
38 |                   <label class="slds-form-element__label" for="text-input-01">Lastname</label>
39 |                   <div class="slds-form-element__control">
40 |                     <apex:inputText styleClass="slds-input" html-placeholder="Lastname" value="{!con.Lastname}"/>
41 |                   </div>
42 |                 </div>
43 |                 
44 |                 <!-- create look up for AccountId-->
45 |                 <c:SLDSDynamicLookup SLDSResourceName="{!$Resource.SLDS}" ObjectApiName="Account" DisplayFieldApiNames="Name,Type" DisplayFieldsPattern="Name(Type)" LabelName="Set Account" SetValueToField="{!con.AccountId}" RenderOnComplete="rerenderOppLookup"/>
46 | 
47 |                   <!-- create look up for OwnerId-->
48 |                 <c:SLDSDynamicLookup SLDSResourceName="{!$Resource.SLDS}" ObjectApiName="User" DisplayFieldApiNames="Username,Name" DisplayFieldsPattern="Name - Username"  photo="field->smallPhotoUrl" LabelName="Set User" SetValueToField="{!con.OwnerId}" RenderOnComplete="rerenderOppLookup"/>
49 | 
50 |                 <!-- create look up for OpportunityId-->
51 |                 <!-- section which is dependent on account Id & ownerId-->
52 |                 <apex:outputPanel id="oppLookup">
53 |                   <c:SLDSDynamicLookup SLDSResourceName="{!$Resource.SLDS}" ObjectApiName="Opportunity" DisplayFieldApiNames="Name" DisplayFieldsPattern="Name" LabelName="Set Opportunity" SetValueToField="{!oppId}" FilterOn="AccountId = \'{!con.AccountId}\', OwnerId = \'{!con.OwnerId}\'"/>
54 |                 </apex:outputPanel>
55 |                 
56 |                 <div class="slds-text-align--center">
57 |                     <a class="slds-button slds-button--brand" onclick="submit()" href="javascript:void(0)">Submit</a>
58 |                 </div>
59 | 
60 |                 <!-- all action functons to refresh related lookups-->
61 |                 <apex:actionFunction name="rerenderOppLookup" rerender="oppLookup"/>
62 |             </apex:form>
63 |         </div>
64 |         <!-- / PRIMARY CONTENT WRAPPER -->    
65 |     </div>
66 |   </div>
67 |   <!-- / REQUIRED SLDS WRAPPER -->    
68 |   <apex:includeScript value="{!$Resource.SLDSDynamicLookupScript}"/>
69 | 
70 | </body>
71 | </html>
72 | </apex:page>


--------------------------------------------------------------------------------
/src/staticresources/SLDSDynamicLookupScript.resource:
--------------------------------------------------------------------------------
  1 | //setup before functions
  2 | var typingTimer;                //timer identifier
  3 | var doneTypingInterval = 500;  
  4 | 
  5 | /**
  6 |  * Method to fire once user stop writing
  7 |  */
  8 | function keyPressedOnLookup(componentId, objectName, fieldNames, fieldsPattern, photo, objectPluralName, queryFilters, remoteMethod){
  9 |     clearTimeout(typingTimer);
 10 |     var selector = '#'+componentId;
 11 |     if (document.querySelector(selector+" #lookup").value) {
 12 |         typingTimer = setTimeout(startSearch(componentId, objectName, fieldNames, fieldsPattern, photo, objectPluralName, queryFilters, remoteMethod), doneTypingInterval);
 13 |     }else{
 14 |         var searchText = document.querySelector(selector+" #lookup");
 15 |         var lstBox = document.querySelector(selector+" #list-box");
 16 |         lstBox.style.display = 'none';
 17 |     }
 18 | }
 19 | 
 20 | /**
 21 |  * Function to get users from servers to display for Reviewers
 22 |  */
 23 | function startSearch(componentId, objectName, fieldNames, fieldsPattern, photo, objectPluralName, queryFilters, remoteMethod) {
 24 |     var selector = '#'+componentId;
 25 |     showLoader(componentId);
 26 |     var searchText = document.querySelector(selector+" #lookup");
 27 |     if(queryFilters === '' || queryFilters.length === 0){
 28 |         queryFilters = null;
 29 |     }
 30 |     Visualforce.remoting.Manager.invokeAction(remoteMethod,
 31 |             objectName, fieldNames, fieldsPattern, photo, searchText.value, null, queryFilters,
 32 |         function(result, event){
 33 |             if (event.status) {
 34 |                 var lstBox = document.querySelector(selector+" #list-box");
 35 |                 lstBox.style.display = 'block';
 36 |                 
 37 |                 var recordLst = document.querySelector(selector+" #record-list");
 38 |                 recordLst.innerHTML = '';
 39 |                 for(var i = 0; i < result.length ; i++){
 40 |                     var record = result[i];
 41 |                     recordLst.appendChild(createRecordLi(componentId,record));
 42 |                 }
 43 |                 document.querySelector(selector+" #search-text-info").innerHTML = searchText.value + ' in '+objectPluralName+' - '+ result.length + ' results found'; 
 44 |             } else if (event.type === 'exception') {
 45 |                     console.log(event.message);
 46 |                     console.log(event.where);
 47 |             } else {
 48 |                  console.log(event.message);
 49 |             }
 50 |             hideLoader(componentId);
 51 |         }, 
 52 |         {escape: true}
 53 |     );
 54 | }
 55 | 
 56 | /**
 57 |  * Create li for every record to display
 58 |  * @param  user
 59 |  * @return li
 60 |  */
 61 | function createRecordLi(componentId,record){
 62 |     var id = record.recordId;
 63 |     var displayName = record.displayValue;
 64 |     var photoUrl = record.photoUrl;
 65 |     var li = document.createElement("li");
 66 |     li.setAttribute("class", "slds-lookup__item");
 67 |     li.setAttribute("onclick", "select('"+componentId+"', '"+displayName+"', '"+photoUrl+"', '"+id+"')");
 68 |     var inner = '<a id=s02 role=option>';
 69 |         if(photoUrl){
 70 |             inner += '<img src="'+photoUrl+'" class="slds-icon slds-icon-text-default slds-icon--small"/>';
 71 |         }
 72 |         inner += displayName;
 73 |         inner += '</a>';
 74 |     
 75 |     li.innerHTML = inner;
 76 |     return li;
 77 | }
 78 | 
 79 | /**
 80 |  * Select record from list
 81 |  * @param  {[type]} displayName     [description]
 82 |  * @param  {[type]} photoUrl [description]
 83 |  * @param  {[type]} id       [description]
 84 |  * @return {[type]}          [description]
 85 |  */
 86 | function select(componentId, name,photoUrl,id){
 87 |     var selector = '#'+componentId;
 88 |     showLoader(componentId);
 89 |     document.querySelector(selector+" #selected-name").innerHTML = name;
 90 |     if(photoUrl != 'undefined' && photoUrl != '' && photoUrl != null){
 91 |         document.querySelector(selector+" #select-image").style.display = 'inline';
 92 |         document.querySelector(selector+" #select-image").setAttribute("src", photoUrl);
 93 |     }else{
 94 |         document.querySelector(selector+" #select-image").style.display = 'none';
 95 |     }
 96 |     eval(componentId+"setOwnerId('"+id+"')");
 97 | }
 98 | 
 99 | /**
100 |  * User selected function
101 |  * @return {[type]} [description]
102 |  */
103 | function recordSelected(componentId, renderOnComplete){
104 |     var selector = '#'+componentId;
105 |     if(document.querySelector(selector+" #selected-record").style.display == 'none'){
106 |         document.querySelector(selector+" #selected-record").style.display = 'block';
107 |         document.querySelector(selector+" #input-text").style.display = 'none';
108 |         document.querySelector(selector+" #lookup").value = '';
109 |         var lstBox = document.querySelector(selector+" #list-box");
110 |         lstBox.style.display = 'none';
111 |     }else{
112 |         document.querySelector(selector+" #input-text").style.display = 'block';
113 |         document.querySelector(selector+" #selected-record").style.display = 'none';
114 |     }
115 |     if(renderOnComplete && renderOnComplete.length > 0){
116 |         eval(renderOnComplete + '()');
117 |     }
118 |     hideLoader(componentId);
119 | }
120 | 
121 | /**
122 |  * remove selected record
123 |  * @return {[type]} [description]
124 |  */
125 | function removeRecord(componentId){
126 |     var selector = '#'+componentId;
127 |     eval(componentId+"setOwnerId(null)");
128 | }
129 | 
130 | function showLoader(componentId){
131 |     var selector = '#'+componentId;
132 |     document.querySelector(selector+" #loader").style.display = 'block';
133 | }
134 | 
135 | function hideLoader(componentId){
136 |     var selector = '#'+componentId;
137 |     document.querySelector(selector+" #loader").style.display = 'none';
138 | }


--------------------------------------------------------------------------------
/src/components/SLDSDynamicLookup.component:
--------------------------------------------------------------------------------
 1 | <apex:component controller="SLDSDynamicLookupController">
 2 |     
 3 |     <!-- attributes -->
 4 |     <apex:attribute name="SLDSResourceName" 
 5 |         description="Attribute in which ame of static resource to be passed"
 6 |             required="true" type="String"/>
 7 |     <apex:attribute name="LabelName"
 8 |         description="Attribute to display label along with look up field to distinguish fields"
 9 |             required="true" type="String" assignTo="{!label}"/>
10 |     <apex:attribute name="ObjectApiName" 
11 |         description="Api name of component on which search should happen"
12 |             required="true" type="String" assignTo="{!objectName}"/>
13 |     <apex:attribute name="DisplayFieldApiNames" 
14 |         description="Attribute to get fields Api Name whose value needs to be displayed while searching.These are seperated by comma.For example : 'firstname,lastname'" 
15 |             required="true" type="String" assignTo="{!fieldApiNames}"/>
16 |      <apex:attribute name="DisplayFieldsPattern" 
17 |         description="Attribute to get pattern to display value.You can combine two fields with pattern. For example : 'firstname - lastname'" 
18 |             type="String" assignTo="{!displayPattern}"/>
19 |     <apex:attribute name="Photo" 
20 |         description="Attribute that will tell if photo needs to be added to records while searching. For fields to be used, pattern should be 'field->fieldAPiName'. For url, pattern should be 'url->pathofimage'" 
21 |             type="String" assignTo="{!photoValue}"/>
22 |     <apex:attribute name="SetValueToField"
23 |         description="Attribute that will tell where to put selected value"
24 |             required="true" type="String" assignTo="{!setField}"/>
25 |     <apex:attribute name="FilterOn"
26 |         description="Attribute that will filter the list of records in results"
27 |             type="String" assignTo="{!filters}"/>
28 |     <apex:attribute name="RenderOnComplete"
29 |         description="Attribute that will run an action function/javascript on complete"
30 |             type="String"/>
31 |             
32 |     <!-- body-->
33 |         <div id="{!uniqueComponentId}">
34 |             <div class="slds-spinner_container" style="display:none;" id="loader">
35 |               <div class="slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
36 |                 <div class="slds-spinner__dot-a"></div>
37 |                 <div class="slds-spinner__dot-b"></div>
38 |               </div>
39 |             </div>
40 |             
41 |             <apex:actionFunction name="{!uniqueComponentId}setOwnerId" rerender="random" oncomplete="recordSelected('{!uniqueComponentId}', '{!RenderOnComplete}')">
42 |                 <apex:param name="setId" value="" assignTo="{!SetValueToField}"/>
43 |             </apex:actionFunction>
44 |              <div class="slds-lookup" data-select="single" data-scope="single" data-typeahead="true">
45 |                 <div class="slds-form-element">
46 |                   <label class="slds-form-element__label" for="lookup">{!LabelName}</label>
47 |                   <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
48 |                      
49 |                     <!-- section to display selected record-->
50 |                     <div class="slds-pill_container slds-show" style="display: {!IF(displayValue == null, 'none', 'block')};" id="selected-record">
51 |                       <a href="javascript:void(0)" class="slds-pill">
52 |                         <img src="{!photoUrl}"  class="slds-icon slds-icon-standard-account slds-pill__icon" id="select-image" style="display: {!IF(photoUrl == null, 'none', 'inline')}"/>
53 |                         <span class="slds-pill__label" id="selected-name">{!displayValue}</span>
54 |                         <button type="button" class="slds-button slds-button--icon-bare slds-pill__remove" onclick="removeRecord('{!uniqueComponentId}')">
55 |                           <apex:image url="{!URLFOR(SLDSResourceName, '/assets/icons/utility/close_60.png')}"  styleclass="slds-button__icon"/>
56 |                           <span class="slds-assistive-text">Remove</span>
57 |                         </button>
58 |                       </a>
59 |                     </div>
60 |                     
61 |                     <!-- section to display input field for search-->
62 |                     <div id="input-text" style="display: {!IF(displayValue == null, 'block', 'none')}">
63 |                         <apex:image url="{!URLFOR(SLDSResourceName, '/assets/icons/utility/search_60.png')}"  styleclass="slds-input__icon slds-icon-text-default"/>
64 |                         <input id="lookup" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" 
65 |                             onkeyup="keyPressedOnLookup('{!uniqueComponentId}','{!ObjectApiName}', '{!DisplayFieldApiNames}', '{!DisplayFieldsPattern}','{!Photo}','{!objectLabelPlural}', '{!filters}', '{!$RemoteAction.SLDSDynamicLookupController.search}')" 
66 |                                 placeholder="Search {!objectLabelPlural}"/>
67 |                     </div>
68 |                   </div>
69 |                 </div>
70 |                 
71 |                 <!-- section to display searched results-->
72 |                 <div class="slds-lookup__menu" role="listbox" id="list-box" style="display: none">
73 |                   <div class="slds-lookup__item">
74 |                       <apex:image url="{!URLFOR(SLDSResourceName, '/assets/icons/utility/search_60.png')}" styleClass="slds-icon slds-icon-text-default slds-icon--small" width="20px" height="20px"/>
75 |                       <span id="search-text-info" style="display:inline"></span>
76 |                   </div>
77 |                   <ul class="slds-lookup__list" role="presentation" id="record-list">
78 |                   </ul>
79 |                 </div>
80 |               </div>
81 |          </div>
82 | </apex:component>


--------------------------------------------------------------------------------
/src/classes/SLDSDynamicLookupController.cls:
--------------------------------------------------------------------------------
  1 | public class SLDSDynamicLookupController {
  2 |     /*
  3 |     * public variables
  4 |     **/
  5 |     public String objectName{get;
  6 |         set{
  7 |             if(objectName != value){
  8 |                 objectName = value;
  9 |                 objectLabelPlural = Schema.getGlobalDescribe().get(ObjectName).getDescribe(). getLabelPlural();
 10 |             }
 11 |         }
 12 |         
 13 |     }
 14 |     
 15 |     public String label{
 16 |         get;
 17 |         set{
 18 |             label = value;
 19 |             uniqueComponentId = label.replace(' ', '').toLowerCase();
 20 |         }
 21 |     }
 22 | 
 23 |     public String setField{
 24 |         get;
 25 |         set{
 26 |             if(String.isNotBlank(value)){
 27 |                 setField = value;
 28 |                 if(String.isBlank(photoValue)){
 29 |                     photoValue = '';
 30 |                 }
 31 | 
 32 |                 List<Wrapper> results = search(objectName, fieldApiNames, displayPattern, photoValue, null, value, filters);
 33 |                 
 34 |                 if(!results.isEmpty()){
 35 |                     displayValue = results[0].displayValue;
 36 |                     if(String.isNotBlank(results[0].photoUrl)){
 37 |                         photoUrl = results[0].photoUrl;
 38 |                     }else{
 39 |                         photoUrl = '';
 40 |                     }
 41 |                 }
 42 |             }
 43 |         }
 44 |     }
 45 |     
 46 |     public String uniqueComponentId{get;set;}
 47 |     public String objectLabelPlural{get;set;}
 48 |     public String displayValue{get;set;}
 49 |     public String photoUrl{get;set;}
 50 |     public String fieldApiNames{get;set;}
 51 |     public String displayPattern{get;set;}
 52 |     public String photoValue{get;set;}
 53 |     public String filters{get;set;}
 54 | 
 55 |     /**
 56 | 	 * Remote action method to send list of records
 57 | 	 * @param  searchText 
 58 | 	 * @return  List<Wrapper>
 59 | 	 */
 60 | 	@RemoteAction
 61 | 	public static List<Wrapper> search(String objectName, String displayFieldNames, String fieldsPattern, String photoValue,String searchText, String recordId, String queryFilters) {
 62 | 	    String query;
 63 |         List<String> displayFieldNamesLst;
 64 |         String photoFieldName;
 65 | 	    List<Wrapper> results = new List<Wrapper>();
 66 | 	    String finalQuery;
 67 | 	    String photoToDisplay;
 68 | 	    
 69 |         if(String.isBlank(fieldsPattern)){
 70 |             fieldsPattern = displayFieldNames;
 71 |         }
 72 |         
 73 |         //prepare a where clause
 74 |         displayFieldNamesLst = displayFieldNames.split(',');
 75 |         String whereClause = '';
 76 | 
 77 |         if(String.isBlank(recordId)){
 78 |             for(String fieldName : displayFieldNamesLst){
 79 |                 whereClause += String.isBlank(whereClause) ? ' WHERE ' + fieldName + ' LIKE \'%{text}%\'' : ' OR ' + fieldName + ' LIKE \'%{text}%\'';
 80 |             }
 81 |         }else{
 82 |             whereClause += ' WHERE Id =: recordId';
 83 |         }
 84 | 
 85 |         String filtersClause = createWhereClauseFromFilters(queryFilters);
 86 | 
 87 |         if(String.isNotBlank(filtersClause)){
 88 |             whereClause += ' AND ' + filtersClause;
 89 |         }
 90 | 
 91 |         //add Id field to field names if necessary
 92 |         if(!displayFieldNames.toLowerCase().contains('id')){
 93 |             displayFieldNames += ', Id';
 94 |         }
 95 |         
 96 |         //add photo field if not added
 97 |         if(photoValue.toLowerCase().contains('field')){
 98 |             List<String> photoValueLst = photoValue.split('->');
 99 |             if(photoValueLst.size() > 1 && !displayFieldNames.toLowerCase().contains(photoValueLst[1].toLowerCase())){
100 |                 photoFieldName = photoValueLst[1];
101 |                 displayFieldNames += ', '+photoValueLst[1];
102 |             }
103 |         }else if(photoValue.toLowerCase().contains('url')){
104 |             List<String> photoValueLst = photoValue.split('->');
105 |             if(photoValueLst.size() > 1){
106 |                 photoToDisplay = photoValueLst[1];
107 |             }
108 |         }
109 |         
110 |         query = 'SELECT ' + displayFieldNames + ' FROM ' + objectName + whereClause;
111 | 
112 |         if(String.isBlank(recordId)){
113 |             finalQuery = query.replace('{text}', searchText);
114 |         }else{
115 |             finalQuery = query;
116 |         }
117 | 
118 |         System.debug(':::QUERY:::' + finalQuery);
119 | 	    
120 | 	    for(Sobject sobj : database.query(finalQuery)){
121 | 	        String displayValue = fieldsPattern;
122 | 	        for(String fieldName : displayFieldNamesLst){
123 | 	            String fieldValue = sobj.get(fieldName) == null ? '' : String.valueOf(sobj.get(fieldName));
124 | 	            displayValue = displayValue.replace(fieldName, fieldValue);
125 | 	            if(String.isNotBlank(photoFieldName) && sobj.get(photoFieldName) != null){
126 | 	                photoToDisplay = String.valueOf(sobj.get(photoFieldName));
127 | 	            }
128 | 	        }
129 | 	        results.add(new Wrapper(String.valueOf(sobj.get('Id')), displayValue, photoToDisplay));
130 | 	    }
131 | 	    return results;
132 | 	}
133 | 
134 |     private static String createWhereClauseFromFilters(String queryFilters){
135 |         String filtersClause;
136 |         if(queryFilters != null && String.isNotBlank(queryFilters)){
137 |             String replacedFilters = queryFilters.replace('\\', '');
138 |             filtersClause = String.join(replacedFilters.split(','), ' AND ');
139 |         }
140 |         return filtersClause;
141 |     }	
142 | 	
143 | 	/*************************************************************************
144 | 	 ******************************* WRAPPER **************************************
145 | 	 ****************************************************************************/
146 | 	public class Wrapper{
147 | 	    public Id recordId{get;set;}
148 | 	    public String displayValue{get;set;}
149 | 	    public String photoUrl{get;set;}
150 | 	    public Wrapper(Id recordId, String displayValue, String photoUrl){
151 | 	        this.recordId = recordId;
152 | 	        this.displayValue = displayValue;
153 | 	        this.photoUrl = photoUrl;
154 | 	    }
155 | 	}
156 | }


--------------------------------------------------------------------------------