0

I created a LeadsContoller with multiple methods each returning a list of leads via a SOQL Query. I created multiple lightning buttons in HTML each with an onclick handler. In the JS file, i imported salesforce schema and the controller class methods. I can't get the datatable to populate any data when I click on them.

HTML: `

        <p class="slds-text-heading_medium">Select a status</p>

        <br>

        <div class="buttons">
            <lightning-button label="All" onclick={allLeadsHandler}></lightning-button>

            <lightning-button label="Open - Not Contacted" onclick={openNotContactedHandler}></lightning-button>

            <lightning-button label="Working Contacted" onclick={workingContactedHandler}></lightning-button>

            <lightning-button label="Closed - Converted" onclick={closedConvertedHandler}></lightning-button>

            <lightning-button label="Closed - Not Converted" onclick={closedNotConvertedHandler}></lightning-button>
        </div>
        
        <div class="table">
            <template if:true={leads.data}>
                <lightning-datatable data={data} columns={columns} key-field="id"></lightning-datatable>
            </template>
            <template if:true={error}>
                <lightning-datatable errors={error}></lightning-datatable>
            </template>
        </div>
    </div>
</lightning-card>

`

CONTROLLER

public with sharing class LeadsController {
//get all leads method
@AuraEnabled(cacheable = true)
public static List<Lead> getAllLeads(){
    return [
        SELECT Name, Company, Email, Phone, Status
        FROM Lead
        WITH SECURITY_ENFORCED
        ORDER BY Name
    ];
}
//get open - not contacted leads method
@AuraEnabled(cacheable=true)
public static List<Lead> getOpenNotContactedLeads(){
    return [
        SELECT Name, Company, Email, Phone, Status
        FROM Lead
        WHERE Status = 'Open - Not Contacted'
        WITH SECURITY_ENFORCED
        ORDER BY Name
    ];
}

The rest of the controller file is the same. I'm just saving room.

JS:

    import { LightningElement, wire, track } from 'lwc';

//import schema fields
import NAME_FIELD from '@salesforce/schema/Lead.Name';
import COMPANY_FIELD from '@salesforce/schema/Lead.Company';
import EMAIL_FIELD from '@salesforce/schema/Lead.Email';
import PHONE_FIELD from '@salesforce/schema/Lead.Phone';
import STATUS_FIELD from '@salesforce/schema/Lead.Status';
//import controller methods
import getAllLeads from '@salesforce/apex/LeadsController.getAllLeads';
import getOpenNotContactedLeads from '@salesforce/apex/LeadsController.getOpenNotContactedLeads';
import getWorkingContactedLeads from '@salesforce/apex/LeadsController.getWorkingContactedLeads';
import getClosedConvertedLeads from '@salesforce/apex/LeadsController.getClosedConvertedLeads';
import getClosedNotConvertedLeads from '@salesforce/apex/LeadsController.getClosedNotConvertedLeads';

const COLUMNS = [
    { label: 'Name', fieldName: NAME_FIELD.fieldApiName, type: 'text'},
    { label: 'Company', fieldName: COMPANY_FIELD.fieldApiName, type: 'text'},
    { label: 'Email', fieldName: EMAIL_FIELD.fieldApiName, type: 'email'},
    { label: 'Phone', fieldName: PHONE_FIELD.fieldApiName, type: 'phone'},
    { label: 'Status', fieldName: STATUS_FIELD.fieldApiName, type: 'text'},
];

export default class LeadsFilter extends LightningElement {
    @track error;
    @track leads;
    columns = COLUMNS;
    
     
    //  @wire(getAllLeads)
    //     wiredLeads({error, data}) {
    //         if(data) {
    //             this.leads = data;
    //         } else if (error) {
    //             console.log(error);
    //             this.error = error;
    //         }
    //     }
    allLeadsHandler(){
        getAllLeads()
            .then(data => {
                this.leads = data;
            })
            .catch(error => {
                this.error = error;
            })
       
    }

    openNotContactedHandler(){
        getOpenNotContactedLeads()
            .then(data => {
                this.leads = data;
            })
            .catch(error => {
                this.error = error;
            })
    }

rest of the JS file is the same for each button onclick handler.

I've tried several different approaches but what I have in the JS file is based on examples i've seen a few different sites. Nothing happens when I click on the buttons except.

0

Couple of suggestions:

you don't need 2 apex methods, you can use 1 with a property that determins if the where clause is needed or not, for ex (this is just for reference purposes):

@AuraEnabled(cacheable = true)
public static List<Lead> getAllLeads(Some Property){
    String query = 'some soql';
    if(String.isNotBlank(Property)){
        queryString += 'WHERE Status = \'Open - Not Contacted\''
    }
    return Database.query(queryString);
}

that way, in your lwc controller you can simply toggle a property to fetch your soql with the applied status or not.

you could use a dynamic property in your wiremethod, so each time that you toggle the status proeprty, the aura method would be invoked.

@wire(getAllLeads, Property : '$yourProperty')

2
  • I actually have 5 methods querying different statuses. I get the idea behind using @wire. Since I can only apply it to one method, how can I place all those in one apex method? The html has 5 buttons. Depending on which button is clicked, an onclick handler is used to populate lead object data for teh various status options. Jul 23 '21 at 17:17
  • based on what I shared you should be able to develop your own functionality without having 5 wire methods and 5 apex classes to handle separate/different queries for the same object. Please keep in mind that this site is not a free coding service.
    – glls
    Jul 23 '21 at 18:46

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.