Apex Lightning Web Components – Async/Await Value Not Returning

apexasynchronouslightning-comboboxlightning-web-components

I have 2 picklists. When the first picklist get clicked, it will captured the value and pass to the second picklist.

Right now, I'm using async/await and also try to call it imperative but it did not work

Apex controller:

    @AuraEnabled(cacheable=true)
    public static Map<String,String> getPicklistTypeFields(String strObjectName) {
        Map<String, Schema.SObjectType> detail = Schema.getGlobalDescribe();
        Map<String,String> mapOfPicklistTypeFields = new  Map<String,String>();
        for(Schema.SObjectField fields :detail.get(strObjectName).getDescribe().fields.getMap().Values()) {
            If(fields.getDescribe().getType() == Schema.DisplayType.PICKLIST) { 
                mapOfPicklistTypeFields.put(fields.getDescribe().getLabel(), fields.getDescribe().getName());
            }
        }
        return mapOfPicklistTypeFields;
    }
    
    @AuraEnabled(cacheable = true)
    public static Map<String,String> getValueForSelectedPicklistField(string strObjectName, string selectedField){
        try {
            System.debug('Object Name '+strObjectName);
            System.debug('Selected Field '+selectedField);
            Map<String,String> options = new  Map<String,String>(); 
            Map<String, Schema.SObjectField> mapFields = Schema.getGlobalDescribe().get(strObjectName).getDescribe().fields.getMap();
            Schema.DescribeFieldResult pickFieldResult = mapFields.get(selectedField).getDescribe();   
            List<Schema.PicklistEntry> picklistFields1 = pickFieldResult.getPicklistValues();
                for( Schema.PicklistEntry pickListFields2 : picklistFields1)
                {
                    options.put(pickListFields2.getLabel(),pickListFields2.getValue());
                }       
            return options;
        } catch (Exception e) {
            return null;
        }
    }

HTML code:

<div class="slds-card">
        <lightning-combobox name="fieldList" label="Group By" onchange={getPicklistFieldsOptions} options={lstOfPicklistFields} placeholder="Select Field"></lightning-combobox>
    </div>
    <div class="slds-card">
        <lightning-combobox name="fieldList" label='Available values' options={objectFieldOptionsList} placeholder="Select Field"></lightning-combobox>
    </div>

JS code:

fieldSelectedToGetPicklistTypeField = '';
    getPicklistFieldsOptions(event) { 
        this.fieldSelectedToGetPicklistTypeField = event.detail.value;
        console.log('Value'+ this.fieldSelectedToGetPicklistTypeField);
        this.getPicklistValuesForSelectedPicklistField();
    }
    
    @track objectFieldOptionsList = [];
    async getPicklistValuesForSelectedPicklistField() {
        await getValueForSelectedPicklistField({ strObjectName: '$objectApiName', selectedField: this.fieldSelectedToGetPicklistTypeField })
        .then((result) => {
          if (result) {
              this.objectFieldOptionsList = [];
            for (let key in result) {
                this.objectFieldOptionsList.push({ label: key, value: result[key] });
            }
             
          } 
        }).catch((error) => {
          console.log('Error in getting pickist values')
        })
    }

Thank you so much!

Best Answer

It is because of how you are passing in the input parameter to your apex class. You cannot use the '$objectApiName' inside a function. I will edit this post to be more detailed

for the code below, I am assuming you have @api objectApiName, at the top of your JS somewhere.

fieldSelectedToGetPicklistTypeField = '';
    getPicklistFieldsOptions(event) { 
        this.fieldSelectedToGetPicklistTypeField = event.detail.value;
        console.log('Value'+ this.fieldSelectedToGetPicklistTypeField);
        this.getPicklistValuesForSelectedPicklistField();
    }
    
    @track objectFieldOptionsList = [];
    async getPicklistValuesForSelectedPicklistField() {
        await getValueForSelectedPicklistField({ strObjectName: this.objectApiName, selectedField: this.fieldSelectedToGetPicklistTypeField })
        .then((result) => {
          if (result) {
              this.objectFieldOptionsList = [];
            for (let key in result) {
                this.objectFieldOptionsList.push({ label: key, value: result[key] });
            }
             
          } 
        }).catch((error) => {
          console.log('Error in getting pickist values')
        })
    }

Related Solutions

LWC Async/Await – How to Use async/await Functions in Lightning Web Components

async/await syntax is fully supported by LWC. However, as it was introduced in ES8, in old browsers, this syntax is transpiled down to ES5, which can cause performance issues if the code is executed many times.

the await keyword is only valid inside async functions

In your case to make your code deployable with using async/await syntax you can use 3 approaches:

Declare some async init() function and invoke it within connectedCallback() hook:

connectedCallback() {
    this.init();
}


async init() {
    try {
        this.accounts = await getAll();
        const value = await this.promiseFunc();
        console.log('2nd then executes after 3 seconds async, value:' + value);
    } catch (error) {
        this.error = error;
    } finally {
        this.isLoaded = true;
    }
}

Invoke it anonymously as an IIFE:

connectedCallback() {
    (async () => {
        try {
            this.accounts = await getAll();
            const value = await this.promiseFunc();
            console.log('2nd then executes after 3 seconds async, value:' + value);
        } catch (error) {
            this.error = error;
        } finally {
            this.isLoaded = true;
        }
    })();
}

Make your connectedCallback() lifecycle hook async:

async connectedCallback() {
    try {
        this.accounts = await getAll();
        await this.errorPromise();
        const value = await this.promiseFunc();
        console.log('2nd then executes after 3 seconds async, value:' + value);
    } catch (error) {
        this.error = error;
    } finally {
        this.isLoaded = true;
    }
}

I wouldn't recommend you to use the 3rd option at least for API consistency. Not sure about long term effects.

As for catching errors of async functions you can use try/catch block or handle them separately, using catch() method because async function implicitly returns a promise:

this.accounts = await getAll().catch(error => this.error = error);
const value = await this.promiseFunc().catch((/*rejected obj*/) => /*error handling*/);

Lightning Web Components – How to Call Async/Await Methods in LWC

There is no need of async/await. Once the first wired method returns data, you can call the second apex method imperatively:

@wire(checkCustomerStatus, { accId: '$recordId'})
wiredcheckCustomerStatus  ({ error, data }){
    if(data) {
        this.message = data;
        this.custmStatus = data;
        this.variant = 'error',
        this.dispatchEvent(new CloseActionScreenEvent());
        this.showNotification();
        
        checkBlockingConditionsOB({ accId: this.recordId })
            .then((result) => {
                this.message = result;
                this.variant = 'warning',
                this.dispatchEvent(new CloseActionScreenEvent());
                this.showNotification();  
            })
            .catch((error) => {
                console.log('erro status -' + error);
            });
    }
    if(error) {
        console.log('erro status -' + error);
    }
}

Best Answer

Related Solutions

LWC Async/Await – How to Use async/await Functions in Lightning Web Components

Lightning Web Components – How to Call Async/Await Methods in LWC

Related Topic