1. Create a combobox in LWC which will display list of Object in your ORG.
2. Combobox details is as follows,
Label: Object Label
Value: Object API
Solution:
For this example first we have to create a LWC project in Visual Studio.
[Check my post to how to create LWC project and LWC component
Link: Create your first LWC component].
1. First create an Apex class named as LWCComboboxExamplController and under this class create a
method named as getListOfObjDetails() which will return list of object details. Copy paste the
below code base,
public with sharing class LWCComboboxExamplController {
@AuraEnabled(cacheable=true)
public static List<ObjectDetailsWrapper> getListOfObjDetails() {
Map<String, SObjectType> mapOfObjs = schema.getGlobalDescribe();
if(mapOfObjs != null && mapOfObjs.keySet() != null) {
List<ObjectDetailsWrapper> lstOfObjWrapper
= new List<ObjectDetailsWrapper>();
for(String key: mapOfObjs.keySet()) {
ObjectDetailsWrapper objWrapInst
= new ObjectDetailsWrapper();
if(mapOfObjs.get(key) != null
&& mapOfObjs.get(key).getDescribe() != null)
objWrapInst.objLabel
= mapOfObjs.get(key).getDescribe().getLabel();
objWrapInst.objAPI = key;
lstOfObjWrapper.add(objWrapInst);
}
return lstOfObjWrapper;
}
return null;
}
public class ObjectDetailsWrapper {
@AuraEnabled
public String objLabel;
@AuraEnabled
public String objAPI;
}
}
2. Create a Lightning Web Component named as "lwcComboboxExample". System will automatically create 3 files (lwcComboboxExampl.html, lwcComboboxExampl.js, lwcComboboxExampl.js-meta.xml) under "lwc" folder (default location).
3. Modify "lwcComboboxExampl.js-meta.xml" with below line of codes.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
4. Modify "lwcComboboxExampl.hml" with below line of codes.
<template>
<lightning-card title="Combobox Example">
<lightning-combobox
name="objects"
label="Select an Object"
value={selectedObjValue}
placeholder="Select an Object"
options={objectOptions}
onchange={handleObjectChange} >
</lightning-combobox>
<p>Object selection is: {selectedObjValue}</p>
</lightning-card>
</template>
5.Modify "lwcComboboxExampl.js" with below line of codes
import { LightningElement, wire, track } from 'lwc';
import getListOfObjDetails from '@salesforce/apex/LWCComboboxExamplController.getListOfObjDetails';
export default class LwcComboboxExample extends LightningElement {
//variable responsibles for holding the array for records with value & label.
@track objItems = [];
//variable responsibles for holding errors.
@track objError;
//variable responsibles for holding the selected object value of combo-box.
@track selectedObjValue = '';
/**
* Calling Apex class method getListOfObjDetails() and hold the information under variable listOfObjectDetails.
* This is also responsible to creat a JSON array with key and value pair for combobox and the
* array value are stored under the tracking array variable named as 'objItems[]'.
*/
@wire
(getListOfObjDetails) listOfObjectDetails({ error, data }) {
if (data) {
for(var i=0; i<data.length; i++) {
this.objItems = [...this.objItems ,{value: data[i].objAPI , label: data[i].objLabel}];
}
} else if (error) {
this.objError = error;
this.objects = undefined;
}
}
/**
* Return list of Objects for combobox.
*/
get objectOptions() {
return this.objItems;
}
/**
* Holding onchange object under tracking variable 'selectedObjValue'.
* @param {*} event
*/
handleObjectChange(event) {
this.selectedObjValue = event.detail.value;
}
}
6. Go to Lighting App Builder and then create a new App Page (Combobox Example). Drag your "lwcComboboxExampl" in to "Combobox Example". Than save and activate it.
7. Now from "App Launcher" click on the "Combobox Example" and the output will like below,
After selecting object say Account, it will be look like below,
