Lightning Web Component Combobox
Let us discuss here how to use the Lightning Web Component Combobox .lightning-combobox is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input. In this example, we will be showing the list of the opportunities based on the selected stage name. Refer this link to environment setup
1.Create an apex class
create an Apex class that will be fetching the opportunities based on the selected stage name . it this class we have an Aura Enabled method that will accept the stage name and return the list of opportunities. Use this SFDX command to create an apex class
|
1 |
sfdx force:apex:class:create -n OpportunityByStage -d force-app/main/default/apex |
Here is the complete apex class
|
1 2 3 4 5 6 7 8 9 |
public with sharing class OpportunityByStage { @AuraEnabled(cacheable=true) public static List<Opportunity> getOppByStage(String stage) { System.debug('Stage Name'+stage); return [SELECT Id, Name ,StageName, CloseDate, Account.Name from Opportunity where StageName = :stage]; } } |
2. Create a Lightning Web Component
Now create a lightning web component that will display the combobox which contains the opportunity stage names .based on the selected opportunity stage name this component will display the list of opportunities.
Use this SFDX command to create a lightning web component
|
1 |
sfdx force:lightning:component:create --type lwc -n ComboboxEx -d force-app/main/default/lwc |
Here is the ComboboxEx.html code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <h6> Get Opportunities based on the Selected Opportunity Stage </h6> <lightning-combobox name="Opportunity Stage" label="Opportunity Stage" placeholder="Choose Status" value={value} onchange={handleChange} options={statusOptions}> </lightning-combobox> <template if:true={opportunities}> <table class="slds-table"> <thead> <tr class="slds-line-height_reset"> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate">Opportunity Name</div> </th> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate">Stage</div> </th> <th class="slds-text-title_caps" scope="col"> <div class="slds-truncate">Close Date</div> </th> </tr> </thead> <tbody> <template for:each={opportunities} for:item="opp"> <tr class="slds-hint-parent" key={opp.Id}> <td> <div class="slds-truncate" key={opp.Id}>{opp.Name}</div> </td> <td> <div class="slds-truncate" key={opp.Id}>{opp.StageName}</div> </td> <td> <div class="slds-truncate" key={opp.Id}>{opp.CloseDate}</div> </td> </tr> </template> </tbody> </table> </template> </template> |
Here is the ComboboxEx.js JavaScript controller.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import { LightningElement, api, wire, track } from 'lwc'; import getOppByStage from '@salesforce/apex/OpportunityByStage.getOppByStage'; export default class ComboboxEx extends LightningElement { @track opportunities; @track error; @track statusOptions = [{ value: 'Prospecting', label: 'Prospecting' }, { value: 'Qualification', label: 'Qualification' }, { value: 'Needs Analysis', label: 'Needs Analysis' }, { value: 'Closed Lost', label: 'Closed Lost' }, { value: 'Closed Won', label: 'Closed Won' } ]; @track value = 'Prospecting'; handleChange(event) { const select = event.detail.value; getOppByStage({ stage: select }) .then(result => { this.opportunities = result; this.error = undefined; }) .catch(error => { this.error = error; this.opportunities = undefined; }); } } |
Here is the ComboboxEx.js-meta.xml configuration file
|
1 2 3 4 5 6 7 8 9 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>false</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
3. Push Changes and add the Component to record page
Now push the changes using this SFDX command
|
1 |
sfdx force:source:push |
Now add this web component to the opportunity record page using lightning app builder and you can able to see the result as shown below.
Now select the stage name from the combobox and it will display the list of opportunities as shown below.
