•  

    Dynamic LookUp Filters based on RecordEdit Form in LWC

    Hi All,

    Today we will learn how to create lookup filters based on record edit form in LWC.The solution is very useful in scenarios where custom lookup Aura components have been developed to achieve similar functionality and can serve as a viable replacement ,thereby avoiding server calls and avoiding several lines of code written on client side to achieve similar functionality.The updated value of look up can be passed via events to calling Aura component if the caller in an Aura componet.Since server calls are no longer required it leads to performance improvement also.

    Author: Somnath Sharma

    Use Case:Build lookup filter which are apex less and capture the new value for use in different business use cases.

     
     
     
     
     
    Component.html
    <!--
    
      @File Name          : lookUpFilterBasedOnRecordEditForms.html
    
      @Description        : 
    
      @Author             : Somnath Sharma
    
      @Group              : 
    
      @Last Modified By   : Somnath Sharma
    
      @Last Modified On   : 2/12/2020, 4:52:54 PM
    
      @Modification Log   : 
    
      Ver       Date            Author                  Modification
    
      1.0    2/12/2020   Somnath Sharma     Initial Version
    
    -->
    
    <template>
    
        <div>
    
            <lightning-record-edit-form object-api-name={objectApiName} onload={handleLoad}>
    
                <lightning-input-field field-name={lookupFieldApi} value={lookupValueDefault} onchange={handleChange}>
    
                </lightning-input-field>
    
            </lightning-record-edit-form>
    
        </div>
    
    </template>
    
    /**
    
     * @File Name          : lookUpFilterBasedOnRecordEditForms.js
    
     * @Description        : 
    
     * @Author             : Somnath Sharma
    
     * @Group              : 
    
     * @Last Modified By   : Somnath Sharma
    
     * @Last Modified On   : 13/2/2020, 11:36:24 pm
    
     * @Modification Log   : 
    
     * Ver       Date            Author                 Modification
    
     * 1.0    2/12/2020   Somnath Sharma     Initial Version
    
     **/
    
    import {
    
        LightningElement,
    
        api
    
    } from 'lwc';
    
    
    export default class LookUpFilterBasedOnRecordEditForms extends LightningElement {
    
    
        //object API name,lookupValueDefault and lookup field name send from calling component.
    
        @api lookupValueDefault = '';
    
        @api objectApiName = '';
    
        @api lookupFieldApi = '';
    
    
        //on change event  to send selected value to calling component
    
        handleChange(event) {
    
    
            window.console.log("You selected value from lookUP LWC---->>>> " + event.detail.value[0]);
    
            let lookUpValues = {
    
                selectedValue: event.detail.value[0],
    
                lookupFieldApi: this.lookupFieldApi
    
            };
    
            const lookUpChangeEvent = new CustomEvent('lookUpChange', {
    
                detail: {
    
                    lookUpValues
    
                },
    
            });
    
            // Fire the custom event
    
            this.dispatchEvent(lookUpChangeEvent);
    
        }
    
    
        handleLoad(event) {
    
            //details coming on the load of form
    
            // The LDS will take a few seconds to load the component.
    
            const recUi = event.detail;
    
            //  window.console.log("OnLoadData-", JSON.stringify(recUi));
    
        }
    }
    
    <?xml version="1.0" encoding="UTF-8"?>
    
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    
        <apiVersion>47.0</apiVersion>
    
        <isExposed>false</isExposed>
    
    </LightningComponentBundle>
    
    OnLoad JSON:
    The onload JSON which contains the entire object metadata,which can be used for various use cases such as auto population,or segregation of logic based on record type info and so on.In the end all I can say is please assess the use of this component in your business use cases based on paramters such as the extent of developmnt effort required to achieve a similar functionality without the use of recordEditForms vs the performance aspect of the component.
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     

     

     

     

Comments

  •  
    icon

    Sumit Mishra says (Jun 10, 2020):

    nice one ... thanks

Post Comments