Display parent fields value on standard lightning data table

Know How To Display Parent Fields Value On A Standard Lightning Data Table

As we all know lightning data table has limitation in directly displaying parent fields value related to child object. However we have workaround in order to achieve the same. So in this article we will see the workaround to overcome this limitation of lightning data table.

We have three workaround to overcome this limitation which are as follows:

1. Using a wrapper class:

Apex code: 
   
    /**
     *@Desc: A method to fetch details of parent record
	 **/
    @AuraEnabled
    public static map<String,Object> getParentDetails(){
        map<String,Object> mapData = new map<String,Object>();
        list<DataWrapper> listContact  = new list<DataWrapper>();
            for(Contact objContact : [Select Id, Account.Name,
                                      		Account.Description,
                                      		Name,firstName,lastname 
                                      from Contact 
                                      Where AccountId <> NULL limit 5]){
                if(objContact.Account.Description <> NULL){
                      listContact.add(
                          new DataWrapper(objContact.Account.Name,
                                 objContact.Name,
                                 objContact.Account.Description));                        
                      }                          
        }
        mapData.put('ParentDetails',JSON.serialize(listContact));
        return mapData;
}

//A wrapper class that will be use do display the data of the object
    public class DataWrapper{
        @AuraEnabled public String strParentName	{get;set;}
        @AuraEnabled public String strChildName		{get;set;}
        @AuraEnabled public String strParentDesc	{get;set;}
        
        
        public DataWrapper(String p_strParentName,
                           String p_strChildName,
                           String p_strParentDesc){
        	this.strParentName =  p_strParentName;
            this.strChildName = p_strChildName;
            this.strParentDesc = p_strParentDesc;                   
        }
    }

So here we use a wrapper class that collect the data of the fields that we need to display on the lightning component. Along with this we also need to set the column of the data table so that the variables of this wrapper are properly mapped with the lightning data table columns. which is shown as in below code.

Setting up columns to achieve mapping of data properly on lightning data table.


 var columnslist =[
  {label: 'Parent AccountName',fieldName: 'strParentName',type:'text'},
  {label: 'Child Contact Name', fieldName: 'strChildName', type: 'text'},

  {label: 'Parent AccountDesc', fieldName: 'strParentDesc', type: 'text'}
];
 
component.set("v.listCol",columnslist);

As we can see in the code snippet the columnlist declared have the fieldName attribute Whose value must be same as the variable that we are using in the Wrapper class in apex code in order to get the proper mapping of fields with the respective columns. Thus the final result appear as below. You can find the above code on  github gist.

2. Handling it in lightning helper : We can achieve the above result without using a wrapper with only making some changes in the lightning component helper. We only to need make to some modification in the data that we are fetching from the apex code in order to map the fetched data with the respective columns. We need make the the changes as shown below.

var columnslist =[
  {label: 'Parent AccountName',fieldName: 'strParentName',type:'text'},
  {label: 'Child Contact Name', fieldName: 'strChildName', type: 'text'},
  {label: 'Parent AccountDesc', fieldName: 'strParentDesc', type: 'text'}];

And once we fetched the data from the apex class we need to perform the following action on the data : 

var fetchedData  = JSON.parse(responseData.ParentDetails);
                fetchedData.forEach(function(temp,Index){
                   temp.strParentName = temp.Account.Name;
                   temp.strParentDesc = temp.Account.Description;
                   temp.strChildName = temp.Name;
                });
                console.log(fetchedData);
                component.set("v.listRecords",fetchedData);
                component.set("v.listCol",columnslist);

You can find the entire code on below github gist.

3. Using a formula field : This is the most simplest approach which requires creation of additional formulas field on the child object which will be storing the required parent field values. And this field can be directly used in the lightning data table without making use of wrapper in apex class or any modification of data in the lightning helper.

Responses

Popular Salesforce Blogs