0

How can I bind div value to a Salesforce field? I have a custom form using lightning-record-edit-form for updating records and I used div instead of lightning-input-field as I want the current value to be displayed without the text box but at the same time, its value can be changed dynamically via js calculations and saved in a custom field named Sum__c. Also, adding a read-only attribute in lightning-input-field does not update the value upon submit, neither lightning-output-field.

So far, expected value in console.log changes but upon clicking the update button, value is not saved to the custom field.

Meanwhile, here are the codes I have:

portion of html file

<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsubmit={handleSubmit} onsuccess={handleSuccess}>
     <div class="slds-col slds-size_2-of-2">
         <label>Custom Field</label>
         <div>{customFieldValue}</div>
     </div>
     <lightning-button label="Update"type="submit">/lightning-button> 
</lightning-record-edit-form>
 

portion of js file

@track customFieldValue; 
@track customRec = {CustomObject__c:""};

total() {
    var input1;
    var input2;
    this.customFieldValue = parseInt(input1) + parseInt(input2);
    this.customRec.Sum__c = this.customFieldValue;
    console.log('this.customRec.Sum__c' + this.customRec.Sum__c);     
}

handleSuccess( event ) { 
   this.dispatchEvent(
      new ShowToastEvent({
         title: 'success',
         message: 'Success!',
         variant: 'success',
      }),
   );
}

handleSubmit() {    
     event.preventDefault();
     const fields = event.detail.fields;
     fields.Sum__c = this.customFieldValue;
     this.template.querySelector('lightning-record-edit-form').submit(fields);    
}

1 Answer 1

1

Your requirement should be achievable with lightning-input-field or lightning-output-field also. Based on your comment, looks like you the code snippet provided is partial and you are already using lightning-*-field in your code for other fields.

lightning-button should be placed within/before the end tag of lightning-record-edit-form (see code snippet below). The record edit form wouldn't wire itself to a button that is declared outside. [Also, I guess you were closing tag of record edit form was missing /, but that may have been a typo while posting this question]

<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsuccess={handleSuccess}>
     <div class="slds-col slds-size_2-of-2">
         <label>Custom Field</label>
         <div>{customFieldValue}</div>
     </div>
     <lightning-button label="Update" onclick={handleSubmit} type="submit"></lightning-button>
</lightning-record-edit-form>

The console.log statements work because they are placed in the JS functions/ client side event handlers and they output the local/ client side values.

If you are using DIV elements and the fields are not displayed using lightning-*-field, you might want to consider overriding the default submit behavior. In the HTML file, wire a custom submit event handler by adding the attribute onsubmit={handleSubmit} to lightning-record-edit-form and add the following event handler method to the JS file.

handleSubmit(event){
   event.preventDefault();       // stop the form from submitting
   const fields = event.detail.fields;
   // Write your own code here to update fields here using 'fields.<fieldName> = <value>'
   this.template.querySelector('lightning-record-edit-form').submit(fields);
}

I suggest you update the code snippet provided in the question to give better picture about your component, if the above mentioned doesn't help you.

15
  • I used lightning-input-field but there's a text box in it. The requirement is that value should be printed in display without box around it. I tried to add a read-only attribute, but value is not captured upon save, same with lightning-output-field. I used div as it is more flexible. With regards to the lightning button, I have other fields embedded inside lightning-input-field but they are saving just fine even though button is outside lightning-record-edit-form.
    – lol
    Oct 27, 2020 at 8:10
  • Though flexible as it may be, I have a problem with saving the value of div in custom field as I do not know how to bind its value to the custom object's field. I hope this clarifies my issue.
    – lol
    Oct 27, 2020 at 8:10
  • Check my updated answer. I see that you are already using custom submit event handler, but that's missing event.preventDefault(); and you are not manipulating the fields in it. May be that's causing the problem? Also, are you sure that having button outside the record form works? [I doubt it would and the code snippet is not complete. So, I'm not sure how it works].
    – arut
    Oct 27, 2020 at 9:08
  • Yes, button outside lightning-record-edit-form` works. I just omitted those embedded in lightning-input-field for simplicity purposes and I don't have any problem regarding saving of its values. Meanwhile, I will check your suggestion for now.
    – lol
    Oct 27, 2020 at 9:10
  • 1
    OK. I should probably have mentioned about the event param explicitly.
    – arut
    Oct 27, 2020 at 13:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .