TransWikia.com

Unable to edit StateCode & CountryCode in LWC lightning-record-edit-form

Salesforce Asked on December 28, 2020

I currently have a set of address fields in a Lightning-record-edit-form. I am able to update all of the fields except for the StateCode & CountryCode Fields. They display as disabled.

Here is the HTML:

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

                                    <div class="slds-col">

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

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

                                    </div>

                                </div>

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

                                    <div class="slds-col">

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

                                    </div>

                                    <div class="slds-col">

                                        <lightning-input-field data-field="State" field-name="StateCode"></lightning-input-field>

                                    </div>

                                </div>

And this is how it appears:

enter image description here

I would like the user to be able to edit the State via a picklist.

  1. Has anyone experienced this before?
  2. Any Ideas on how to resolve?

One Answer

I was able to solve this issue by using the Lightning-Input-Address. Please see the below example:

HTML

                                <lightning-input-address
                                    address-label="Address"
                                    street-label="Street"
                                    city-label="City"
                                    province-label="Province"
                                    postal-code-label="PostalCode"
                                    street={accountStreet}
                                    city={accountCity}
                                    province={accountState}
                                    postal-code={accountPostal}
                                    country="United States"
                                    field-level-help="Company Address"
                                    country-options={countryOptions}
                                    province-options={stateOptions}
                                    onchange={handleChange}
                                    show-address-lookup>
                                </lightning-input-address>

JS


import { LightningElement, wire, api, track } from 'lwc';
import { getRecord, getFieldValue, updateRecord } from 'lightning/uiRecordApi';
import { NavigationMixin } from 'lightning/navigation';

import STREET_FIELD from '@salesforce/schema/Lead.Street';
import CITY_FIELD from '@salesforce/schema/Lead.City';
import POSTALCODE_FIELD from '@salesforce/schema/Lead.PostalCode';
import STATE_FIELD from '@salesforce/schema/Lead.State';
import COUNTRY_FIELD from '@salesforce/schema/Lead.Country';

// Define Fields to Query
const FIELDS = [
    'Lead.Company',
    'Lead.Phone',
    'Lead.Website',
    'Lead.Street',
    'Lead.City',
    'Lead.State',
    'Lead.PostalCode',
    'Lead.Country',
    'Lead.LeadSource',
    'Lead.Owner.Name',
    'Lead.Time_Zone__c',
    'Lead.Date_Established__c',
    'Lead.AnnualRevenue',
    'Lead.Activation_Date__c',
    'Lead.Alternate_Phone__c',
    'Lead.Sic__c',
    'Lead.DBA__c',
]

export default class CompanyInformation extends NavigationMixin(LightningElement) {

    companyAddress = {
        street: '',
        city: '',
        state: '',
        postal: '',
        country: ''
    }

    @wire(getRecord, {recordId: '$recordId', fields: FIELDS})
    lead;

    get accountStreet(){
        return getFieldValue(this.lead.data, 'Lead.Street');
    }

    get accountCity(){
        return getFieldValue(this.lead.data, 'Lead.City');
    }

    get accountPostal(){
        return getFieldValue(this.lead.data, 'Lead.PostalCode');
    }

    get accountCountry(){
        return getFieldValue(this.lead.data, 'Lead.Country');
    }

    get accountState(){
        return getFieldValue(this.lead.data, 'Lead.State');
    }

    handleChange(event){
        this.companyAddress.street = event.detail.street;
        this.companyAddress.city = event.detail.city;
        this.companyAddress.postal = event.detail.postalCode;
        this.companyAddress.state = event.detail.province;
        this.companyAddress.country = event.detail.country;
        console.log(this.companyAddress);
    }

    get countryOptions(){
        return [
            { label: 'US', value: 'US'}
        ]
    }

    get stateOptions() {
        return [
            { label: 'AL', value: 'AL'},
            { label: 'AK', value: 'AK'},
            { label: 'AZ', value: 'AZ'},
            { label: 'AR', value: 'AR'},
            { label: 'CA', value: 'CA'},
            { label: 'CO', value: 'CO'},
            { label: 'CT', value: 'CT'},
            { label: 'DE', value: 'DE'},
            { label: 'DC', value: 'DC'},
            { label: 'FL', value: 'FL'},
            { label: 'GA', value: 'GA'},
            { label: 'ID', value: 'ID'},
            { label: 'IL', value: 'IL'},
            { label: 'IN', value: 'IN'},
            { label: 'IA', value: 'IA'},
            { label: 'KS', value: 'KS'},
            { label: 'KY', value: 'KY'},
            { label: 'LA', value: 'LA'},
            { label: 'ME', value: 'ME'},
            { label: 'MD', value: 'MD'},
            { label: 'MA', value: 'MA'},
            { label: 'MI', value: 'MI'},
            { label: 'MN', value: 'MN'},
            { label: 'MS', value: 'MS'},
            { label: 'MO', value: 'MO'},
            { label: 'MT', value: 'MT'},
            { label: 'NE', value: 'NE'},
            { label: 'NV', value: 'NV'},
            { label: 'NH', value: 'NH'},
            { label: 'NJ', value: 'NJ'},
            { label: 'NM', value: 'NM'},
            { label: 'NY', value: 'NY'},
            { label: 'NC', value: 'NC'},
            { label: 'ND', value: 'ND'},
            { label: 'OH', value: 'OH'},
            { label: 'OK', value: 'OK'},
            { label: 'OR', value: 'OR'},
            { label: 'PA', value: 'PA'},
            { label: 'RI', value: 'RI'},
            { label: 'SC', value: 'SC'},
            { label: 'SD', value: 'SD'},
            { label: 'TN', value: 'TN'},
            { label: 'TX', value: 'TX'},
            { label: 'UT', value: 'UT'},
            { label: 'VT', value: 'VT'},
            { label: 'VI', value: 'VI'},
            { label: 'VA', value: 'VA'},
            { label: 'WA', value: 'WA'},
            { label: 'WV', value: 'WV'},
            { label: 'WI', value: 'WI'},
            { label: 'WY', value: 'WY'},
        ];
    }

    saveForm(){
        fields[STREET_FIELD.fieldApiName] = this.companyAddress.street;
        fields[CITY_FIELD.fieldApiName] =  this.companyAddress.city;
        fields[POSTALCODE_FIELD.fieldApiName] = this.companyAddress.postal;
        fields[STATE_FIELD.fieldApiName] = this.companyAddress.state;
        fields[COUNTRY_FIELD.fieldApiName] = 'United States';

        console.log('Fields: ', fields);

        const recordInput = {
            fields
        };

        console.log('Record Input: ', recordInput);

            updateRecord(recordInput)
                .then(() => {
                    console.log('Update Successful');
                })
                .catch(error => {
                    console.error(error);
                });

    }
}
  • Here you are able to first get the values of the address field on the record and populate them into into the 'CompanyAddress' Object or you can define those values using the @wire.
  • Here I am also defining the possible values for state & country. I believe you can also grab these dynamically instead of defining them -Changes are handled and the company address object is updated to then use on record save.

end result looks like: enter image description here

Hope this helps.

Correct answer by Max on December 28, 2020

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