Thursday, November 28, 2019

How To Access Parent Object Or Relationship Object Fields In LWC DataTable

Lets consider a case where we have 2 objects as listed below.
  • Activities__c  // Child Object
  • Transaction__c    //Parent Object
Now if you want to display all activities related to a particular transaction and as well as you want to show some field values related to transaction on each activity record (Ex: PNR and Status).

Unfortunately similar to VF pages you can't directly access them in LWC templates .So,we have to do some changes on data set (list of recors) before we display it in html template.

Solution:

We have to set/update the related field column value for each record before pushing/adding it into the list.

this.allActivitiesData = data.map(
   record => Object.assign(
 { "Transaction__r.Status__c": record.Transaction__r.Status__c, "Transaction__r.PNR__c": record.Transaction__r.PNR__c},
  record
  )
);

Complete Solution With Sample Code:


ActivitiesFlowCntrl.cls

global class ActivitiesFlowCntrl
{
    
    public ActivitiesFlowCntrl()
    {
      System.debug('Inside constructor..');
    }

    @AuraEnabled(cacheable=true)
    public static List<Activities__c> fetchActivities(String recdId)
    {
        List<Activities__c> lstAct = new List<Activities__c>()
        lstAct = [SELECT id,Name,Act_Name__c,Act_Type__c,Amount__c,Start_Time__c,
                  End_Time__c,Act_UniqueId__c,Transaction__r.Status__c,
                  Transaction__r.PNR__c FROM Activities__c 
                  WHERE Transaction__c=:recdId];
       return lstAct;
    }
}

ActivitiesFlow.js

import { LightningElement, api, track, wire } from "lwc";
import fetchActivities from "@salesforce/apex/ActivitiesFlowCntrl.fetchActivities";

const columns = [
    { label: 'Id', fieldName: 'Name' },
    { label: 'Name', fieldName: 'Act_Name__c' },
    { label: 'Type', fieldName: 'Act_Type__c' },
    { label: 'Status', fieldName: 'Transaction__r.Status__c' },
    { label: 'PNR', fieldName: 'Transaction__r.PNR__c' },
    { label: 'Amount', fieldName: 'Amount__c', type: 'currency' },
    { label: 'StartTime', fieldName: 'Start_Time__c', type: 'date' },
    { label: 'End Time', fieldName: 'End_Time__c', type: 'date' },
    { label: 'UniqueId', fieldName: 'Act_UniqueId__c' }

];

export default class ActivitiesFlow extends LightningElement 
{
  
  @track allActivitiesData;
  
  @wire(fetchActivities, { recdId: '$sfrecordId' })
    wiredActivities({ error, data }) {
       if (data) 
       {
          this.allActivitiesData =  data.map(
      record => Object.assign(
  { "Transaction__r.Status__c": record.Transaction__r.Status__c, "Transaction__r.PNR__c": record.Transaction__r.PNR__c},
  record
       )
            );
         
        }
 else if (error) {
            this.error = error;
            this.allActivitiesData = undefined;
           
        }
 }
}

ActivitiesFlow.html

<template>
    <template if:true={allActivitiesData}>
        <lightning-datatable data={allActivitiesData} columns={columns} key-field="id" hide-checkbox-column="true"></lightning-datatable>
    </template>
</template>


Hope this helped you..Enjoy..!

5 comments:

  1. I m trying to display opportunityContactRole with Opportunity in lwc using datatable but i m not getting opportunity.name here bt opportunity.id is visible. Can u please help on this?

    ReplyDelete
  2. It errors out if the lookup is blank can you handle that scenario?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. it works only for single object, if our wrapper class having multiple object so that time how we can show parent field in datatable

    ReplyDelete