-1

I have a custom APEX Class that returns two sets of data (Activities & Notes), I would like to individually access each of those arrays of data and place them into separate Lightning Data Tables. I am able to successfully return the data and log it within the console, I am having difficulty individually accessing each of the data elements and placing them into the Lightning Data Tables.

Here is the HTML of the LWC:

<template>
    <h1>Lead Activity</h1>
    <lightning-card title="All Activity" icon-name="standard:task">
        <div class="slds-m-around_medium" if:true={data.Activities}>
            <lightning-datatable key-field="id" show-row-number-column hide-checkbox-column data={data.Activities} columns={columns}>
            </lightning-datatable>
        </div>
        <div class="slds-m-around_medium" if:true={error}>
            <p>Sorry there was an error</p>
        </div>
    </lightning-card>
</template>

Here is the JS of the LWC:

import {LightningElement, wire, api, track} from 'lwc';
import getActivityAndNotes from '@salesforce/apex/viewAllActivitiesAndNotesLeadLEX.getActivityAndNotes'
import {getRecord, getFieldValue, getFieldDisplayValue} from 'lightning/uiRecordApi';

const columns = [
    // { label: 'Subject', fieldName: 'Subject', type: 'text', sortable: true},
    // { label: 'Comments', fieldName: 'Description', type: 'text', sortable: false},
    // { label: 'Activity Date', fieldName: 'ActivityDate', type: 'date', sortable: true},
    { label: 'sActivitySubject', fieldName: 'sActivitySubject', type: 'text', sortable: true},
];

export default class LeadActivity extends LightningElement {

    @api recordId;
    @api objectApiName;
    @track columns = columns;

    @wire(getActivityAndNotes, {leadId: '$recordId'})
    data({error,data}) {
        if(data){
            console.log('Activity Data:');
            console.log(data);
            console.log("Data.Activities:");
            console.log(data.Activities);
            console.log(JSON.stringify(data.Activities, null, '\t'));
        } else if(error){
            console.log('Activity Error');
            console.log(error);
        } else{
            console.log('Sorry Nothing Happened');
        }
    }
}

Here is the data I am able to successfully return and log: enter image description here

At this point I believe I have narrowed it down to being one of the following issues:

  • Incorrectly defining the 'columns' used in the table (JS)
  • Incorrectly accessing the data within Lightning Data Table (HTML)

Any Assistance would be greatly appreciated.

RESPONSE:

I was able to display the columns within the Lightning Data Table by applying the suggested changes. Here is the new JS:

import {LightningElement, wire, api, track} from 'lwc';
import getActivityAndNotes from '@salesforce/apex/viewAllActivitiesAndNotesLeadLEX.getActivityAndNotes'
import {getRecord, getFieldValue, getFieldDisplayValue} from 'lightning/uiRecordApi';

export default class LeadActivity extends LightningElement {

    @api recordId;
    @api objectApiName;
    columns = 
    [
        { label: 'sId', fieldName: 'sId', type: 'text', sortable: true},
        { label: 'Subject', fieldName: 'sActivitySubject', type: 'text', sortable: true},
    ];
    activity = [];

    @wire(getActivityAndNotes, {leadId: '$recordId'})
    data({error,data}) {
        if(data){

            console.log('Activity Data:');
            console.log(data.Activities);
            console.log(JSON.stringify(data, null, '\t'));
            console.log(data.Activities);

            this.activity.push(data.Activities);

            console.log('Log Activity Array:');
            console.log(this.activity[0]);
            console.log(JSON.stringify(this.activity, null, '\t'));

        } else if(error){
            console.log('Activity Error');
            console.log(error);
        } else{
            console.log('Sorry Nothing Happened');
        }
    }
}

Here is the HTML:

<template>
    <lightning-card title="All Activity" icon-name="standard:task">
        <div class="slds-m-around_medium" if:true={activity}>
            <lightning-datatable key-field="sId" show-row-number-column hide-checkbox-column data={activity} columns={columns}>
            </lightning-datatable>
        </div>
        <div class="slds-m-around_medium" if:true={error}>
            <p>Sorry there was an error</p>
        </div>
    </lightning-card>
</template>

NEW ISSUE/QUESTION: It looks like I am not passing the data to the table in the correct format. How does the data need to be passed to the LWC Data Table? Should it be passed in an Array? An Array of Objects? An Object?

RESULT SOLUTION: I was able to get it to work, below is the HTML & JS:

<template>
    <lightning-card title="All Activity" icon-name="standard:task">
        <div class="slds-m-around_medium" if:true={activityList}>
            <lightning-datatable 
                key-field="sId" 
                show-row-number-column 
                hide-checkbox-column 
                data={activityList} 
                columns={columns}>
            </lightning-datatable>
        </div>
        <div class="slds-m-around_medium" if:true={error}>
            <p>Sorry there was an error</p>
        </div>
    </lightning-card>
</template>

JS:

import {LightningElement, wire, api, track} from 'lwc';
import getActivityAndNotes from '@salesforce/apex/viewAllActivitiesAndNotesLeadLEX.getActivityAndNotes'
import {getRecord, getFieldValue, getFieldDisplayValue} from 'lightning/uiRecordApi';

export default class LeadActivity extends LightningElement {

    @api recordId;
    @api objectApiName;
    @track activityList;
    columns = 
    [
        { label: 'sId', fieldName: 'sId', type: 'text', sortable: true},
        { label: 'sActivitySubject', fieldName: 'sActivitySubject', type: 'text', sortable: true},
    ];

    @wire(getActivityAndNotes, {leadId: '$recordId'})
    data({error,data}) {
        if(data){

            console.log('Log Data:');
            console.log(data);
            console.log(JSON.stringify(data, null, '\t'));
            console.log('Log Data.Activities:');
            console.log(data.Activities);
            console.log(JSON.stringify(data.Activities, null, '\t'));

            this.activityList = data.Activities;

        } else if(error){
            console.log('Activity Error');
            console.log(error);
        } else{
            console.log('Sorry Nothing Happened');
        }
    }

}
  • Please ask a new question when the original question has been resolved. – Ronnie Apr 2 at 21:10
1

Define your columns inside the class definition instead of as a const. That should allow your template to see the local variable it needs.

import {LightningElement, wire, api, track} from 'lwc';
import getActivityAndNotes from '@salesforce/apex/viewAllActivitiesAndNotesLeadLEX.getActivityAndNotes'
import {getRecord, getFieldValue, getFieldDisplayValue} from 'lightning/uiRecordApi';

export default class LeadActivity extends LightningElement {

    @api recordId;
    @api objectApiName;
    columns = [
    // { label: 'Subject', fieldName: 'Subject', type: 'text', sortable: true},
    // { label: 'Comments', fieldName: 'Description', type: 'text', sortable: false},
    // { label: 'Activity Date', fieldName: 'ActivityDate', type: 'date', sortable: true},
    { label: 'sActivitySubject', fieldName: 'sActivitySubject', type: 'text', sortable: true},
    ];


    @wire(getActivityAndNotes, {leadId: '$recordId'})
    data({error,data}) {
        if(data){
            console.log('Activity Data:');
            console.log(data);
            console.log("Data.Activities:");
            console.log(data.Activities);
            console.log(JSON.stringify(data.Activities, null, '\t'));
        } else if(error){
            console.log('Activity Error');
            console.log(error);
        } else{
            console.log('Sorry Nothing Happened');
        }
    }
}

Since your columns aren't changing, unless you are dynamically adding other columns later, you should not need to declare it twice like you had and you should not need to declare it with track.

EDIT

As you have edited your question to now be different as the column fix has worked, you should return your data as an array of records. Your column fieldName should align with the field name on the records that you're passing in to the table. Doing this allows the table to know where to place the value on the record that it receives.

columns = 
    [
        { label: 'sId', fieldName: 'Id', type: 'text', sortable: true},
        { label: 'sActivitySubject', fieldName: 'Subject', type: 'text', sortable: true},
    ];

Please remember

You should ask in a separate question next time to be sure that each piece of the issue is addressed since the original issue was corrected with the column update.

| improve this answer | |
  • I was able to make a change to present the columns. The issue I am having now is actually displaying the data and passing the data in the correct format to the data table. – Max Apr 2 at 19:10
  • you should make sure that your field names align with the actual field names on the object. the commented columns that you have in your original post (copied into my response) should align with the data. @Max – Ronnie Apr 2 at 19:31
  • @Max I have updated my answer to fit your updated question. Please remember that when the question has changed due to a successful solution on your original post, this should be asked as a new question instead of an edit. This will help others as they may experience the same issues along their path. Please accept if this has solved your issue. Thanks! – Ronnie Apr 2 at 21:05
  • also - you should consider when you set sortable on a column that the field type is a sortable field. i often do dynamic columns based on the schema for the field being rendered to determine if sortable on the fly (when they are not static columns) – Ronnie Apr 2 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.