Quantcast
Channel: Active questions tagged lightning-experience - Salesforce Stack Exchange
Viewing all articles
Browse latest Browse all 3020

How to Save record and close modal popup in Lightning Web Component ( LWC )

$
0
0

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];     } }

Viewing all articles
Browse latest Browse all 3020

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>