Lightning Web Component (LWC): How to add a standard lookup field
9:13 PM
Adding a standard Lookup component:
In this example we use the lighting record-edit-form to add the standard lookup component to a Lightning Web Component (LWC).
This file contains hidden or 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
| <!-- Lookup Example --> | |
| <template> | |
| <div class="slds-box slds-p-top_small" style="background-color: white;"> | |
| <lightning-record-edit-form object-api-name="Contact" id="createContactForm" > | |
| <lightning-input-field field-name="AccountId" variant="label-hidden" onchange={handleAccountSelection} required> </lightning-input-field> | |
| </lightning-record-edit-form> | |
| </div> | |
| </template> |
This file contains hidden or 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 LookupExample extends LightningElement { | |
| selectedAccount; | |
| handleAccountSelection(event){ | |
| this.selectedAccount = event.target.value; | |
| alert("The selected Accout id is"+this.selectedAccount); | |
| } | |
| } |
This file contains hidden or 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
| <?xml version="1.0" encoding="UTF-8"?> | |
| <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | |
| <apiVersion>47.0</apiVersion> | |
| <description>Lookup Example</description> | |
| <isExposed>true</isExposed> | |
| <targets> | |
| <target>lightning__AppPage</target> | |
| <target>lightning__RecordPage</target> | |
| <target>lightning__HomePage</target> | |
| </targets> | |
| <masterLabel>Lookup Example</masterLabel> | |
| </LightningComponentBundle> |
4 comments
Can we get value of name and other fields of account object. Thanks
ReplyDeleteThis is very helpful thanks !!
ReplyDeleteBut this is not providing a Functionality to create a New record on the fly.
ReplyDeleteYeah , It should Provide a Functionality to Add new Record and it should display the reference of new Record on Lookup Field , after the record is created.
Delete