html:
<template>
<lightning-dual-listbox name="languages"
label="Select Languages"
source-label="Available"
selected-label="Selected"
field-level-help="Select your preferred languages"
options={options}
onchange={handleChange}></lightning-dual-listbox>
<div class="slds-box" >
<p>Selected values are: {selected}</p>
</div>
</template>
js:
import { LightningElement, wire } from 'lwc';
import getObjectLabels from '@salesforce/apex/metadataController.getObjectNames';
export default class DualListboxSimple extends LightningElement {
@wire(getObjectLabels) contacts;
_selected = [];
get options() {
console.log(this.contacts.data);
return this.contacts.data;
// return [
// { label: 'English', value: 'en' },
// { label: 'German', value: 'de' },
// { label: 'Spanish', value: 'es' },
// { label: 'French', value: 'fr' },
// { label: 'Italian', value: 'it' },
// { label: 'Japanese', value: 'ja' },
// ];
}
get selected() {
return this._selected.length ? this._selected : 'none';
}
handleChange(e) {
this._selected = e.detail.value;
}
}
Apex:
public class metadataController {
@AuraEnabled(Cacheable=true)
public static List<dualboxOption> getObjectNames(){
// Tooling API callout to return list of objects, TBD: dynamic session ID
String baseURL = System.URL.getSalesforceBaseUrl().toExternalForm();
String endpoint = baseURL + '/services/data/v55.0/tooling/query/?q=Select+MasterLabel+from+EntityDefinition+WHERE+IsCustomizable=true';
HttpRequest req = new HttpRequest();
req.setEndpoint(endpoint);
req.setMethod('GET');
req.setHeader('Authorization', 'Bearer ' + '...');
req.setHeader('Content-Type', 'application/json');
Http h = new Http();
HttpResponse res = h.send(req);
system.debug(res.getBody());
//Parsing payload into map and then extracting list of records (these are Salesforce objects)
Map<String, Object> reponsePayload = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());
List<Object> reseponsePayloadRecords = (List<Object>) reponsePayload.get('records');
List<String> objectLabels = new List<String>();
List<dualboxOption> objectList = new List<dualboxOption>();
//Extracting MasterLabel from the lsit of records
for(Object record : reseponsePayloadRecords){
String json = JSON.serialize(record);
Map<String, Object> recordMap = (Map<String,Object>) record;
objectLabels.add((String)recordMap.get('MasterLabel'));
}
//After extracting labels, for each label creating a dualboxOption to display in LWC
for(String objectLabel : objectLabels){
dualboxOption singleObject = new dualboxOption();
singleObject.label = objectLabel;
singleObject.value = objectLabel;
objectList.add(singleObject);
}
return objectList;
}
class dualboxOption{
public string label;
public string value;
}
}
My problem is that the LWC component does render with options to select, but they don't have any name. I can select the values and I see that there are options, but they are missing any data. Where am I going wrong?
Response data in console (options method in js controller):
(137) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]