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. Mark it as the best answer if you find it helpful.

Thanks

Akshay

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.