3

friends.

I am hoping somewhen can give me some help with this. I am trying to create Lighting Data Table on the Campaign record page. The table will display campaign members that are related to the campaign and fit certain criteria that is defined in the Apex controller. But I am struggling with how I pass the ID of the current campaign into the method. The code I currently have throws an error when the page is loaded.

Any advice on how to pass the current Campaign Id into the Apex SOQL query would be most appreciated.

The JS code

  import { LightningElement, track, wire, api } from 'lwc';
import getRecords from '@salesforce/apex/NewToLiftController.getRecords';
import { getRecord } from 'lightning/uiRecordApi';

const columns = [
    { label: 'Name', fieldName: 'name' },
    { label: 'Email', fieldName: 'Email', type: 'Email' },
    { label: 'Role', fieldName: 'Role__c', type: 'Text' },
    { label: 'Startup Leadership', fieldName: 'Startup_Leadership__c', type: 'boolean' },
    { label: 'Company', fieldName: 'CompanyOrAccount', type: 'Text' },
];

export default class DatatableBasic extends LightningElement {
@api recordId;
@track data = [];
@track columns = columns;
@track tableLoadingState = true;
@wire(getRecords, {recordId: '$recordId'}) campaignMembers;          
}

The Apex

public with sharing class NewTOLiftController {
    @AuraEnabled(Cacheable = true)
    public static List<CampaignMember> getRecords(String recordId) {
        String param = '%' + recordId + '%';
        List<CampaignMember> campaignMembers = [SELECT Name, Email, Role__c, Startup_Leadership__c, CompanyOrAccount
        FROM CampaignMember
        WHERE NewToLift__c = TRUE
        AND CampaignId =: param];
        return campaignMembers;
    }
}

The metadata

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="newToLift">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

HTML

<template>
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            First Time Campaign Members
        </h2>

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg" style="height: 300px;">
            <lightning-datatable
                    key-field="id"
                    data={data}
                    columns={columns}
                    is-loading={tableLoadingState}>
            </lightning-datatable>
        </div>
    </div>
</template>
  • 1
    I don't think you need to call the function inside the connectedCallback method. If you use the wire service, the method will be called automatically. To pass some parameters and store the results inside a variable, you should use: @wire(getRecords, { recordId: '$recordId' }) campaignMembers; – Martin Lezer Jun 3 at 12:10
  • 1
    can you add markup for the config file as well? – Pranay Jaiswal Jun 3 at 12:10
  • @MartinLezer I adjusted the code and the LWC no longer throws an error on load but there is no data loading either. Just the 'spinning wheel of death' I will edit the code to show the current version in my post. – Brooks Johnson Jun 3 at 12:18
  • 2
    You should probably remove this line: String param = '%' + recordId + '%'; The id sent to your Apex method is already the right id. You don't need to add the percents characters. Instead, just replace your query close by AND CampaignId =: recordId – Martin Lezer Jun 3 at 12:34
  • @MartinLezer perfect that worked. – Brooks Johnson Jun 3 at 12:36
5

You have to make a callback function instead of binding it to a property for your @wire call where you set the value of tableLoadingState as false and that will stop the spinning wheel of death.

@wire(getRecords , { recordId: '$recordId' })
    wiredRecordsMethod({ error, data }) {
        if (data) {
            this.data  = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data  = undefined;
        }
        this.tableLoadingState  = false;
    }
  • That did stop the wheel of death but no records are loading into my table. It is empty. I am using some test data in a sandbox and there should be one record that fit the criteria and loads into the table. – Brooks Johnson Jun 3 at 12:29
  • 1
    Can you try console.log on data or error to see what result you getting? And also is your table binded to the data attribute? – Pranay Jaiswal Jun 3 at 12:29
  • 1
    Good to know @PranayJaiswal, thanks ! – Martin Lezer Jun 3 at 12:37
  • Thank you for the help. Between you and Martin is looks solved now. – Brooks Johnson Jun 3 at 12:38

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.