Custom Lookup Component in LWC
9:51 PMBelow is a reusable custom lookup component. The standard lookup component usage is advised, but if you need to bypass the current user's sharing and security or you need more flexibility then use this custom approach. This code is adapted from the above reference.
STEP 1:
Create the Apex Class Lookup, and the LWC component customLookup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .pillSize{ | |
| width : 100% | |
| } | |
| lightning-radio-group .slds-radio_faux { | |
| margin-right: 10px; | |
| } | |
| .slds-modal__content{ | |
| overflow: initial; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div> | |
| <div class="slds-form-element"> | |
| <div class="slds-form-element__control"> | |
| <div class="slds-combobox_container"> | |
| <div id="box" class={boxClass} aria-expanded="true" aria-haspopup="listbox" role="combobox"> | |
| <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none"> | |
| <template if:true={isValueSelected}> | |
| <div id="lookup-pill" class="slds-pill-container"> | |
| <lightning-pill class="pillSize" label={selectedName} name={selectedName} onremove={handleRemovePill} href={href}> | |
| <lightning-icon icon-name={iconName} alternative-text="acc" ></lightning-icon> | |
| </lightning-pill> | |
| </div> | |
| </template> | |
| <template if:false={isValueSelected}> | |
| <div class="slds-p-top_none"> | |
| <lightning-input class={inputClass} type="search" id="input" value={searchTerm} | |
| onclick={handleClick} onblur={onBlur} onchange={onChange} | |
| variant="label-hidden" autocomplete="off" placeholder={searchPlaceholder}> | |
| </lightning-input> | |
| </div> | |
| </template> | |
| </div> | |
| <div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox"> | |
| <ul class="slds-listbox slds-listbox_vertical" role="presentation"> | |
| <template for:each={records} for:item="record"> | |
| <li key={record.Id} onclick={onSelect} data-id={record.Id} role="presentation" data-name={record.Name}> | |
| <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option"> | |
| <lightning-icon class="slds-icon slds-icon--small slds-icon-text-default" icon-name={iconName} alternative-text={objName} size="small"></lightning-icon> | |
| <span class="slds-truncate">{record.Name}</span> | |
| </span> | |
| </li> | |
| </template> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import lookUp from '@salesforce/apex/Lookup.search'; | |
| import { api, LightningElement, track, wire } from 'lwc'; | |
| export default class customLookUp extends LightningElement { | |
| @api objName; | |
| @api iconName; | |
| @api filter = ''; | |
| @api searchPlaceholder='Search'; | |
| @track selectedName; | |
| @track records; | |
| @track isValueSelected; | |
| @track blurTimeout; | |
| searchTerm; | |
| //css | |
| @track boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus'; | |
| @track inputClass = ''; | |
| @wire(lookUp, {searchTerm : '$searchTerm', myObject : '$objName', filter : '$filter'}) | |
| wiredRecords({ error, data }) { | |
| if (data) { | |
| this.error = undefined; | |
| this.records = data; | |
| } else if (error) { | |
| this.error = error; | |
| this.records = undefined; | |
| } | |
| } | |
| handleClick() { | |
| this.searchTerm = ''; | |
| this.inputClass = 'slds-has-focus'; | |
| this.boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus slds-is-open'; | |
| } | |
| onBlur() { | |
| this.blurTimeout = setTimeout(() => {this.boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus'}, 300); | |
| } | |
| onSelect(event) { | |
| let selectedId = event.currentTarget.dataset.id; | |
| let selectedName = event.currentTarget.dataset.name; | |
| const valueSelectedEvent = new CustomEvent('lookupselected', {detail: selectedId }); | |
| this.dispatchEvent(valueSelectedEvent); | |
| this.isValueSelected = true; | |
| this.selectedName = selectedName; | |
| if(this.blurTimeout) { | |
| clearTimeout(this.blurTimeout); | |
| } | |
| this.boxClass = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus'; | |
| } | |
| handleRemovePill() { | |
| this.isValueSelected = false; | |
| } | |
| onChange(event) { | |
| this.searchTerm = event.target.value; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public without sharing class Lookup { | |
| @AuraEnabled(cacheable=true) | |
| public static List<sObject> search(String searchTerm, string myObject, String filter) { | |
| String myQuery = null; | |
| if(filter != null && filter != ''){ | |
| myQuery = 'Select Id, Name from '+myObject+' Where Name Like \'%' + searchTerm + '%\' AND '+filter+' LIMIT 5'; | |
| } | |
| else { | |
| if(searchTerm == null || searchTerm == ''){ | |
| myQuery = 'Select Id, Name from '+myObject+' Where LastViewedDate != NULL ORDER BY LastViewedDate DESC LIMIT 5'; | |
| } | |
| else { | |
| myQuery = 'Select Id, Name from '+myObject+' Where Name Like \'%' + searchTerm + '%\' LIMIT 5'; | |
| } | |
| } | |
| List<sObject> lookUpList = database.query(myQuery); | |
| return lookUpList; | |
| } | |
| } |
STEP 2:
Implement the customLookup component created above, as shown in the example below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <c-custom-lookup obj-name="Account" search-placeholder="Search Accounts" icon-name="standard:account" onlookupselected={handleAccountSelection}> </c-custom-lookup> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {LightningElement} from 'lwc'; | |
| export default class CustomLookupExample extends LightningElement { | |
| handleAccountSelection(event){ | |
| console.log("the selected record id is"+event.detail); | |
| } | |
| } |
8 comments
If I remove limits if displaying records then it shows multiple records in the result which is fine but it dropdown gets disappear due to which I can not scroll all the records which is available in the list. Could you please help?
ReplyDeletethe SalesForce application, be automatically logged into the LMS, and presented with its starting page. Of course, you need to consider user password security here. And this again depends on the LMS. It may use a generic password for all users connecting through a single-sign-on procedure, or an MD5 hash (or similar encryption technique) of previously agreed data, which could be verified against each user's specific LMS data for authentication. Salesforce training in Chennai
ReplyDeleteThanks for the working solution!
ReplyDeleteBaccarat is actually money making and it's remarkable accessibility. Optimal In your case it's readily available that you will find pretty fascinating choices. And that is thought to be one thing that is really different And it's very something that is really prepared to hit with Pretty much the most wonderful, as well, is actually a really positive option. Furthermore, it's a really fascinating solution. It is a better way which can make money. Superbly prepar The number of best-earning baccarat will be the accessibility of generting the most money. Pretty much as practical is very well suited for you A substitute that could be assured. To a wide range of accessibility and performance And find out outstanding results also.บาคาร่า
ReplyDeleteufa
ufabet
แทงบอล
แทงบอล
แทงบอล
Do you have test class for this apex method?
ReplyDeleteHi,
DeleteHave you got the test class for this apex method?
This is an amazing website, I really enjoyed your articles. Helpful and interesting too. Wow, such a great blog site… Wow, such a great blog site... Turkey Visa Express Application system takes only 5 minutes to implement and Turkey travel sends to your email within 30 minutes. Foreign citizens can fill the online visa application form Turkey to enter the country.
ReplyDeleteThank you for sharing.
ReplyDelete