LWC Lookup Filter based on Account Lookup

Question

I am looking for a way to limit the contact lookup field to only contacts that are associated with that account. I need the same thing for the asset, but what I get for contact I can make work for the asset.

So basic HTML structure:

<lightning-record-edit-form recor-id={recordId}
        <div class="slds-grid slds-gutters">
            <div class="slds-col" style="width:100%">
                <lightning-input-field field-name="AccountId" required>
                </lightning-input-field>
            </div>
            <div class="slds-col" style="width:100%">
                <lightning-input-field field-name="AssetId" required>
                </lightning-input-field>
            </div>
        </div>
        <div class="slds-grid slds-gutters">
            <div class="slds-col" style="width:100%">
                <template if:false={showAddContact}>
                    <lightning-input-field field-name="ContactId" required>
                    </lightning-input-field>
                </template>
            </div>
         </div>

How do I get the contact lookup to only show what is associated with that account?

--------------------- UPDATED --------------------------

LookupController Class I have attempted to put in the AccountId but nothing seems to work with the variable. If I hardcode the contacts get pulled up.

The second part of this is I can't figure out how to pass in the new array of contacts to a lookup component so the user can search out of those specific contacts.

public with sharing class LookupController {
    @AuraEnabled(cacheable=true)
    public static List<Object> getRecordsByName(String objectName, String searchFor, String accountId) {
        String queryString = 'SELECT Id, Name FROM ';
        queryString += String.escapeSingleQuotes(objectName) + ' WHERE Name Like \'%' + String.escapeSingleQuotes(searchFor) + '%\'' + ' AND AccountId = \'' + String.escapeSingleQuotes(accountId) + '\'';
        return Database.query(queryString);
    }
}

JS Code

    @wire(getContactRecords, { searchKey: '$searchKey', accountId: '$accountId'})
    contacts;

    handleOnLoad(event) {
       if (this.loadedForm == false) {
            this.accountId = this.record.data.fields.AccountId.value;

            if (this.accountId != null) {
                this.contact = {Name : event.detail.Name, Id: event.detail.Id, accountId: this.accountId}
            } else {
                // Do nothing
            }
        }

    }

Answer 1

You won't be able to do this using the single form here without an ID being saved on the record. This is assuming that there is a filter set on the ContactId field to filter where AccountId == (your record).AccountId. These filters will not apply on the lightning-record-edit-form | lightning-record-form prior to the value being present on the record being presented on the form. You will need to do something custom for those cases to return the filtered list for selection, possibly a custom search component who's return value will be applied to the value on the form.

simple solution would be to make the custom search component, set the value in your controller via CustomEvent and use that value to populate your ContactId field. Your field will be able to see the value if you do this:

<lightning-input-field field-name="ContactId" value={jsValue} ></lightning-input-field>

in your JS:

@track jsValue;

handleSetMyJsValue( event ){
   this.jsValue = event && event.detail && event.detail.value;
}

Event in custom component:

this.dispatchEvent( new CustomEvent( 'completed', {
   bubbles: false,
   cancelable : false,
   detail: {
     value: "some value you selected in your search..."
   }
});

then just set the oncompleted={handleSetMyJsValue} wherever you use that component on your form. and you would render your custom component and lightning-input-field based on that value.

<lightning-input-field field-name="ContactId" if:true={jsValue} value={jsValue} ></lightning-input-field>

<c-some-custom-search-component if:false={jsValue} oncompleted={handleSetMyJsValue} filter-id={myAccountId} ></c-some-custom-search-component>

How you pursue building that component is on you. but i have done similar for this same case in the past and this has worked out to set a value based on those filters. You can supply the Id from the account field to filter and store it on the other component to help your filter and then use a wire search to get your results.

All in all, you have some work ahead of you to get that to filter without having custom lookup filters in place, and also for cases where the record hasn't a value yet stored. You would not want to have your users save more than 1 time to set the value, so this would solve that case for you as well.

I hope it helps.