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

3 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. Hi to every single one, it’s truly a good for me to visit this web page, I love your content, they are very nice and it includes helpful Information. Check out our website Coding Help Online for more Coding Project Help. related info! I am truly pleased to read this website posts which carries lots of helpful data, thanks for providing these kinds of statistics.

    ReplyDelete