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:



4 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