The selected lightning-combobox value on community is getting saved in backend under Trial object but not able to retain the value on UI level in community on "Save & Next" button
HTML Code:
<template>
<lightning-card>
<div class="slds-m-around_medium">
<lightning-record-edit-form object-api-name="Trial__c" record-id={trialRecordId}
onsubmit={submitTrialDetails} data-id="siteInformation">
<lightning-messages></lightning-messages>
<div class="inputPadding">
<label class="slds-form-element__label">UOM</label>
<lightning-combobox field-name="Treated_plot_area_UOM__c" data-id="uomarea"
value={plotAreaUomvalue} variant="label-hidden" options={plotAreaUomOptions} required
onchange={plotAreaUomChangeHandler} placeholder="">
</lightning-combobox>
<lightning-button variant="base" type="submit" label="Save & Next">
</lightning-button>
</div>
</lightning-record-edit-form>
</div>
</lightning-card>
</template>
JS Code:
import { LightningElement, api, wire, track } from "lwc";
import {updateRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CurrentPageReference, NavigationMixin } from "lightning/navigation";
import { getObjectInfo } from "lightning/uiObjectInfoApi";
import Id from "@salesforce/user/Id";
import TRIAL_REQUEST from "@salesforce/schema/Trial__c";
export default class AgSiteDetails extends NavigationMixin(LightningElement) {
@api recordId;
@track trialRecordTypeId;
@track trialRecord = TRIAL_REQUEST;
@track trialRecordId;
plotAreaUomOptions = [
{ label: "SQUARE FEET", value: "SQUARE FEET" },
{ label: "SQUARE METERS", value: "SQUARE METERS" },
{ label: "AC", value: "AC" },
{ label: "HA", value: "HA" }
];
@track plotAreaUomvalue = "SQUARE FEET";
plotAreaUomChangeHandler(event) {
this.plotAreaUomvalue = event.detail.value;
}
submitTrialDetails(event)
{
event.preventDefault(); // stop the Lightning Record Edit Form from submitting
const fields = event.detail.fields;
let uom = this.template.querySelector('[data-id="uomarea"]');
fields.Treated_plot_area_UOM__c = uom.value;
const fieldss = {};
fields[ID_FIELD.fieldApiName] = this.trialRecordId;
console.log('this.plotAreaUomvalue is===== '+this.plotAreaUomvalue); // getting correct selected value in console
this.template.querySelector('[data-id="siteInformation"]').submit(fields);
const recordInput = { fields };
console.log('recordInput is '+JSON.stringify(recordInput));
console.log('plotAreaUomvalue is==== '+this.plotAreaUomvalue); //getting correct selected value in console
updateRecord(recordInput)
.then(() => {
console.log('Insucess');
this.dispatchEvent(
new ShowToastEvent({
title: "Success",
message: "details updated",
variant: "success"
})
);
this[NavigationMixin.Navigate]({
type: "comm__namedPage",
attributes: {
name: "Crop_Details__c"
},
state: {
c__recordId: this.trialRecordId
}
});
})
.catch((error) => {
console.log('error is '+error.body.message);
this.dispatchEvent(
new ShowToastEvent({
title: "Error updating record",
message: error.body.message,
variant: "error"
})
);
});
else
{
// The form is not valid
this.dispatchEvent(
new ShowToastEvent({
title: "Something is wrong",
message: "Check your input and try again.",
variant: "error"
})
);
}
}
}
this.template.querySelector('[data-id="siteInformation"]').submit(fields);
as this will fire the submit event, which again will be handled in the same method.