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

relatedList.html:


  1. <template>  
  2.       
  3.     <lightning-card title={strTitle} icon-name="standard:record">  
  4.   
  5.         <div class="slds-m-around_medium">  
  6.   
  7.             <div if:true={records.data}>  
  8.   
  9.                 <template for:each={records.data} for:item="rec">    
  10.   
  11.                     <div key={rec.Id} class="slds-box">  
  12.   
  13.                         <lightning-record-form record-id={rec.Id}   
  14.                                                object-api-name={objectName}   
  15.                                                layout-type="Compact"   
  16.                                                mode="view"  
  17.                                                columns="2">  
  18.                         </lightning-record-form>  
  19.   
  20.                     </div>  
  21.                       
  22.                 </template>  
  23.   
  24.             </div>  
  25.   
  26.         </div>  
  27.   
  28.     </lightning-card>  
  29.       
  30. </template>  

relatedList.js:


  1. import { LightningElement, api, wire } from 'lwc';  
  2. import fetchRecords from '@salesforce/apex/RelatedListController.fetchRecords';  
  3.   
  4. export default class RelatedList extends LightningElement {  
  5.   
  6.     @api objectName;  
  7.     @api fieldName;  
  8.     @api fieldValue;  
  9.     @api parentFieldAPIName;  
  10.     @api recordId;  
  11.     @api strTitle;  
  12.     @api filterType;  
  13.     @api operator;  
  14.     get vals() {  
  15.         return this.recordId + ',' + this.objectName + ',' +   
  16.                this.parentFieldAPIName + ',' + this.fieldName + ',' +   
  17.                this.fieldValue + ',' + this.filterType + ',' + this.operator;  
  18.     }  
  19.       
  20.     @wire(fetchRecords, { listValues: '$vals' })  
  21.     records;  
  22.   
  23. }  

relatedList.js-meta.xml:


  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RelatedList">  
  3.     <apiVersion>45.0</apiVersion>  
  4.     <isExposed>true</isExposed>  
  5.     <targets>  
  6.         <target>lightning__RecordPage</target>  
  7.     </targets>  
  8.     <targetConfigs>  
  9.         <targetConfig targets="lightning__RecordPage">  
  10.             <property name="strTitle" type="String" label="Title" description="Enter the title"/>  
  11.             <property name="objectName" type="String" label="Object Name" description="Enter the object name"/>  
  12.             <property name="parentFieldAPIName" type="String" label="Parent Field API Name" description="Enter the parent field API Name"/>  
  13.             <property name="fieldName" type="String" label="Field Name" description="Enter the field name"/>  
  14.             <property name="fieldValue" type="String" label="Field Value" description="Enter the field value"/>  
  15.             <property name="filterType" type="String" label="Filter Type" description="Enter the filter type"/>  
  16.             <property name="operator" type="String" label="Operator" description="Enter the operator"/>  
  17.         </targetConfig>  
  18.     </targetConfigs>  
  19. </LightningComponentBundle>  


Apex Class:

  1. public class RelatedListController {  
  2.   
  3.     @AuraEnabled( cacheable=true )  
  4.     public static List < sObject > fetchRecords( String listValues )  {  
  5.       
  6.         system.debug( 'values are ' + listValues );  
  7.         List < String > strList = listValues.split( ',' );  
  8.         system.debug( 'values are ' + strList );  
  9.           
  10.         if ( strList.size() == 7 ) {  
  11.           
  12.             String recordId = strList.get( 0 );  
  13.             String objectName = strList.get( 1 );  
  14.             String parentFieldAPIName = strList.get( 2 );  
  15.             String fieldName = strList.get( 3 );  
  16.             String fieldValue = strList.get( 4 );  
  17.             String filterType = strList.get( 5 );  
  18.             String operator = strList.get( 6 );  
  19.               
  20.             String strSOQL = 'SELECT Id FROM ' + objectName + ' WHERE ' + parentFieldAPIName + ' = \'' + recordId + '\' AND ';  
  21.             if ( filterType == 'String' )      
  22.                 strSOQL += fieldName + ' = \'' + fieldValue + '\'';  
  23.             else if ( filterType == 'Boolean' )      
  24.                 strSOQL += fieldName + ' = ' + fieldValue;  
  25.             else  
  26.                 strSOQL += fieldName + ' ' + operator + ' ' + fieldValue;  
  27.             strSOQL += ' LIMIT 10';      
  28.             return Database.query( strSOQL );  
  29.               
  30.         } else   
  31.             return null;  
  32.           
  33.     }  
  34.           
  35. }  

Configuring Attributes in Lightning App Builder





Output:



6 comments:

  1. Great recipe. Just note that it is working just for UI API supported objects.
    See list here: https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm

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

    ReplyDelete
  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.

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

      Delete