function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
jrvjrv 

lightning-combobox options from Apex controller

How do I populate a lightning-combobox with options from an Apex controller?

I have the following, but the combox doesn't show any options. I can see the alert popup with the option Name it's just not diplaying in the combobox.

HTML 
<template>
    <lightning-combobox
        name="recentReports"
        label="Report"
        placeholder="Select Report"
        value={value}
        options={reportOptions}
        onchange={handleRecentReportsChange} >
    </lightning-combobox>
</template>

JS 
import { LightningElement, track, wire } from 'lwc';
import getRecentReports from '@salesforce/apex/ReportController.getRecentReports';

export default class ReportLink extends LightningElement {
    @track reportOptions = [];
    @track value = '';
    
    connectedCallback() {
        getRecentReports()
            .then(result => {
                for (var i = 0; i < result.length; i++) {
                    this.reportOptions.push({label: result[i].Name, value: result[i].Id});
                    alert(result[i].Name);
                }
            })
            .catch(error => {
                alert(JSON.stringify(error));
            });
    }

    handleRecentReportsChange(){

    }

}
Apex 
public with sharing class ReportController {
    public ReportController() {

    }

    @AuraEnabled(Cacheable=true)
    public static List<RecentlyViewed> getRecentReports(){
        return [SELECT Id, Name FROM RecentlyViewed WHERE Type = 'Report'];
    }

}


 
VinayVinay (Salesforce Developers) 
Hi Jrv,

Review below links that can help with examples on lightning-combobox options from Apex controller.

https://salesforce.stackexchange.com/questions/255764/how-do-i-populate-a-lightningcombobox-with-content-from-a-map
https://rajvakati.com/2018/05/10/usage-of-lightningcombobox/
https://www.biswajeetsamal.com/blog/combobox-in-lightning-component/

Hope above information was helpful.

Please mark as Best Answer so that it can help others in the future.

Thanks,
Vinay Kumar
Michael Roth 26Michael Roth 26
Your suggestions don't help, and feel like a lazy response
Daniel Martinez 73Daniel Martinez 73

Hi jvr, I just faced this issue today and found how to solve it. The problem is the options array needs to be updated before being rendered, so the way I solved it was creating a boolean variable to re-render the combobx once the javascript has updated the array.

Applying that to your code will be as follows:

HTML

<template if:true={optionsLoaded}>
    <lightning-combobox
        name="recentReports"
        label="Report"
        placeholder="Select Report"
        value={value}
        options={reportOptions}
        onchange={handleRecentReportsChange} >
    </lightning-combobox>
</template>
 

JS
 

import { LightningElement, track, wire } from 'lwc';
import getRecentReports from '@salesforce/apex/ReportController.getRecentReports';

export default class ReportLink extends LightningElement {
    @track reportOptions = [];
    @track value = '';
    @track optionsLoaded = false;
    
    connectedCallback() {
        getRecentReports()
            .then(result => {
                for (var i = 0; i < result.length; i++) {
                    this.reportOptions.push({label: result[i].Name, value: result[i].Id});
                    alert(result[i].Name);
                }
                this.optionsLoaded = true;
            })
            .catch(error => {
                alert(JSON.stringify(error));
            });
    }

    handleRecentReportsChange(){

    }

}
this will ensure the combobox in the HTML only gets rendered once the options array has being filled by your getRecentReports method.

Hope it helps,
Daniel Martinez