I have an LWC where I'm using modal up to edit opportunity using Lightning-record-edit-form. On click of submit I need to do two things
1. Save Record
2. Close Modal Popup
I'm able to do either one of them but not both. below code will close the pop up but changes are not saved. Any help would be appreciated
<template>
<lightning-card title="Opportunities">
<div style="width:auto; height:auto; overflow:auto;">
<template if:true={data}>
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-is-resizeable">
<thead>
<tr class="slds-text-title--caps">
<th scope="col" >
<div class="slds-truncate">Oppotunity Name</div>
</th>
<th scope="col" >
<div class="slds-truncate">Handoff</div>
</th>
<th scope="col" >
<div class="slds-truncate">Stage Name</div>
</th>
<th scope="col" >
<div class="slds-truncate">Close Date</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={data} for:item="opp">
<tr key={opp.Id}>
<td scope="row">
<div class="slds-truncate">{opp.Name}</div>
</td>
<td scope="row">
<div class="slds-truncate">
<lightning-button-icon
icon-name="utility:adduser"
alternative-text="Add user"
class="slds-m-left_xx-small"
title="Add user"
onclick={openModal}
value={opp}>
</lightning-button-icon>
<!--<lightning-icon icon-name="custom:custom11" title="custom11" size="small"></lightning-icon>
<p class="slds-box slds-text-heading_small">
<lightning-icon icon-name="custom:custom11" title="custom11"></lightning-icon>
</p>-->
</div>
</td>
<td scope="row">
<div class="slds-truncate">{opp.StageName}</div>
</td>
<td scope="row">
<div class="slds-truncate">{opp.CloseDate}</div>
</td>
</tr>
</template>
</tbody>
</table>
</template>
</div>
</lightning-card>
<!--Pop up code-->
<template if:true={showModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small"></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Edit {recName}</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<!--<p>Record Id : {recId}</p>-->
<div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
<lightning-record-edit-form
id="recordViewForm"
record-id={recId}
object-api-name="Opportunity"
onsubmit={handleSubmit}>
<lightning-messages></lightning-messages>
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="StageName"></lightning-input-field>
<lightning-input-field field-name="CloseDate"></lightning-input-field>
<!--<input type="submit" class="hidden" />-->
<lightning-button class="slds-m-top_medium" type="submit" variant="brand" label="Update"></lightning-button>
</lightning-record-edit-form>
</div>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal}>Cancel</button>
</footer>
</div>
</section>
</template>
</template>
JS
import { LightningElement ,api,wire,track } from 'lwc';
import getAllOpps from '@salesforce/apex/GetAllOpportunities.getAllOpps'
export default class Next_Best extends LightningElement {
error;
data;
showModal = false;
recId;
recName;
connectedCallback(){
this.loadOpps();
}
loadOpps(){
getAllOpps({
stage : 'Closed Won'
})
.then(result =>{
this.data = result;
})
.catch(error =>{
this.error = error;
});
}
openModal(event){
this.showModal = true;
this.recId = event.target.value.Id;
this.recName = event.target.value.Name;
console.log('Opp Record '+event.target.value.Name);
}
closeModal(event){
console.log('onsubmit: '+ event.detail.fields);
this.showModal = false;
}
handleSubmit(event){
const fields = event.detail.fields;
console.log( "Fields: ", fields );
this.showModal = false;
}
/*submitMyformProgramatically(){
const btn = this.template.querySelector( ".hidden" );
if( btn ){
btn.click();
}
//this.showModal = false;
}*/
}
Apex
public with sharing class GetAllOpportunities {
@AuraEnabled(cacheable=true)
public static List<Opportunity> getAllOpps(string stage) {
return [SELECT Id, Name ,StageName, CloseDate ,Type ,Probability,Account.Name from Opportunity
WHERE StageName =: stage limit 10];
}
}
