4

i'm developing lightning web component and i want to fill or populate my combobox from result of apex method so how i can in the html file get the result from JavaScript file and put them in the combobox.

Template:

 <lightning-combobox
            name="Role"
            label="Role Name"
            value={value}
            placeholder=""
            options={rolesList.data.values}
            onchange={handleChange} >
        </lightning-combobox>    

javascript file:

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

import getRoles from '@salesforce/apex/LeaveSettingsController.getRoles';

@wire(getRoles)
    rolesList;
  • What have tried so far? can you please add your code to the question – RedDevil Apr 10 at 8:08
  • @RedDevil i post my code in an answer – sally yamak Apr 10 at 8:37
  • Added answer to your question – RedDevil Apr 10 at 9:56
  • @sallyyamak What does LeaveSettingsController.getRoles return, a List<String>? – Jayant Das Apr 10 at 12:46
  • yes it returns a list<String> – sally yamak Apr 10 at 13:00
3

You need to set a javascript property on the template like below

options={rolesOptions}

and in the javascript file

create a getter function for it

get rolesOptions() {
        return this.rolesList.data.values;
    }

I havent tested this solution but should work theoretically based on this documentation

  • This will work only if the combobox (since it will request the getter) is surrounded with <template if:true={rolesList.data}>. And taking a second look at the question, it should work even if no getter function were created but @sally yamak surrounded the combobox with the condition render anyways. – tsalb Apr 10 at 10:09
  • Thank you RedDevil, tsalb i will try this.... – sally yamak Apr 10 at 10:15
  • I try it and it's also not working the combobox is empty – sally yamak Apr 10 at 12:33
  • Can you console log the output of roleslist to the question – RedDevil Apr 10 at 13:09
  • Can you also check if your aura enabled method cacheable is set to true – RedDevil Apr 10 at 16:49
2

Though I am late in answering this question, but here is the other approach to populate combo box values.

Controller

Here retrieve UserRole records based on SOQL query and no data transformation in this class

public with sharing class UserRoleController {

    @AuraEnabled (cacheable=true)
    public static List<UserRole> getUserRoles(){
        return [SELECT Id, Name FROM UserRole];
    }
}

js Controller class

In this class, inside wiredUserRoles() method, perform data transformation for value and label.

Use, roleOptions() getter property to return the array.

/* eslint-disable no-console */
import { LightningElement , wire, track} from 'lwc';

//import method which should be used from Controller
import getUserRoles from '@salesforce/apex/UserRoleController.getUserRoles';

let i=0;
export default class DisplayUserRole extends LightningElement {

    @track items = []; //this will hold key, value pair
    @track value = ''; //initialize combo box value

    @track chosenValue = '';

    @wire(getUserRoles)
    wiredUserRoles({ error, data }) {
        if (data) {

            //create array with elements which has been retrieved controller
            //here value will be Id and label of combobox will be Name
            for(i=0; i<data.length; i++)  {
                this.items = [...this.items ,{value: data[i].Id , label: data[i].Name} ];                                   
            }                
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

    //gettter to return items which is mapped with options attribute
    get roleOptions() {
        return this.items;
    }

    handleChange(event) {
        // Get the string of the "value" attribute on the selected option
        const selectedOption = event.detail.value;
        console.log('selected value=' + selectedOption);
        this.chosenValue = selectedOption;
    }

    //this value will be shown as selected value of combobox item
    get selectedValue(){
        return this.chosenValue;
    }
}

HTML

<template>
    <lightning-card title="Display User Role" icon-name="custom:custom63">
        <lightning-combobox
            name="Role"
            label="Role Name"
            placeholder="Choose Role"
            value={value}
            onchange={handleChange}
            options={roleOptions}>
        </lightning-combobox>
        <p></p>
        Selected Value:
        <lightning-formatted-text title="Chosen Key" value={selectedValue}></lightning-formatted-text>
    </lightning-card>

</template>

Output

Display User Role

After selection, display the value.

Selected value

  • You could also use a nifty Javascript array function "map". if (data) { this.roleOptions = data.map(function (userRole){ return {label:userRole.Name, value:userRole.Id} }); – MayTheSForceBeWithYou Sep 16 at 16:55
1

Apex Class:

    @AuraEnabled(cacheable=true)
    public static List<OptionWrapper> getRoles(){
       List<OptionWrapper> roleNameList = new List<OptionWrapper>();
       for(userRole role :[SELECT Id, Name FROM UserRole]){
         roleNameList.add(new OptionWrapper(role.Name, role.Name));
       }
       System.debug(roleNameList);
       return roleNameList;
    }

    public class OptionWrapper {
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String value {get; set;}

        public OptionWrapper(String label, String value) {
            this.label = label;
            this.value = value;
        }
    }

Template:

  <lightning-combobox
                name="Role"
                label="Role Name"
                value={value}
                placeholder=""
                options={rolesOptions}
                onchange={handleChange} >
            </lightning-combobox>

Js File:

@track value = 'CEO';
@wire(getRoles)
    rolesList; 

    get rolesOptions() {
        // eslint-disable-next-line no-console
        console.log('>>>>'+JSON.stringify(this.rolesList.data));
        return this.rolesList.data;
    }

0

Apex code:

@AuraEnabled
public static String getValues() {
    SummaryList = new List<Summary>();
    List<Object> ConfigListGrupos = new List<Object>();

    ConfigListGrupos = [SELECT (Filed 1), DCABM_fld_valor__c 
            FROM .....];

    for(Object a : ConfigListGrupos) {
        SummaryList.add(new Summary(a.(Filed 1), a.DCABM_fld_valor__c));               
    }

    String jSONSummaryList = JSON.serialize(SummaryList);
    return jSONSummaryList;
}

public class Summary {
    public String value {get;set;}
    public String label {get;set;}

    public Summary(String param1, String param2) {
        value = param1;
        label = param2;
    }
}

JavaScript Code:

import { LightningElement, track, wire } from 'lwc';
import getValues from '@salesforce/apex/(Your Class).getValues';

export default class MyLWC extends LightningElement {
@track options;

@wire(getValues)
wiredValues({ data, error }) {
    if (data) {
        this.options = JSON.parse(data);
    } else if (error) {
        window.console.log('Error in wiredValues');
        window.console.log(error);
    }
}
}

HTML code:

<template>
  <lightning-combobox
     name="type"
     label="Type values"
     placeholder="Select values"
     options={options}
     data-field="userType"
     required>
  </lightning-combobox>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.