1

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?
6
  • Is this perhaps simply a permissions issue for the user being used to edit the record? – Phil W Jul 29 '20 at 19:57
  • I am an admin user that can edit all of the other fields. I dont believe its a permission issue. – Max Jul 29 '20 at 20:00
  • Are you able to edit if you put State and Country fields on the UI (not Codes)? – manjit5190 Jul 29 '20 at 20:52
  • @manjit5190 Yes, I am Able to update the State and Country fields – Max Jul 29 '20 at 21:04
  • @Max - are you still experiencing this issue?? if you found a solution, please share. I am also in the same shoes at the moment. Thanks. – Dinesh KR Aug 17 '20 at 19:54
3

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.

1
  • Can you please post your whole html file for the reference. I am also trying to do it with the lightning-record-edit-form for creating a new record. But struggling to achieve it. – Hariprasath Feb 1 at 7:40

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.