0

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"
          })
        );
      } 
    }
}
2
  • Try to remove this line this.template.querySelector('[data-id="siteInformation"]').submit(fields); as this will fire the submit event, which again will be handled in the same method.
    – Damecek
    Commented Jul 25, 2022 at 11:45
  • @Damecek After commenting this line 'this.template.querySelector('[data-id="siteInformation"]').submit(fields);' also, its not working. In the backend the value is getting saved in the field but on UI level it is coming to default value onload of page
    – Anu
    Commented Jul 25, 2022 at 12:01

0

You must log in to answer this question.