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

sfdx force:apex:class:create -n OpportunityByStage -d force-app/main/default/apex

Here is the complete apex class

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

sfdx force:lightning:component:create --type lwc -n ComboboxEx -d force-app/main/default/lwc

Here is the ComboboxEx.html code

<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.

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

<?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

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.