0

I have a picklist value account and contact when i select account or contact it will not showing me the data table of account or contact

HTML

<template>
   <div class="slds-form-element">
        <label class="slds-form-element__label">
            <template if:true={isAttributeRequired}>
                <abbr title="required">*</abbr>
            </template>
            <span class="">Choose an Option</span>
        </label>
        <div class="slds-form-element__control">
            <div class="slds-select_container">
                <select class="slds-select"
                        name = "optionSelect"
                        onchange={selectionChangeHandler}
                        disabled={isPicklistDisabled}
                        required={isAttributeRequired}>
                    <option value="Select">Select</option>
                    <option value="Account">Account</option>
                    <option value="Contact">Contact</option>
                </select>
            </div>
            <lightning-button variant="success" 
                              label="Proceed" 
                              title="Proceed" 
                              onclick={selectionChangeHandler} 
                              class="slds-m-left_x-small">
            </lightning-button>
    
        </div>
        <template if:true={accList}>
            <h2> Account Datatable</h2>
            <lightning-datatable data={accList} 
                                 columns={acc_Columns} 
                                 key-field="Id">
            </lightning-datatable>
        </template>
        <template if:true={conList}>
            <h2> Contact Datatable</h2>
            <lightning-datatable data={conList} 
                                 columns={con_Columns}       
                                 key-field="Id">
            </lightning-datatable>
        </template>
        <template if:true={error}>
            {error}
        </template>
    </div>
</template>

JS

/* eslint-disable no-console */
/* eslint-disable no-undef */
/* eslint-disable no-alert */
/* eslint-disable vars-on-top */
import {​​​​​​​ LightningElement, track, wire }​​​​​​​ from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import getContacts from '@salesforce/apex/AccountController.getContacts';

export default class ListView extends LightningElement {​​​​​​​
        @track acc_Columns=[
                {​​​​​​​
        label: 'Id',
        fieldName: 'Id',
        type: 'text',
        sortable: true
    }​​​​​​​,
            {​​​​​​​
        label: 'Account name',
        fieldName: 'Name',
        type: 'text',
        sortable: true
    }​​​​​​​
       ];
        @track con_Columns=[
                {​​​​​​​
        label: 'Id',
        fieldName: 'Id',
        type: 'text',
        sortable: true
    }​​​​​​​,
            {​​​​​​​
        label: 'Contact name',
        fieldName: 'Name',
        type: 'text',
        sortable: true
    }​​​​​​​,
                {​​​​​​​
        label: 'Email',
        fieldName: 'Email',
        type: 'text',
        sortable: true
    }​​​​​​​
       ];
        // @track selectedOption;
        @track error;
    @track accList ;
        @track conList ;
        @track selectedOption;
        //@track field = event.target.name;
        selectionChangeHandler(event) {​​​​​​​
                const field = event.target.name;
   if (field === 'optionSelect') {​​​​​​​
        this.selectedOption = event.target.value;
            alert("you have selected : "+this.selectedOption);
             this.getAccounts();
}​​​​​​​
        }​​​​​​​
    @wire(getAccounts)
    wiredAccounts({​​​​​​​
        error,
        data
    }​​​​​​​) {​​​​​​​
        if (data) {​​​​​​​
                        if(this.selectedOption ==='Account'){​​​​​​​
            this.accList = data;
                        const columns= this.acc_Columns;
                        }​​​​​​​
        }​​​​​​​ else if (error) {​​​​​​​
            this.error = error;
        }​​​​​​​
    }​​​​​​​
        @wire(getContacts)
    wiredContacts({​​​​​​​
        error,
        data
    }​​​​​​​) {​​​​​​​
        if (data) {​​​​​​​
                        if(this.selectedOption ==='Contact'){​​​​​​​
            this.conList = data;
                        const columns= this.con_Columns;
                        }​​​​​​​
        }​​​​​​​ else if (error) {​​​​​​​
            this.error = error;
        }​​​​​​​
    }​​​​​​​     
}​​​​​​​

APEX

public with sharing class AccountController {​​​​​​​​
    public static List<Account> getAllActiveAccounts() {​​​​​​​​
    return [SELECT Id,Name,Active__c FROM Account WHERE Active__c = 'Yes'];
  }​​​​​​​​
    @AuraEnabled(cacheable =true)
  public static List<Account> getAccounts(){​​​​​​​​
  return [Select Id, Name, Type, Rating,
                Phone, Website, AnnualRevenue FROM Account Order By Name];
  }​​​​​​​​


  @AuraEnabled(cacheable =true)
  public static List<Contact> getContacts(){​​​​​​​​
  return [Select Id, Name, Email FROM Contact Order By Name];
  }​​​​​​​​
}​​​​​​​​
0

I have checked your code and I found some minor mistakes in your code. That's why you are not getting the data. I have modified the code for you.

------------------------HTML-----------------------------------
<template>
  <div class="slds-form-element">
    <label class="slds-form-element__label">
      <template if:true={isAttributeRequired}>
        <abbr title="required">*</abbr>
      </template>
      <span class="">Choose an Option</span>
    </label>
    <div class="slds-form-element__control">
      <div class="slds-select_container">
        <select class="slds-select" name="optionSelect" onchange={selectionChangeHandler} disabled={isPicklistDisabled}
          required={isAttributeRequired}>
          <option value="Select">Select</option>
          <option value="Account">Account</option>
          <option value="Contact">Contact</option>
        </select>
      </div>
      <lightning-button variant="success" label="Proceed" title="Proceed" onclick={proceedHandler}
        class="slds-m-left_x-small">
      </lightning-button>

    </div>

      <template if:true={accList}>
        <h2> Account Datatable</h2>
        <lightning-datatable data={accList1} columns={columns} key-field="Id">
        </lightning-datatable>
      </template>
      <template if:true={conList}>
        <h2> Contact Datatable</h2>
        <lightning-datatable data={conList1} columns={columns} key-field="Id">
        </lightning-datatable>
      </template>

    <template if:true={error}>
      {error}
    </template>
  </div>
</template>

--------------------------------------JS---------------------------------------

/* eslint-disable no-console */
/* eslint-disable no-undef */
/* eslint-disable no-alert */
/* eslint-disable vars-on-top */
import { LightningElement } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import getContacts from '@salesforce/apex/AccountController.getContacts';

export default class ListView extends LightningElement {
  acc_Columns = [
    {
      label: 'Id',
      fieldName: 'Id',
      type: 'text',
      sortable: true
    },
    {
      label: 'Account name',
      fieldName: 'Name',
      type: 'text',
      sortable: true
    }
  ];
  con_Columns = [
    {
      label: 'Id',
      fieldName: 'Id',
      type: 'text',
      sortable: true
    },
    {
      label: 'Contact name',
      fieldName: 'Name',
      type: 'text',
      sortable: true
    },
    {
      label: 'Email',
      fieldName: 'Email',
      type: 'text',
      sortable: true
    }
  ];
  // @track selectedOption;
  error;
  accList = false;
  accList1;
  conList = false;
  conList1;
  selectedOption;
  columns;
  //@track field = event.target.name;
  selectionChangeHandler(event) {
    const field = event.target.name;
    if (field === 'optionSelect') {
      this.selectedOption = event.target.value;
      alert("you have selected : " + this.selectedOption);
      
    }
  }

  proceedHandler(){
    if (this.selectedOption === 'Account') {
      this.accList = true;
      this.getAcc();
      this.conList = false;
    }
    if (this.selectedOption === 'Contact') {
      this.conList = true;
      this.getCon();
      this.accList = false;
    }
    if (this.selectedOption === 'Select') {
      this.accList = false;
      this.conList = false;
    }
  }

  getAcc() {
    getAccounts()
      .then(result => {
        this.accList1 = result;
        this.columns = this.acc_Columns;
      })
      .catch(error => {
        this.error = error;
      })
  }
  getCon() {
    getContacts()
      .then(result => {
        this.conList1 = result;
        this.columns = this.con_Columns;
      })
      .catch(error => {
        this.error = error;
      });
  }
}

Hope this explanation will resolve your query.

1
  • Please include an explanation in your answer, not just code. Please do not use sign-offs or ask for "best answer", which does not exist here. See How to Answer. – David Reed May 12 at 21:50

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.