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:
I would like the user to be able to edit the State via a picklist.
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);
});
}
}
Hope this helps.
Correct answer by Max on December 28, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP