Displaying the records from multiple related Salesforce Objects
The records from a single Salesforce Object can simply be displayed in a Lightning Web Component by using the lightning datatable, but in order to display the records from multiple objects on the same Lightning Page, we need to use the Wrapper Class in Apex and Aura Iteration (<aura:iteration>) in the component.
Note: Make sure the multiple objects we’re going to fetch the records from, are related to each other because we’ll need a related field that will play an important role in fetching the records from its parent object.
Step 1: Let’s begin with creating the Apex Class!
We’ll need to use the Wrapper Class to return the list of records from Policy Object and Accounts, its Parent Object. Note that we have an “ Account__c “ field that relates the Policy with its Account Name but instead of “__c” we’ll use “__r” so we can fetch the Account Name from the Accounts Object.
TestWrapperClass.apx public class TestWrapperClass {
@AuraEnabled
public static wrapperClass getList(){
wrapperClass returnwrapperClass = new wrapperClass ();
String soql = 'Select Name,Account__r.Name from Policy__c';
List<Policy__c> PoList= Database.Query(soql);
if(PoList != null && PoList.size()>0){
List <Policy__c> returnList = new List <Policy__c> ();
for (Policy__c c: PoList) {
returnList.add(c);
}
returnwrapperClass.listPol = returnList;
return returnwrapperClass;
}
else{return null;}
}
// wrapper or Inner class with @AuraEnabled {get;set;} properties*
public class wrapperClass{
@AuraEnabled public List<Policy__c> listPol{get;set;}
}
}
Step 2: Creating the Lightning Component to display the records.
We’ll be using the Aura: Iteration tag to iterate through the list of the records and then displaying them in a table.
Step 3: Creating the JS controller for the component.
This will fetch the list of records that are being returned by the apex class.
TestCompController.js({
doInit : function(component, event, helper) {
var action = component.get("c.getList");
action.setCallback(this, function(response) {
var state = response.getState();
if(state === 'SUCCESS'){
var result = response.getReturnValue();
console.log('Result ', result.listPol);
component.set("v.PoList", result.listPol);
}
});
$A.enqueueAction(action);
}
})
Now that we’ve fetched the records from our org using the Wrapper Class and Iterated the list of records in our Component, we just need to call our Component in a Lightning Application.
Step 4 : Calling the Component in a Lightning App.
After fetching the records, our lightning app will look like this:
Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.
Originally published at https://blog.webnersolutions.com on August 27, 2021.
