Reactively display data when selecting a value from lightning-combobox

lightning-comboboxlightning-web-components

SF newbie here. I have a lightning-combobox component with a bunch of leads. When a user clicks on a particular lead, I want data related to that lead (Name, Company, Email) to be displayed. I'm hoping to achieve this by filtering the avaialble options by the Lead ID which is passed into my onchange handler function but this doesn't seem to work as I had hoped.

I'm expecting the following to be populated but it's just empty.

  <p if:true={value}>Name: {selectedLead.Name}</p>
  <p if:true={value}>Company: {selectedLead.Company}</p>
  <p if:true={value}>Email: {selectedLead.Email}</p>

I tested my filter function in the browser's dev console and it works fine… Can someone give some pointers as to what I'm doing wrong?

Code:

LWC

import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';

export default class LeadDropdownComponent extends LightningElement {
  // tried adding the @track decorator for the following variables but issue still remains
  leadOptions;
  selectedLead;
  value;
  @wire(getLeads)
  leads({ error, data }) {
    if (data) {
      console.log(data)
      try {
        this.leadOptions = data.map(d => {
          return { label: d.Name, value: d.Id };
        });
      } catch (error) {
        console.error(error);
      }
    } else if (error) {
      console.error(error);
    }
  }

  handleChange(event) {
    this.value = event.detail.value;
    this.selectedLead = this.leadOptions.filter(lead => lead.Id === event.detail.value)[0];
  }
}

HTML

<template>
  <lightning-card title="Lead" icon-name="standard:people">
  <lightning-combobox
    name="lead"
    label="Lead"
    value={value}
    options={leadOptions}
    placeholder="Select Lead"
    onchange={handleChange}
  ></lightning-combobox>
  <p if:true={selectedLead}>Name: {selectedLead.Name}</p>
  <p if:true={selectedLead}>Company: {selectedLead.Company}</p>
  <p if:true={selectedLead}>Email: {selectedLead.Email}</p>
</lightning-card>
</template>

Controller

public with sharing class LeadController {
    @AuraEnabled(cacheable=true)
    public static List<Lead> getLeads() {
        try {
            return [SELECT Id, Name, Company, Email FROM Lead WITH SECURITY_ENFORCED];
        } catch (QueryException error) {
            System.debug(error);
            return null;
        }
    }
}

Best Answer

You need another variable to store whole data as your lead option only contain id. So I created leadData variable and assign value and using that.

import { LightningElement, wire } from 'lwc';
import getLeads from '@salesforce/apex/LeadController.getLeads';

export default class LeadDropdownComponent extends LightningElement {
  // tried adding the @track decorator for the following variables but issue still remains
  leadOptions;
  @track leadData;
  selectedLead;
  value;
  @wire(getLeads)
  leads({ error, data }) {
    if (data) {
      console.log(data)
      try {
        this.leadData = data;
        this.leadOptions = data.map(d => {
          return { label: d.Name, value: d.Id };
        });
      } catch (error) {
        console.error(error);
      }
    } else if (error) {
      console.error(error);
    }
  }

  handleChange(event) {
    this.value = event.detail.value;
    this.selectedLead = this.leadData.filter(lead => lead.Id === event.detail.value)[0];
  }
}

Related Solutions

[SalesForce] way to load every label data and every SObject description data in Lightning Web Component using only Javascript without any Apex

An ES6 module is a JavaScript file that explicitly exports variables or functions that other modules can use. Modules make it easier to structure your code without polluting the global scope.

Everything in LWC which is imported and Exported is a ES6 module.

JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.

As this is basically es6 and not just LWC, I tried searching import all from es6.

Surprisingly, there are many results, I tried a solution from most accepted and most voted answer that suggested exporting * first and then importing it in new component.

My code which exports all lables in AllLables module

import { LightningElement } from 'lwc';
export * from '@salesforce/label';


export default class AllLables extends LightningElement {

}

when I try saving it, I get this error:

LWC1507: Exporting * from @salesforce/label is not allowed.

Apparently, even if there is the way in ES6, SF is intentionally blocking it, probably for the same reason it does not allow SELECT * in SOQL

You have to use Apex :(

[SalesForce] Lightning Web Component Combobox

Though I am late in answering this question, but here is the other approach to populate combo box values.

Controller

Here retrieve UserRole records based on SOQL query and no data transformation in this class

public with sharing class UserRoleController {

    @AuraEnabled (cacheable=true)
    public static List<UserRole> getUserRoles(){
        return [SELECT Id, Name FROM UserRole];
    }
}

js Controller class

In this class, inside wiredUserRoles() method, perform data transformation for value and label.

Use, roleOptions() getter property to return the array.

/* eslint-disable no-console */
import { LightningElement , wire, track} from 'lwc';

//import method which should be used from Controller
import getUserRoles from '@salesforce/apex/UserRoleController.getUserRoles';

let i=0;
export default class DisplayUserRole extends LightningElement {

    @track items = []; //this will hold key, value pair
    @track value = ''; //initialize combo box value

    @track chosenValue = '';

    @wire(getUserRoles)
    wiredUserRoles({ error, data }) {
        if (data) {

            //create array with elements which has been retrieved controller
            //here value will be Id and label of combobox will be Name
            for(i=0; i<data.length; i++)  {
                this.items = [...this.items ,{value: data[i].Id , label: data[i].Name} ];                                   
            }                
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

    //gettter to return items which is mapped with options attribute
    get roleOptions() {
        return this.items;
    }

    handleChange(event) {
        // Get the string of the "value" attribute on the selected option
        const selectedOption = event.detail.value;
        console.log('selected value=' + selectedOption);
        this.chosenValue = selectedOption;
    }

    //this value will be shown as selected value of combobox item
    get selectedValue(){
        return this.chosenValue;
    }
}

HTML

<template>
    <lightning-card title="Display User Role" icon-name="custom:custom63">
        <lightning-combobox
            name="Role"
            label="Role Name"
            placeholder="Choose Role"
            value={value}
            onchange={handleChange}
            options={roleOptions}>
        </lightning-combobox>
        <p></p>
        Selected Value:
        <lightning-formatted-text title="Chosen Key" value={selectedValue}></lightning-formatted-text>
    </lightning-card>

</template>

Output

After selection, display the value.

Best Answer

Related Solutions

[SalesForce] way to load every label data and every SObject description data in Lightning Web Component using only Javascript without any Apex

[SalesForce] Lightning Web Component Combobox

Related Topic