0

I have an LWC component that displays a radio button group - on selecting an option it displays a message as to what processing will happen when the Submit button is clicked. On clicking the button, different actions happen depending on the selection - one creates a record and sends an email (via Apex), others redirect to a VF page. For the ones that redirect there is no problem, but for the one that stays on the page where the component resides, I would like the radio button group to be refreshed after completion, to having nothing selected, as it was initially.

I've looked at various different things that I've found while searching, but none of them work. Setting the selected option to null removes the message that is displayed, but it doesn't clear the radio button selected. How would I achieve that?

The HTML:

<div class="slds-form-element__control slds-m-around_medium">
    <lightning-radio-group name="verifyOptions"
    label="Verification Options"
    options={verifyoptions}
    onchange={handleChange}
    type="radio"
    variant="label-inline"></lightning-radio-group>  
    <template if:true={is1}>                
        <div class="slds-m-around_medium slds-text-heading_small">
            You have selected Option 1. Blah blah blah...
        </div>
    </template>
    <template if:true={is2}>                
        <div class="slds-m-around_medium slds-text-heading_small">
            You have selected Option 2 Blah blah blah...
        </div>
    </template>
    <template if:true={is3}>                
        <div class="slds-m-around_medium slds-text-heading_small">
            You have selected Option 3 Blah blah blah...
        </div>
    </template>
    <template if:true={is4}>                
        <div class="slds-m-around_medium slds-text-heading_small">
            You have selected Option 4 Blah blah blah...
        </div>
    </template>
    <lightning-button variant="brand" label="Submit" title="Submit" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</div>  

The JS:

get verifyoptions() {
    return [
      { label: "Option 1", value: "Option1" },
      { label: "Option 2", value: "Option2" },
      { label: "Option 3", value: "Option3" },
      { label: "Option 4", value: "Option4" }
    ];
  }


  handleChange(event) {
    this.optionSelected = event.detail.value;
  }
  get is1() {
    return this.optionSelected == "Option1";
  }
  get is2() {
    return this.optionSelected == "Option2";
  }
  get is3() {
    return this.optionSelected == "Option3";
  }
  get is4() {
    return this.optionSelected == "Option4";    
  }

  handleClick(event) {
      if (this.is1) {
          doVerify({ fiName: this.fname, laName: this.lname })
            .then(result => {
              this.dispatchEvent(
                new ShowToastEvent({
                  title: "Success",
                  message: "Verify request has been created",
                  variant: "success"
                })
              );
              this.createRec();
            })
            .catch(error => {
              this.dispatchEvent(
                new ShowToastEvent({
                  title: "Error on retrieving Verify results",
                  message: error.message.body,
                  variant: "error"
                })
              );
            });
        }
      }
      if (this.is2) {   // same for is3
        this[NavigationMixin.Navigate]({
          type: "standard__webPage",
          attributes: {url: "/apex/verify?acc=" +  this.aid }
        });
      }
      }
      if (this.is4) {
        this.createRec();
      }
  }  

  createRec() {
    const fields = {};
    fields[RECTYPE_FIELD.fieldApiName] = this.recordTypeId;
    fields[ACCOUNT_FIELD.fieldApiName] = this.aid;
    fields[STATUS_FIELD.fieldApiName] = this.status;
    fields[CERTTYPE_FIELD.fieldApiName] = this.certtype;
    const recordInput = { apiName: CERTIFICATE_OBJECT.objectApiName, fields };
    createRecord(recordInput)
      .then(cert => {
        const retCert = JSON.parse(JSON.stringify(cert));
        this.certref = retCert.fields.Name.value;
        this.certid = cert.id;
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Success",
            message: "Certificate created - Ref No: " + this.certref,
            variant: "success"
          })
        );

        if (this.is4) {
          this[NavigationMixin.Navigate]({
            type: "standard__recordPage",
            attributes: {
              recordId: this.certid,
              actionName: "view"
            }
          });
        }
        if (this.is1) {
          sendEmail({ cEmail: this.aemail, cId: this.certid, accId: this.aid })
            .then(result => {
              this.dispatchEvent(
                new ShowToastEvent({
                  title: "Success",
                  message: "Email has been sent",
                  variant: "success"
                })
              );
            })
            .catch(error => {
              this.dispatchEvent(
                new ShowToastEvent({
                  title: "Error on send",
                  message: error.message.body,
                  variant: "error"
                })
              );
            });
        }
      })
      .catch(error => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error creating record",
            message: error.body.message,
            variant: "error"
          })
        );
      });
  }

1 Answer 1

3

If you add a 'value' property to your radio group as shown below, you can clear it at the point in your javascript that you want to reset it.

<lightning-radio-group name="verifyOptions"
    label="Verification Options"
    options={verifyoptions}
    onchange={handleChange}
    type="radio"
    value={verificationValue}
    variant="label-inline"></lightning-radio-group>

Also the 'value' variable, in my example 'verificationValue', must be a @track field to signal a render cycle on change. [Update] No longer needed as of Spring '20

to clear it just set it to blank

this.verificationValue = '';
5
  • 2
    P.S. @track is no longer necessary for scalar values to be reactive. It's not harmful, just not necessary.
    – sfdcfox
    Commented May 11, 2020 at 23:36
  • @sfdcfox Thanks for that info, because it will clean up a lot of my js moving forward. I'll update the answer also. Commented May 11, 2020 at 23:46
  • I tried that but nothing happens? The only way I seem to be able to clear it is by refreshing the page manually. I added the line in the sendEmail after the success toast event. Refreshing the page also adds the new email in the Activities list, but I'm less worried about that. Where should I put the line if it's going to refresh the component radio group?
    – Irene
    Commented May 12, 2020 at 2:24
  • 1
    Where you added the line should be fine, as long as it's inside the .then block. Also, can you try setting this.verificationValue to undefined instead of an empty string? That should clear it and in an example I've tried, it resets the radio group Commented May 12, 2020 at 8:39
  • @DominicBaker assigning to empty string works, Thank you :)
    – vkm
    Commented Dec 15, 2020 at 7:46

You must log in to answer this question.

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