8

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>
6
  • 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; Commented Jun 3, 2019 at 12:10
  • 1
    can you add markup for the config file as well? Commented Jun 3, 2019 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. Commented Jun 3, 2019 at 12:18
  • 4
    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 Commented Jun 3, 2019 at 12:34
  • 1
    @MartinLezer awesome catch. I didn't even see apex controller. Can you add it as an answer so that OP can accept it Commented Jun 3, 2019 at 12:38

1 Answer 1

8

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;
    }
4
  • 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. Commented Jun 3, 2019 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? Commented Jun 3, 2019 at 12:29
  • 1
    Good to know @PranayJaiswal, thanks ! Commented Jun 3, 2019 at 12:37
  • Thank you for the help. Between you and Martin is looks solved now. Commented Jun 3, 2019 at 12:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .