0

How can I be able to set a new checkbox field value to html or js in LWC upon update? I implemented a lightning-record-edit-form that acts as a custom edit page for a custom object.

I tried the following but the checkbox does not update upon submit:

1st Attempt: via html using checked attribute

<lightning-input-field field-name="isDeleted__c" class="slds-hide" checked></lightning-input-field>

2nd Attempt: via html using value attribute

<lightning-input-field field-name="isDeleted__c" class="slds-hide" value=true></lightning-input-field>

3rd Attempt: via js controller

js file

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

handleSubmit() {    
     this.template.querySelector('lightning-record-edit-form').submit();
     this.template.querySelector('lightning-input-field.slds-hide').checked = true;       
}

html file

<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsuccess={handleSuccess}>
     <lightning-input-field field-name="isDeleted__c" class="slds-hide"></lightning-input-field>
<lightning-record-edit-form>
<lightning-button label="Update" onclick={handleSubmit} type="submit"></lightning-button> 

1 Answer 1

1

I'm not 100% what you're asking, so here are my two answers to each question I think you might be asking:

If you're asking on how to update a field with lightning-record-edit-form:

Check out this documentation for examples on using lightning-record-edit-form.

Your code will look like this:

html

<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsuccess={handleSuccess}>
     <lightning-input-field field-name="isDeleted__c"></lightning-input-field>
     <lightning-button label="Update" onclick={handleSubmit} type="submit"></lightning-button>
<lightning-record-edit-form>

Clicking the lightning-button will automatically update the record.

If you're asking on how to change the value of the checkbox after the record has been updated:

There are a few key things to keep in mind here on getting this to work:

First is what the lightning-input-field expects you to provide. If you look at the specification, you'll see that it expects an attribute value which contains the field's value. In one of your examples, you tried using the attribute checked. The lightning-input-field won't know what to do with a checked attribute, as this is not an attribute listed in the specification. So use the attribute value for editing/updating whether or not the checkbox is checked.

Second problem: what type of data is value expecting? Unfortunately, salesforce doesn't have a clear cut example of how it represents a checkbox in javascript/html. I fetched some dummy data that contained a checkbox field, and after console.log()-ing the object, I could see that the value for a checkbox expects a plain old true or false boolean.

Lastly, I suggest you avoid using this.template.querySelector() to access/modify the checkbox's value. Since thelightning-input-field is a sub-component with value as a public property, it is better practice and more consistent with the LWC framework to assign a js variable in the HTML, e.g.

<lightning-input-field field-name="isDeleted__c" value={checkedFlag}></lightning-input-field>

And in your .js controller, you'll have

checkedFlag = true; //or false.

handleSuccess(event) { //the same handleSuccess() your edit-record-form uses
    //put whatever logic you want here to change the checkbox value
    
} 

Furthermore, in your handleSuccess(), you'll have to manually update the record (probably with updateRecord()) if you want the checkbox value to be changed after the record has been successfully edited.

Note: In both of my solutions I removed the slds-hide class from all your tags, as that just makes the HTML invisible and wasn't relevant to the solutions.

2
  • My apologies if my question is quite not clear. As for the slds-hide class, I included it just for the sake of the checkbox field to be true. I implemented your suggestion to set a boolean variable in js and reference it as the checkbox field's value attribute in html. My previous implementation was I set the value to true directly in html, which did not work. The checkbox field is getting a true value upon update now, thanks for your help!
    – lol
    Oct 27, 2020 at 3:15
  • 1
    @lol No problem. I just realized what I said about the shadow dom was a little misleading, so I edited my answer. You can use querySelector and it will work, but it's better to do the js variable. Oct 27, 2020 at 15:08

You must log in to answer this question.

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