2

I have intermittent problem on my lwc whereby some user not able to see the values when clicking the picklist value (lightning-combobox). When I login using system admin, I also have the same problem but sometimes I can see the values (using same record).

I have updated my browser (chrome), clear cache and cookies but the issue still remain exist. I am not sure how to debug this

Here is my code:

HTML FILE

<template>
    <lightning-combobox type="text" name="clientSubType" label="Client Sub Type"
                        value={clientSubType}
                        options={clientSubTypeOptions}
                        onchange={handleClientSubTypeChange}>
    </lightning-combobox>Ô
</template>

JS FILE

import { LightningElement, track, api, wire } from 'lwc';
import { getObjectInfo, getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import CASE_OBJECT from '@salesforce/schema/Case';
import getCaseDetails from '@salesforce/apex/CaseWizardController.getCase';


export default class CaseWizard extends LightningElement {
    @track errors = [];

    @api recordId; //current caseId
    @api objectApiName; //get currenct object name
    @track realCase;
    @track trackedCase;
    @track recordTypeId = '';

    @track clientSubTypeOptions;

    @track clientSubType;

    @wire(getCaseDetails, { caseId: '$recordId' })
    wiredCase(result) {
        this.realCase = result;
        if (result.data) {
            //need to use spread function for update as we need to update single object
            this.trackedCase = { ...this.realCase.data };
            this.recordTypeId = this.trackedCase.RecordTypeId;
        }
        else if (result.error) {
            this.errors = result.error;
            // eslint-disable-next-line no-console
            console.error('getCaseDetails ERROR => ' + JSON.stringfy(result.error));
        }
    }

    // fetch account object all picklist fields based on recordTypeId
    @wire(getPicklistValuesByRecordType, {
        objectApiName: CASE_OBJECT,
        recordTypeId: '$recordTypeId'
    })
    wiredRecordTypeInfo({ data, error }) {
        if (data) {
            this.clientSubTypeOptions = [ { label: '-- Select --', value: '-- Select --', selected: true }, ...data.picklistFieldValues.Client_Sub_Type__c.values ];
        }
        else if (error) {
            console.error("wiredRecordTypeInfo Error Occured => " + JSON.stringify(error));
        }
    }

    handleClientSubTypeChange(event) { this.clientSubType = event.target.value; }
}

APEX CONTROLLER

public with sharing class CaseWizardController {
    @AuraEnabled(Cacheable=true)
    public static Case getCase(Id caseId) {
        return [
                SELECT Id, Client_Sub_Type__c
                FROM Case
                WHERE Id = :caseId
                LIMIT 1
        ];
    }
}
2
  • Problem here seems like recordTypeId: '$recordTypeId' recordTypeId is not available by default like the recordId. With hardcoding the record type, it works. Do you want to keep it hardcoded or retrieve the record type from current record? – Raul Jan 27 '20 at 11:32
  • I also thought that. It seems the recordTypeId is not available when system try to get the picklist values. I need to get record type from current record as user might have multiple record types. Do you know how do I ensure the function run when recordtypeId is available? I am not sure about @wire decorator order execution – Febrian Rizky Jan 27 '20 at 11:34
1

The problem here is recordTypeId in getPicklistValuesByRecordType is not available by default.

To get current record's recordTypeId, you would need to make a getRecord call asking it to retrieve the recordTypeId. Psuedo example is as below:

import { LightningElement, track, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import CASE_OBJECT from '@salesforce/schema/Case';
import CASE_RECORD_TYPE_ID_FIELD from '@salesforce/schema/Case.RecordTypeId';

export default class Lwc_292449 extends LightningElement {

    @api recordId; //current caseId
    @track recordTypeId = '';

    // call to get current record
    @wire(getRecord, { recordId: '$recordId', fields: [CASE_RECORD_TYPE_ID_FIELD] })
    callbackGetRecord({ data, error }) {
        if (data) {
            // set current record's record type id
            this.recordTypeId = data.fields.RecordTypeId.value;
        } else if (error) {
            console.error("callbackGetRecord => " + JSON.stringify(error));
        }
    }
}

After this call you can make your current call to getPicklistValuesByRecordType to retrieve the picklist value by record type.


Full working example is as below:

html:

<template>
    <lightning-card>
        <p class="slds-p-horizontal_small">
            <lightning-combobox type="text" name="clientSubType" label="Client Sub Type" value={clientSubType}
                options={clientSubTypeOptions} onchange={handleClientSubTypeChange}>
            </lightning-combobox>
        </p>
    </lightning-card>
</template>

js:

import { LightningElement, track, api, wire } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import { getRecord } from 'lightning/uiRecordApi';
import CASE_OBJECT from '@salesforce/schema/Case';
import CASE_RECORD_TYPE_ID_FIELD from '@salesforce/schema/Case.RecordTypeId';

export default class Lwc_292449 extends LightningElement {
    @track errors = [];

    @api recordId; //current caseId
    @api objectApiName; //get currenct object name
    @track realCase;
    @track trackedCase;
    @track recordTypeId = '';
    @track clientSubTypeOptions;
    @track clientSubType;

    // call to get current record
    @wire(getRecord, { recordId: '$recordId', fields: [CASE_RECORD_TYPE_ID_FIELD] })
    callbackGetRecord({ data, error }) {
        if (data) {
            // set current record's record type id
            this.recordTypeId = data.fields.RecordTypeId.value;
        } else if (error) {
            console.error("callbackGetRecord => " + JSON.stringify(error));
        }
    }

    // fetch case object's all picklist fields based on recordTypeId
    @wire(getPicklistValuesByRecordType, {
        objectApiName: CASE_OBJECT,
        recordTypeId: "$recordTypeId"
    })
    wiredRecordTypeInfo({ data, error }) {

        if (data) {
            // set the default value
            this.clientSubType = '--Select--';

            // populate the picklist values
            this.clientSubTypeOptions = [
                { label: '-- Select --', value: '-- Select --' }, 
                ...data.picklistFieldValues.Origin.values
            ];

        } else if (error) {
            console.error("wiredRecordTypeInfo Error Occured => " + JSON.stringify(error));
        }
    }

    handleClientSubTypeChange(event) {
        // note: event.target.value is not the correct syntax to get selected option
        const selectedOption = event.detail.value;
        console.log(`Option selected with value: ${selectedOption}`);
    }

}
4
  • I just wondering here, how do you know that getRecord function is run before getPicklistValuesByRecordType function? as I also get the recordTypeId on my getCaseDetails function – Febrian Rizky Jan 27 '20 at 12:11
  • I didn't see the record type id call in your apex code, you could either make call to ui api or apex to retrieve record type id. Its just the way how wire method works, whenever the inputs are modified the wire methods gets called. – Raul Jan 27 '20 at 12:36
  • I assign recordtypeid under wiredCase function. – Febrian Rizky Jan 28 '20 at 3:39
  • Confusing part of your code example was RecordTypeId field is not added in the server side apex's SOQL. This looks like a race condition in between wire statement, will try this – Raul Jan 30 '20 at 13:24

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.