2

I'm trying to create record Type selection screen in LWC, but getting this error

afterRender threw an error in 'c:createContact' [Cannot read property 'recordTypeInfos' of undefined]

HTML:

<template>
    <lightning-combobox name="recordType" label="Record Type" placeholder="Choose Status"
                        value={value} 
                        options={recordTypeId}>

    </lightning-combobox>
</template>

JS:

import { LightningElement, track, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import CONTACT_OBJECT from '@salesforce/schema/Contact';

export default class CreateContact extends LightningElement {

    @track statusOptions;
    @track value;
    @api objectApiName;

    @track objectInfo;

    @wire(getObjectInfo, { objectApiName: CONTACT_OBJECT,})
    objectInfo;


    get recordTypeId() {
        // Returns a map of record type Ids 
        console.log(this.objectInfo);
        const rtis = this.objectInfo.data.recordTypeInfos;
        return rtis;
    }

}
  • Use console.log(JSON.stringify(this.objectInfo)); to see what data you have. – Keith C May 19 at 12:58
7

First thing i would do is put the combobox inside a div and only open it up once the wire data for recordtype comes from the object.

<div if:true={objectInfo.data}>
<lightning-combobox name="recordType" label="Record Type" placeholder="Choose Status"
value={value} 
options={recordTypeId1}>
</lightning-combobox>
</div>

Secondly in javascript where you are constructing the combobox for UI ,you need to match the format of lightning combobox specified in its documentation

 get recordTypeId1() {
      var recordtypeinfo = this.objectInfo.data.recordTypeInfos;
      var uiCombobox = [];
      console.log("recordtype" + recordtypeinfo);
      for(var eachRecordtype in  recordtypeinfo)//this is to match structure of lightning combo box
      {
        if(recordtypeinfo.hasOwnProperty(eachRecordtype))
        uiCombobox.push({ label: recordtypeinfo[eachRecordtype].name, value: recordtypeinfo[eachRecordtype].name })
      }
      console.log('uiCombobox' + JSON.stringify(uiCombobox));
    return uiCombobox;
  }

Once the wire data comes back the combobox will openup in markup and your getter function will run

@wire(getObjectInfo, { objectApiName: CONTACT_OBJECT}) objectInfo;

Also the default value for the combo box UI, put a value which is in your object.

@track value = 'Client User';
  • Its working, but if I remove the if condition from the div then why I'm getting "afterRender threw an error in 'c:createContact' [Cannot read property 'recordTypeInfos' of undefined]" error? – salesforce Developer May 24 at 10:17
  • 1
    @salesforceDeveloper - its a race condition, the wire data has not come back and you are trying to access objectInfo data through the getter expression function recordTypeId, thats why you need to open up the getter once the data comes back – RedDevil May 24 at 16:30
  • Thanks for answer – salesforce Developer May 25 at 18:03
  • Consider replacing the <div> with <template> to avoid influencing the rendered DOM structure – Kevin Venkiteswaran Jul 17 at 15:28

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.