TransWikia.com

How can I bind values from Apex to my options variable in LWC?

Salesforce Asked on December 31, 2021

I have a custom datatable which accepts options like below:

import getTimezones from "@salesforce/apex/IntroductionSelector.getTimezones";
...
        {
            label: "Timezone",
            fieldName: "timezone",
            sortable: false,
            type: "picklist",
            typeAttributes: {
                placeholder: "Choose timezone",
                options: [
                    { label: "Greenwich Mean Time", value: "GMT" },
                    { label: "Pacific Standard Time", value: "PST" },
                    { label: "Eastern Standard Time", value: "EST" }
                ],
            }
        },

Using my getTimezones method how can I bind the label as MasterLabel and value as DeveloperName?

@AuraEnabled
public static String getTimezones()
{
    return JSON.serialize([SELECT MasterLabel, DeveloperName, Offset__c FROM Timezone__mdt]);

}

2 Answers

You don't need to JSON.serialize your data from Apex. If your Apex method looks like this...

@AuraEnabled
public static List<Timezone__mdt> getTimezones() {
    return [SELECT MasterLabel, DeveloperName, Offset__c FROM Timezone__mdt];
}

...it will show up in JavaScript looking like this...

[
    { 
        MasterLabel: 'Greenwich Mean Time',
        DeveloperName: 'GMT',
        Offset__c: 0
    },
    { 
        MasterLabel: 'Pacific Standard Time',
        DeveloperName: 'PST',
        Offset__c: -8
    },
    // etc.
]

Given this type of data, maybe the simplest way to populate your columns is with an Array.prototype.map() function, like this:

get columns() {
    return [
        { 
            label: 'Name', 
            fieldName: 'name' 
        },
        {
            label: 'Timezone',
            fieldName: 'timezone',
            sortable: false,
            type: 'picklist',
            typeAttributes: {
                placeholder: 'Choose timezone',
                options: this.timezones.map(tz => {
                    return {
                        label: tz.MasterLabel,
                        value: tz.DeveloperName
                    }
                }),
            }
        }
    ];
}

Answered by Matthew Souther on December 31, 2021

You can also create a small wrapper class and return a list of those as well. Iterate through your list of Timezones and create create a new instance of the wrapper class for each Timezone.

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

Answered by Ben Nguyen on December 31, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP