Lightning

LWC: Custom picklist using lightning-combobox

When working with LWC sometimes, you need a list of values in picklist(combobox) which is fetched from an apex class. Values can be based on some condition. So, in this blog, we will see how to fetch a list of sObject records and bind values into <lightning-combobox />.


Sample_Combobox.cmp

<template>
	<div class="slds-p-horizontal_medium">
         <lightning-combobox name="types" label="Type" value={value} options={TypeOptions} onchange={handleTypeChange}> </lightning-combobox> 
    </div>
</template>

Sample_Combobox.js

import { 
    LightningElement,
    track,
    wire,
    api
    
} from 'lwc';

import Objects_Type from "@salesforce/apex/Sample_Controller.f_Get_Types";

export default class Sample_Combobox extends LightningElement {
	@track l_All_Types;
    @track TypeOptions;

	@wire(Objects_Type, {})
    WiredObjects_Type({ error, data }) {

        if (data) {
            try {
                this.l_All_Types = data; 
                let options = [];
				
                for (var key in data) {
					// Here key will have index of list of records starting from 0,1,2,....
                    options.push({ label: data[key].Name, value: data[key].Id  });

	                // Here Name and Id are fields from sObject list.
                }
                this.TypeOptions = options;
                
            } catch (error) {
                console.error('check error here', error);
            }
        } else if (error) {
            console.error('check error here', error);
        }

    }
}

Sample_Combobox.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Sample_Controller.cls

public with sharing class Sample_Controller {

	@AuraEnabled(cacheable=true)
    public static List<sObject> f_Get_Types(){
        try {
            List<sObject> l_Types = new List<sObject>();
            
            l_Types = [Select id, Name from Test_Object__c]; // Can include multiple fields, 
			// You can also use any standard or custom object
			// You can get values from custom setting also.
            
            return l_Types;
        } catch (Exception e) {
            System.debug('Exception: '+e.getMessage());
            return null;
        }
    }
}

List that is returned can be

  1. From Query result
  2. Custom list – based on condition
  3. From Custom Setting
  4. Can be from Any Custom or standard objects.
  5. A primitive data type list (list of String or Double or Integer etc.)
  6. A non-primitive data type list (any list of sObject)

Resources:

Lightning Design System- Combobox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s