Save, Save & New Button in LWC

Question

I have a requirement to have "Save" and "Save&New" button on creation of new record. I have a record edit form with two Submit button - "Save" and "Save & New". After clicking on Save , User should get redirected to the new record created. On Save & New , the modal pop up should save record in the backend and reset the values to enter new record. With the below code I am not able to get the new record Id.

HTML

  <lightning-button-group>
      <lightning-button label="Cancel" variant="neutral" onclick={handleDialogClose}></lightning-button>
      <lightning-button label="Save &amp; New" variant="neutral" type="submit" onclick={handleSubmit}value="saveandnew"></lightning-button>
      <lightning-button label="Save" variant="brand" type="submit" onclick={handleSave}></lightning-button>
  </lightning-button-group>

JS

preventDefaults(event) {
    event.preventDefault(); 
    this.fields = event.detail.fields;
    this.activityId = event.detail.id;
    console.log('activityid', this.activityId);
}

handleSave() {
    this.template.querySelector('lightning-record-edit-form').submit(this.fields);
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.activityId,
            objectApiName: 'GRA_RV_Rig_Verification__c',
            actionName: 'view'
        },
    });
}

handleSubmit() {
    handleSave();
    handleReset();
}

handleReset(event) {
   // Might be possible to use this.fields instead of a selector
   const inputFields = this.template.querySelectorAll(
       'lightning-input-field'
   );
   if (inputFields) {
       inputFields.forEach(field => {
           field.reset();
       });
   }
}

Answer 1

Please refer to the documentation: https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation

1. Include 'onsuccess' handler in your code. For Example Name it as handleSuccess. This method will be triggered after a successful save of the record.

<lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>

2. In 'handleSuccess' JS Method, you need to handle two scenarios:

Scenario-1: if the user selects the 'Save' Button redirect the user to the Record Page using Navigation Api. Scenario-2: if the user selects the 'Save & New' Button reset the values.

Sample Code:

<lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
      <lightning-input-field field-name="Name"></lightning-input-field>
      <lightning-button-group>
        <lightning-button label="Cancel" variant="neutral" onclick={handleDialogClose}></lightning-button>
        <lightning-button label="Save &amp; New" variant="neutral" type="submit" onclick={handleSaveAndNew}> </lightning-button>
        <lightning-button label="Save" variant="brand" type="submit" onclick={handleSave}></lightning-button>
      </lightning-button-group>
    </lightning-record-edit-form>

---

saveAndNew = false;

handleSave() {
  this.saveAndNew = false;
  this.handleRecordSave();
}

handleSaveAndNew() {
  this.saveAndNew = true;
  this.handleRecordSave();
}

handleReset(event) {
  const inputFields = this.template.querySelectorAll(
    'lightning-input-field'
  );
  if (inputFields) {
    inputFields.forEach(field => {
      field.reset();
    });
  }
}

handleSuccess() {
  if(this.saveAndNew){
    this.handleReset();
  } else{
    this[NavigationMixin.Navigate]({
      type: 'standard__recordPage',
      attributes: {
        recordId: this.activityId,
        objectApiName: 'GRA_RV_Rig_Verification__c',
        actionName: 'view'
      },
    });
  }
}

handleRecordSave() {
  this.template.querySelector('lightning-record-edit-form').submit(this.fields);
}