Related List Card with Filter and Inline editing using Lightning Web Component in Salesforce

1. Enter API Name of the child object in Object Name
2. Parent Field API Name should be the lookup or master-detail field API Name.
3. Filed Name is the API Name of the Field to filter.

    <lightning-card title={strTitle} icon-name="standard:record">    
        <div class="slds-m-around_medium">  
              <div if:true={}>    
                <template for:each={} for:item="rec">      
                    <div key={rec.Id} class="slds-box">    
                        <lightning-record-form record-id={rec.Id}   

import { LightningElement, api, wire } from 'lwc';  
import fetchRecords from '@salesforce/apex/RelatedListController.fetchRecords';  
export default class RelatedList extends LightningElement {  
    @api objectName;  
    @api fieldName;  
    @api fieldValue;  
    @api parentFieldAPIName;  
    @api recordId;  
    @api strTitle;  
    @api filterType;  
    @api operator;  
    get vals() {  
        return this.recordId + ',' + this.objectName + ',' +   
               this.parentFieldAPIName + ',' + this.fieldName + ',' +   
               this.fieldValue + ',' + this.filterType + ',' + this.operator;  
    @wire(fetchRecords, { listValues: '$vals' })  

<?xml version="1.0" encoding="UTF-8"?>  
<LightningComponentBundle xmlns="" fqn="RelatedList">  
        <targetConfig targets="lightning__RecordPage">  
            <property name="strTitle" type="String" label="Title" description="Enter the title"/>  
            <property name="objectName" type="String" label="Object Name" description="Enter the object name"/>  
            <property name="parentFieldAPIName" type="String" label="Parent Field API Name" description="Enter the parent field API Name"/>  
            <property name="fieldName" type="String" label="Field Name" description="Enter the field name"/>  
            <property name="fieldValue" type="String" label="Field Value" description="Enter the field value"/>  
            <property name="filterType" type="String" label="Filter Type" description="Enter the filter type"/>  
            <property name="operator" type="String" label="Operator" description="Enter the operator"/>  

Apex Class:
public class RelatedListController {  
    @AuraEnabled( cacheable=true )  
    public static List < sObject > fetchRecords( String listValues )  {  
        system.debug( 'values are ' + listValues );  
        List < String > strList = listValues.split( ',' );  
        system.debug( 'values are ' + strList );  
        if ( strList.size() == 7 ) {  
            String recordId = strList.get( 0 );  
            String objectName = strList.get( 1 );  
            String parentFieldAPIName = strList.get( 2 );  
            String fieldName = strList.get( 3 );  
            String fieldValue = strList.get( 4 );  
            String filterType = strList.get( 5 );  
            String operator = strList.get( 6 );  
            String strSOQL = 'SELECT Id FROM ' + objectName + ' WHERE ' + parentFieldAPIName + ' = \'' + recordId + '\' AND ';  
            if ( filterType == 'String' )      
                strSOQL += fieldName + ' = \'' + fieldValue + '\'';  
            else if ( filterType == 'Boolean' )      
                strSOQL += fieldName + ' = ' + fieldValue;  
                strSOQL += fieldName + ' ' + operator + ' ' + fieldValue;  
            strSOQL += ' LIMIT 10';      
            return Database.query( strSOQL );  
        } else   
            return null;  

Configuring Attributes in Lightning App Builder:
I have done the below configuration on the Account Lightning Record Page.



  1. Great recipe. Just note that it is working just for UI API supported objects.
    See list here:

  2. can u give the apex controller code @salesforce/apex/RelatedListController.fetchRecords

  3. Hi,

    This is a great post, I tried it and worked perfect. Thanks for sharing the knowledge!
    I see you have used the "layout-type="Compact", since there are limitations on what fields can be added to the compact layout (specifically long text area, rich text area etc. cant be added to compact layout) did you try passing the fields dynamically to show on the component? I tried couple of things but didn't work, I tried to manage by having the logic that dynamically works for any object. Please let me know if you have suggestions or logic. Thanks and appreciate your response.

    1. Never tried dynamic fields on the component. You can try to store the fields in Custom Metadatype for dynamic fetching of fields.

  4. This comment has been removed by the author.

  5. This is a great Solution.

    Any suggestion on how we could enable hyperlinking on the related record and open them in a separate Sub-tab?
    Eg: if i want to open the Closed Case that i click on in a subtab.

    I thought of and tried adding an Aura wrapper, but the configurability of the LWC is lost when we do that.

    1. Since lightning-record-form tag is used, you can create a formula field of type URL and show it.

    2. Thank you Magulan!! thats innovative.

  6. Can we have the view all aspect of related list to somehow show only the filtered records in the data-table page

    1. Yes. You can add the filter as mentioned in the post.

  7. The component is not rendering the fields I am passing via SOQL. I wonder how it is getting these fields. Is their a way I can display the fields of my choice in here?

    1. You have to adjust the compact layout for the fields. Not the SOQL

  8. Hi, How I can see every fields without filter logic?

    1. I am using layout-type="Compact". You can try to use full and see the additional fields.

  9. I mean without Field Name, Field Value, Filter Type and Operator. When I leave this fields empty, I don't see related list, but my object have only Name Field. How I can retrive related list use Field Name = Name and I don't now any logic for next.

    1. You have to adjust the apex class. I have set this condition - if ( strList.size() == 7 )

  10. This does not appear on the mobile app though. :(

    1. Check the Lightning Record page and make sure the LWC is available for Phone too.