Skip to content

Instantly share code, notes, and snippets.

@JitendraZaa

JitendraZaa/Lookup.cmp.html

Last active January 18, 2020 07:02
Show Gist options
  • Save JitendraZaa/6b82ee00c45a4b1b66093966c5e6583b to your computer and use it in GitHub Desktop.
Save JitendraZaa/6b82ee00c45a4b1b66093966c5e6583b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JitendraZaa revised this gist Jul 6, 2017. 1 changed file with 12 additions and 6 deletions.
    18 changes: 12 additions & 6 deletions Lookup.cmp.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,12 +5,18 @@

    <aura:attribute name="lookupIcon" type="String" access="public" default="standard:contact"/>

    <aura:attribute name="objectName" type="String" access="public" description="Name of Object to be searched"/>
    <aura:attribute name="field_API_text" type="String" access="public" description="API Name of field, to be used to show text"/>
    <aura:attribute name="field_API_val" type="String" access="public" description="API Name of field, to be returned from component"/>
    <aura:attribute name="field_API_search" type="String" access="public" description="API Name of field to be searched"/>
    <aura:attribute name="limit" type="Integer" access="public" default="5" description="Total number of record to be returned"/>
    <aura:attribute name="placeholder" type="String" access="public" default="Space character is used to search" />
    <aura:attribute name="objectName" type="String" access="public"
    description="Name of Object to be searched"/>
    <aura:attribute name="field_API_text" type="String" access="public"
    description="API Name of field, to be used to show text"/>
    <aura:attribute name="field_API_val" type="String" access="public"
    description="API Name of field, to be returned from component"/>
    <aura:attribute name="field_API_search" type="String" access="public"
    description="API Name of field to be searched"/>
    <aura:attribute name="limit" type="Integer" access="public" default="5"
    description="Total number of record to be returned"/>
    <aura:attribute name="placeholder" type="String" access="public"
    default="Space character is used to search" />

    <aura:attribute name="last_SearchText" type="String" access="private" />
    <aura:attribute name="last_ServerResult" type="object[]" access="private" />
  2. JitendraZaa revised this gist Jul 6, 2017. 1 changed file with 16 additions and 7 deletions.
    23 changes: 16 additions & 7 deletions Lookup.cmp.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    <aura:component controller="Lookup">
    <aura:attribute Name="selItem" type="object" access="public" description="This attribute can be used by parent component to read selected record"/>
    <aura:attribute Name="selItem" type="object" access="public"
    description="This attribute can be used by parent component to read selected record"/>
    <aura:attribute Name="server_result" type="object[]" access="private" />

    <aura:attribute name="lookupIcon" type="String" access="public" default="standard:contact"/>
    @@ -30,12 +31,16 @@
    onkeyup="{!c.serverCall}" />
    <aura:set attribute="else">
    <span class="slds-pill slds-pill_link fullWidth">
    <a href="javascript:void(0);" class="slds-pill__action slds-p-left_x-small" title="{#v.selItem.text}">
    <a href="javascript:void(0);"
    class="slds-pill__action slds-p-left_x-small" title="{#v.selItem.text}">
    <lightning:icon iconName="{#v.lookupIcon}" size="x-small"/>
    <span class="slds-pill__label slds-p-left_x-small">{#v.selItem.text}</span>
    </a>
    <button onclick="{!c.clearSelection}" class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove">
    <lightning:icon iconName="utility:close" size="small" alternativeText="Press delete or backspace to remove"/>
    <button onclick="{!c.clearSelection}"
    class="slds-button slds-button_icon slds-button_icon slds-pill__remove"
    title="Remove">
    <lightning:icon iconName="utility:close" size="small"
    alternativeText="Press delete or backspace to remove"/>
    <span class="slds-assistive-text" >Remove</span>
    </button>
    </span>
    @@ -48,9 +53,11 @@
    <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation"
    style="display: block; min-width: auto; max-width: 100% ; width: 100%;">
    <aura:iteration items="{!v.server_result}" var="item" indexVar="i">
    <li role="presentation" class="slds-listbox__item" data-selectedIndex="{#i}" onclick="{!c.itemSelected}">
    <li role="presentation" class="slds-listbox__item" data-selectedIndex="{#i}"
    onclick="{!c.itemSelected}">
    <span id="{#'listbox-option-unique-id-'+i+1}"
    class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
    class="slds-media slds-listbox__option slds-listbox__option_entity
    slds-listbox__option_has-meta"
    role="option">
    <span class="slds-media__figure optionIcon">
    <span class="slds-icon_container" >
    @@ -59,7 +66,9 @@
    </span>
    </span>
    <span class="slds-media__body singleRow">
    <span class="optionTitle slds-listbox__option-text slds-listbox__option-text_entity">{#item.text}</span>
    <span
    class="optionTitle slds-listbox__option-text
    slds-listbox__option-text_entity">{#item.text}</span>
    </span>
    </span>
    </li>
  3. JitendraZaa revised this gist Jul 5, 2017. No changes.
  4. JitendraZaa revised this gist Jul 5, 2017. 1 changed file with 13 additions and 5 deletions.
    18 changes: 13 additions & 5 deletions LookupHelper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,11 @@
    if(SelIndex){
    var serverResult = component.get("v.server_result");
    var selItem = serverResult[SelIndex];
    component.set("v.last_ServerResult",serverResult);
    component.set("v.server_result",null);
    component.set("v.selItem",selItem);
    if(selItem.val){
    component.set("v.selItem",selItem);
    component.set("v.last_ServerResult",serverResult);
    }
    component.set("v.server_result",null);
    }
    },
    serverCall : function(component, event, helper) {
    @@ -54,8 +56,14 @@
    handleResponse : function (res,component,helper){
    if (res.getState() === 'SUCCESS') {
    var retObj = JSON.parse(res.getReturnValue());
    component.set("v.server_result",retObj);
    component.set("v.last_ServerResult",retObj);
    if(retObj.length <= 0){
    var noResult = JSON.parse('[{"text":"No Results Found"}]');
    component.set("v.server_result",noResult);
    component.set("v.last_ServerResult",noResult);
    }else{
    component.set("v.server_result",retObj);
    component.set("v.last_ServerResult",retObj);
    }
    }else if (res.getState() === 'ERROR'){
    var errors = res.getError();
    if (errors) {
  5. JitendraZaa revised this gist Jul 5, 2017. No changes.
  6. JitendraZaa revised this gist Jul 5, 2017. No changes.
  7. JitendraZaa revised this gist Jul 5, 2017. No changes.
  8. JitendraZaa revised this gist Jul 5, 2017. 1 changed file with 0 additions and 103 deletions.
    103 changes: 0 additions & 103 deletions LookupDemo.cmp.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,103 +0,0 @@
    <aura:component >
    <aura:attribute Name="selItem" type="object" access="public" />
    <aura:attribute Name="selItem1" type="object" access="public" />
    <aura:attribute Name="selItem2" type="object" access="public" />
    <aura:attribute Name="selItem3" type="object" access="public" />
    <div class="slds">
    <div class="slds-grid slds-wrap">
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Opportunity"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:opportunity"
    selItem="{!v.selItem}"
    placeholder="Enter space after text to search Opportunities"
    />

    <aura:if isTrue="{! not(empty(v.selItem)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem.val} <br />
    Text - {#v.selItem.text}<br />
    Object - {#v.selItem.objName}
    </aura:if>
    </div>
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Lead"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:lead"
    selItem="{!v.selItem1}"
    placeholder="Enter space after text to search Leads
    "/>

    <aura:if isTrue="{! not(empty(v.selItem1)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem1.val} <br />
    Text - {#v.selItem1.text}<br />
    Object - {#v.selItem1.objName}
    </aura:if>
    </div>
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Account"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:account"
    selItem="{!v.selItem2}"
    placeholder="Enter space after text to search Accounts"
    />

    <aura:if isTrue="{! not(empty(v.selItem2)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem2.val} <br />
    Text - {#v.selItem2.text}<br />
    Object - {#v.selItem2.objName}
    </aura:if>
    </div>
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Contact"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:contact"
    selItem="{!v.selItem3}"
    placeholder="Enter space after text to search Contacts"
    />

    <aura:if isTrue="{! not(empty(v.selItem3)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem3.val} <br />
    Text - {#v.selItem3.text}<br />
    Object - {#v.selItem3.objName}
    </aura:if>
    </div>
    </div>
    </div>

    </aura:component>
  9. JitendraZaa revised this gist Jul 5, 2017. 2 changed files with 0 additions and 10 deletions.
    5 changes: 0 additions & 5 deletions Lookup.cmp-meta.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +0,0 @@
    <?xml version="1.0" encoding="UTF-8"?>
    <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>39.0</apiVersion>
    <description>Lookup Component in LEX</description>
    </AuraDefinitionBundle>
    5 changes: 0 additions & 5 deletions LookupDemo.cmp-meta.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +0,0 @@
    <?xml version="1.0" encoding="UTF-8"?>
    <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>40.0</apiVersion>
    <description>A Lightning Component Bundle</description>
    </AuraDefinitionBundle>
  10. JitendraZaa revised this gist Jul 5, 2017. 3 changed files with 106 additions and 24 deletions.
    5 changes: 3 additions & 2 deletions Lookup.cmp.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,8 @@
    <aura:attribute name="field_API_val" type="String" access="public" description="API Name of field, to be returned from component"/>
    <aura:attribute name="field_API_search" type="String" access="public" description="API Name of field to be searched"/>
    <aura:attribute name="limit" type="Integer" access="public" default="5" description="Total number of record to be returned"/>

    <aura:attribute name="placeholder" type="String" access="public" default="Space character is used to search" />

    <aura:attribute name="last_SearchText" type="String" access="private" />
    <aura:attribute name="last_ServerResult" type="object[]" access="private" />

    @@ -25,7 +26,7 @@
    <input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id"
    aria-activedescendant="listbox-option-unique-id-01" aria-autocomplete="list"
    aria-controls="listbox-unique-id" autocomplete="off" role="combobox"
    placeholder="Search Salesforce after space character"
    placeholder="{!v.placeholder}"
    onkeyup="{!c.serverCall}" />
    <aura:set attribute="else">
    <span class="slds-pill slds-pill_link fullWidth">
    22 changes: 0 additions & 22 deletions LookupDemo.cmp
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +0,0 @@
    <aura:component >
    <aura:attribute Name="selItem" type="object" access="public" />
    <div >
    <c:Lookup objectName="lead"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:lead"
    aura:id="lookup1"
    selItem="{!v.selItem}" />

    <aura:if isTrue="{! not(empty(v.selItem)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem.val} <br />
    Text - {#v.selItem.text}<br />
    Object - {#v.selItem.objName}
    </aura:if>
    </div>
    </aura:component>
    103 changes: 103 additions & 0 deletions LookupDemo.cmp.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    <aura:component >
    <aura:attribute Name="selItem" type="object" access="public" />
    <aura:attribute Name="selItem1" type="object" access="public" />
    <aura:attribute Name="selItem2" type="object" access="public" />
    <aura:attribute Name="selItem3" type="object" access="public" />
    <div class="slds">
    <div class="slds-grid slds-wrap">
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Opportunity"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:opportunity"
    selItem="{!v.selItem}"
    placeholder="Enter space after text to search Opportunities"
    />

    <aura:if isTrue="{! not(empty(v.selItem)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem.val} <br />
    Text - {#v.selItem.text}<br />
    Object - {#v.selItem.objName}
    </aura:if>
    </div>
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Lead"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:lead"
    selItem="{!v.selItem1}"
    placeholder="Enter space after text to search Leads
    "/>

    <aura:if isTrue="{! not(empty(v.selItem1)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem1.val} <br />
    Text - {#v.selItem1.text}<br />
    Object - {#v.selItem1.objName}
    </aura:if>
    </div>
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Account"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:account"
    selItem="{!v.selItem2}"
    placeholder="Enter space after text to search Accounts"
    />

    <aura:if isTrue="{! not(empty(v.selItem2)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem2.val} <br />
    Text - {#v.selItem2.text}<br />
    Object - {#v.selItem2.objName}
    </aura:if>
    </div>
    <div class="slds-size_1-of-1
    slds-small-size_1-of-1
    slds-medium-size_1-of-2
    slds-large-size_1-of-4 ">
    <c:Lookup objectName="Contact"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:contact"
    selItem="{!v.selItem3}"
    placeholder="Enter space after text to search Contacts"
    />

    <aura:if isTrue="{! not(empty(v.selItem3)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem3.val} <br />
    Text - {#v.selItem3.text}<br />
    Object - {#v.selItem3.objName}
    </aura:if>
    </div>
    </div>
    </div>

    </aura:component>
  11. JitendraZaa renamed this gist Jul 5, 2017. 1 changed file with 0 additions and 0 deletions.
    0 Lookup.cmp → Lookup.cmp.html
    View file
    File renamed without changes.
  12. JitendraZaa revised this gist Jul 5, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion LookupHelper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@
    var searchText = target.value;
    var last_SearchText = component.get("v.last_SearchText");
    //Escape button pressed
    if (event.keyCode == 27) {
    if (event.keyCode == 27 || !searchText.trim()) {
    helper.clearSelection(component, event, helper);
    }else if(searchText.trim() != last_SearchText && /\s+$/.test(searchText) ){
    //Save server call, if last text not changed
  13. JitendraZaa renamed this gist Jul 5, 2017. 1 changed file with 0 additions and 0 deletions.
    0 Lookup.cmp → Lookup.cmp.html
    View file
    File renamed without changes.
  14. JitendraZaa revised this gist Jul 5, 2017. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion temp
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    temp
  15. JitendraZaa revised this gist Jul 5, 2017. 7 changed files with 0 additions and 0 deletions.
    0 Lookup/Lookup.cmp → Lookup.cmp
    View file
    File renamed without changes.
    0 Lookup/Lookup.cmp-meta.xml → Lookup.cmp-meta.xml
    View file
    File renamed without changes.
    0 Lookup/Lookup.css → Lookup.css
    View file
    File renamed without changes.
    0 Lookup/LookupController.js → LookupController.js
    View file
    File renamed without changes.
    0 LookupDemo/LookupDemo.cmp → LookupDemo.cmp
    View file
    File renamed without changes.
    0 LookupDemo/LookupDemo.cmp-meta.xml → LookupDemo.cmp-meta.xml
    View file
    File renamed without changes.
    0 Lookup/LookupHelper.js → LookupHelper.js
    View file
    File renamed without changes.
  16. JitendraZaa revised this gist Jul 5, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions temp
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    temp
  17. JitendraZaa revised this gist Jul 5, 2017. 2 changed files with 1 addition and 1 deletion.
    1 change: 0 additions & 1 deletion Lookup
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    Lookupgist
    1 change: 1 addition & 0 deletions temp
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    temp
  18. JitendraZaa revised this gist Jul 5, 2017. 8 changed files with 241 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Lookup
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    Lookupgist
    74 changes: 74 additions & 0 deletions Lookup/Lookup.cmp
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    <aura:component controller="Lookup">
    <aura:attribute Name="selItem" type="object" access="public" description="This attribute can be used by parent component to read selected record"/>
    <aura:attribute Name="server_result" type="object[]" access="private" />

    <aura:attribute name="lookupIcon" type="String" access="public" default="standard:contact"/>

    <aura:attribute name="objectName" type="String" access="public" description="Name of Object to be searched"/>
    <aura:attribute name="field_API_text" type="String" access="public" description="API Name of field, to be used to show text"/>
    <aura:attribute name="field_API_val" type="String" access="public" description="API Name of field, to be returned from component"/>
    <aura:attribute name="field_API_search" type="String" access="public" description="API Name of field to be searched"/>
    <aura:attribute name="limit" type="Integer" access="public" default="5" description="Total number of record to be returned"/>

    <aura:attribute name="last_SearchText" type="String" access="private" />
    <aura:attribute name="last_ServerResult" type="object[]" access="private" />

    <div class="slds">
    <div class="slds-form-element">
    <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-has-inline-listbox">
    <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"
    aria-expanded="true" aria-haspopup="listbox" role="combobox" style="width:95%">
    <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
    <div>
    <aura:if isTrue="{! empty(v.selItem) }">
    <input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id"
    aria-activedescendant="listbox-option-unique-id-01" aria-autocomplete="list"
    aria-controls="listbox-unique-id" autocomplete="off" role="combobox"
    placeholder="Search Salesforce after space character"
    onkeyup="{!c.serverCall}" />
    <aura:set attribute="else">
    <span class="slds-pill slds-pill_link fullWidth">
    <a href="javascript:void(0);" class="slds-pill__action slds-p-left_x-small" title="{#v.selItem.text}">
    <lightning:icon iconName="{#v.lookupIcon}" size="x-small"/>
    <span class="slds-pill__label slds-p-left_x-small">{#v.selItem.text}</span>
    </a>
    <button onclick="{!c.clearSelection}" class="slds-button slds-button_icon slds-button_icon slds-pill__remove" title="Remove">
    <lightning:icon iconName="utility:close" size="small" alternativeText="Press delete or backspace to remove"/>
    <span class="slds-assistive-text" >Remove</span>
    </button>
    </span>
    </aura:set>
    </aura:if>
    </div>
    </div>
    <aura:if isTrue="{! greaterthanorequal(v.server_result.length,1) }">
    <div id="listbox-unique-id" role="listbox">
    <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation"
    style="display: block; min-width: auto; max-width: 100% ; width: 100%;">
    <aura:iteration items="{!v.server_result}" var="item" indexVar="i">
    <li role="presentation" class="slds-listbox__item" data-selectedIndex="{#i}" onclick="{!c.itemSelected}">
    <span id="{#'listbox-option-unique-id-'+i+1}"
    class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
    role="option">
    <span class="slds-media__figure optionIcon">
    <span class="slds-icon_container" >
    <lightning:icon iconName="{#v.lookupIcon}" size="small"/>
    <span class="slds-assistive-text">{#v.objectName}</span>
    </span>
    </span>
    <span class="slds-media__body singleRow">
    <span class="optionTitle slds-listbox__option-text slds-listbox__option-text_entity">{#item.text}</span>
    </span>
    </span>
    </li>
    </aura:iteration>
    </ul>
    </div>
    </aura:if>
    </div>
    </div>
    </div>
    </div>
    </div>
    </aura:component>
    5 changes: 5 additions & 0 deletions Lookup/Lookup.cmp-meta.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <?xml version="1.0" encoding="UTF-8"?>
    <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>39.0</apiVersion>
    <description>Lookup Component in LEX</description>
    </AuraDefinitionBundle>
    43 changes: 43 additions & 0 deletions Lookup/Lookup.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    .THIS{
    width:99%;
    }
    .THIS .fullWidth{
    width:100%;
    }
    .THIS .slds-listbox__item:hover {
    background: #d8edff;
    text-shadow: none;
    color: #16325c;
    }

    .THIS .optionParent1{
    line-height: 1.5;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    }

    .THIS .optionIcon {
    margin-top: 0.50rem;
    }

    .THIS .optionTitle{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-bottom: 0.125rem;
    }

    .THIS .optionline{
    display: block;
    margin-top: -0.25rem;
    color: #54698d;
    }
    .THIS .singleRow{
    padding-top:5px;
    }

    .THIS .hide{
    display:none;
    }
    11 changes: 11 additions & 0 deletions Lookup/LookupController.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    ({
    itemSelected : function(component, event, helper) {
    helper.itemSelected(component, event, helper);
    },
    serverCall : function(component, event, helper) {
    helper.serverCall(component, event, helper);
    },
    clearSelection : function(component, event, helper){
    helper.clearSelection(component, event, helper);
    }
    })
    81 changes: 81 additions & 0 deletions Lookup/LookupHelper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    ({
    itemSelected : function(component, event, helper) {
    var target = event.target;
    var SelIndex = helper.getIndexFrmParent(target,helper,"data-selectedIndex");
    if(SelIndex){
    var serverResult = component.get("v.server_result");
    var selItem = serverResult[SelIndex];
    component.set("v.last_ServerResult",serverResult);
    component.set("v.server_result",null);
    component.set("v.selItem",selItem);
    }
    },
    serverCall : function(component, event, helper) {
    var target = event.target;
    var searchText = target.value;
    var last_SearchText = component.get("v.last_SearchText");
    //Escape button pressed
    if (event.keyCode == 27) {
    helper.clearSelection(component, event, helper);
    }else if(searchText.trim() != last_SearchText && /\s+$/.test(searchText) ){
    //Save server call, if last text not changed
    //Search only when space character entered

    var objectName = component.get("v.objectName");
    var field_API_text = component.get("v.field_API_text");
    var field_API_val = component.get("v.field_API_val");
    var field_API_search = component.get("v.field_API_search");
    var limit = component.get("v.limit");

    var action = component.get('c.searchDB');
    action.setStorable();

    action.setParams({
    objectName : objectName,
    fld_API_Text : field_API_text,
    fld_API_Val : field_API_val,
    lim : limit,
    fld_API_Search : field_API_search,
    searchText : searchText
    });

    action.setCallback(this,function(a){
    this.handleResponse(a,component,helper);
    });

    component.set("v.last_SearchText",searchText.trim());
    console.log('Server call made');
    $A.enqueueAction(action);
    }else if(searchText && last_SearchText && searchText.trim() == last_SearchText.trim()){
    component.set("v.server_result",component.get("v.last_ServerResult"));
    console.log('Server call saved');
    }
    },
    handleResponse : function (res,component,helper){
    if (res.getState() === 'SUCCESS') {
    var retObj = JSON.parse(res.getReturnValue());
    component.set("v.server_result",retObj);
    component.set("v.last_ServerResult",retObj);
    }else if (res.getState() === 'ERROR'){
    var errors = res.getError();
    if (errors) {
    if (errors[0] && errors[0].message) {
    alert(errors[0].message);
    }
    }
    }
    },
    getIndexFrmParent : function(target,helper,attributeToFind){
    //User can click on any child element, so traverse till intended parent found
    var SelIndex = target.getAttribute(attributeToFind);
    while(!SelIndex){
    target = target.parentNode ;
    SelIndex = helper.getIndexFrmParent(target,helper,attributeToFind);
    }
    return SelIndex;
    },
    clearSelection: function(component, event, helper){
    component.set("v.selItem",null);
    component.set("v.server_result",null);
    }
    })
    22 changes: 22 additions & 0 deletions LookupDemo/LookupDemo.cmp
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <aura:component >
    <aura:attribute Name="selItem" type="object" access="public" />
    <div >
    <c:Lookup objectName="lead"
    field_API_text="Name"
    field_API_val="Id"
    limit="4"
    field_API_search="Name"
    lookupIcon="standard:lead"
    aura:id="lookup1"
    selItem="{!v.selItem}" />

    <aura:if isTrue="{! not(empty(v.selItem)) }">
    <br />
    This is Parent Lightning component <br />
    Item Selected : <br />
    ID - {#v.selItem.val} <br />
    Text - {#v.selItem.text}<br />
    Object - {#v.selItem.objName}
    </aura:if>
    </div>
    </aura:component>
    5 changes: 5 additions & 0 deletions LookupDemo/LookupDemo.cmp-meta.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <?xml version="1.0" encoding="UTF-8"?>
    <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>40.0</apiVersion>
    <description>A Lightning Component Bundle</description>
    </AuraDefinitionBundle>
  19. JitendraZaa created this gist Jul 5, 2017.
    1 change: 1 addition & 0 deletions Lookup
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Lookupgist