0

I have a custom LWC that displays contact information to edit. One of the fields is the MailingState. Currently this field is a standard input field but I would like it to display as a picklist. Its my understanding that it will display as a picklist if you pass the record-type-id if there are multiple record Types. I have implemented State Picklist for Salesforce. I have checked the field outside of the custom lwc and it is a picklist.

Here is the LWC:

                            <lightning-record-edit-form record-id={recordEditId} record-type-id={defaultRecordType} object-api-name="Contact">

                                <!-- Lightning Messages Display -->
                                <lightning-messages></lightning-messages>

                                <!-- Contact Edit Form -->
                                <div class="slds-grid slds-gutters">

                                    <div class="slds-col">

                                        <lightning-input-field data-field="FirstName" field-name="FirstName">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="Title" field-name="Title">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="MobilePhone" field-name="MobilePhone">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="Social_Security_Number__c"
                                            field-name="Social_Security_Number__c">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="HomePhone" field-name="HomePhone">
                                        </lightning-input-field>

                                    </div>

                                    <!-- Contact Edit Form -->

                                    <div class="slds-col">

                                        <lightning-input-field data-field="LastName" field-name="LastName">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="Email" field-name="Email">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="Birthdate" field-name="Birthdate">
                                        </lightning-input-field>

                                        <lightning-input-field data-field="Ownership_Percentage__c"
                                            field-name="Ownership_Percentage__c">
                                        </lightning-input-field>

                                    </div>

                                </div>

                                <hr>

                                <div class="slds-grid slds-gutters">

                                    <div class="slds-col">

                                        <!-- <lightning-input-field data-field="MailingAddress" field-name="MailingAddress">
                                        </lightning-input-field> -->

                                        <lightning-input-field data-field="MailingStreet" field-name="MailingStreet"></lightning-input-field>

                                        <lightning-input-field data-field="MailingCity" field-name="MailingCity"></lightning-input-field>

                                    </div>

                                </div>

                                <div class="slds-grid slds-gutters">

                                    <div class="slds-col">

                                        <lightning-input-field data-field="MailingPostalCode" field-name="MailingPostalCode"></lightning-input-field>
                                        
                                    </div>

                                    <div class="slds-col">

                                        <lightning-input-field data-field="MailingState" field-name="MailingState"></lightning-input-field>
                                        
                                    </div>

                                </div>

                            </lightning-record-edit-form>

Here is what it currently looks like:

enter image description here

I would like it to look like this (mirroring standard salesforce):

enter image description here

  • Orginally we did not have a record type for the contact object and it did not work, so I implemented an RT to try and resolve.
  • All Documentation I have found states something along the lines of: 'If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don’t have a default record type. Otherwise, the default record type ID is used.'

The Record Type is getting populated as well with the following:

    @wire(getObjectInfo, { objectApiName: CONTACT_OBJECT })
    getContactData({error,data}){
        if(data){
            console.log('Default RT: ', data.defaultRecordTypeId);
            this.defaultRecordType = data.defaultRecordTypeId;
            console.log('RecordTypes: ', JSON.stringify(data.recordTypeInfos));
            console.log(data);
        }
        else if(error){
            console.log(error);
        }
    }

    @wire(getPicklistValues, { recordTypeId: '$defaultRecordType', fieldApiName: STATE_FIELD })
    setPicklistOptions({error, data}) {
      if (data) {
        console.log('Picklist Data:');
        console.log(data);
        this.stateValues = data.values;
        console.log(this.stateValues);
      } else if (error) {
        console.log(error);
      }
    }

Any assistance would be greatly appreciated.

  1. Has anyone has experience with displaying a picklist field in a lightning-record-edit form?
  2. Is this an issue because of the state picklist?

** I just tested this with another custom picklist field on the object and it displayed the input field as a picklist. So this is an issue with just the state picklist field. Is this a bug or expected functionality?

1

If you've enabled the State/Country Picklist feature, then you have to use the Code fields in Contact and Account (like MailingStateCode instead of MailingState). See this Knowledge Article.

Developers need to append the word 'code' to the picklist fields in their Apex Code, when the above feature is Enabled

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.