+ Start a Discussion
sumit dsumit d 

how to close a LWC popup window after click on save

Hi All,
          I want to close a popup window when i click on save. how can we do this? Can anyone help me with it?
my Component is given below:-
<template>
    <lightning-card title="Event Attendance" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={participation.data}>
                <lightning-datatable
                hide-checkbox-column="true"
                key-field="Id"
                data={participation.data}
                columns={columns}
                onsave={handleSave}
                  draft-values={draftValues}>
            </lightning-datatable>
            </template>
                </div>
    </lightning-card>
</template>
JS Controller:-
import { LightningElement, wire, api } from 'lwc';
import getParticipation from '@salesforce/apex/ParticipationController.getParticipation';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
import updateParticipations from '@salesforce/apex/ParticipationController.updateParticipations';
import { getRecordNotifyChange } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
  const COLS = [
    {
        label: 'Participation Name',
        fieldName: 'Participation_Name__c'
    },
    { label: 'Participated?', fieldName: 'Participated__c', type: 'boolean', editable: true }
];
export default class DatatableUpdateExample extends LightningElement {
    @api recordId;
    columns = COLS;
    draftValues = [];
    @wire(getParticipation, { accId: '$recordId' })
    participation;
    async handleSave(event) {
        const updatedFields = event.detail.draftValues;
        // Prepare the record IDs for getRecordNotifyChange()
        const notifyChangeIds = updatedFields.map(row => { return { "recordId": row.Id } });
        try {
               const result = await updateParticipations({ data: updatedFields });
            console.log(JSON.stringify("Apex update result: " + result));
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Attendance marked',
                    variant: 'success'
                })
            );
            // Refresh LDS cache and wires
            getRecordNotifyChange(notifyChangeIds);
               refreshApex(this.participation).then(() => {
                    this.draftValues = [];
                     });
        } catch (error) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating or refreshing records',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        };
    }
}
User-added image
Best Answer chosen by sumit d
mukesh guptamukesh gupta
Hi Sumit,

Please follow below code:-
 
import { LightningElement, wire, api } from 'lwc';
import getParticipation from '@salesforce/apex/ParticipationController.getParticipation';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
import updateParticipations from '@salesforce/apex/ParticipationController.updateParticipations';
import { getRecordNotifyChange } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import { CloseActionScreenEvent } from ‘lightning/actions’;
  const COLS = [
    {
        label: 'Participation Name',
        fieldName: 'Participation_Name__c'
    },
    { label: 'Participated?', fieldName: 'Participated__c', type: 'boolean', editable: true }
];
export default class DatatableUpdateExample extends LightningElement {
    @api recordId;
    columns = COLS;
    draftValues = [];
    @wire(getParticipation, { accId: '$recordId' })
    participation;
    async handleSave(event) {
        const updatedFields = event.detail.draftValues;
        // Prepare the record IDs for getRecordNotifyChange()
        const notifyChangeIds = updatedFields.map(row => { return { "recordId": row.Id } });
        try {
               const result = await updateParticipations({ data: updatedFields });
            console.log(JSON.stringify("Apex update result: " + result));
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Attendance marked',
                    variant: 'success'
                })
            );
            // Refresh LDS cache and wires
            getRecordNotifyChange(notifyChangeIds);
               refreshApex(this.participation).then(() => {
                    this.draftValues = [];
                     });
           
        this.dispatchEvent(new CloseActionScreenEvent());
        } catch (error) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating or refreshing records',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        };
    }
}


Please update your file js-meta.xml file as below
js-meta.xml
<targetConfigs>
       <targetConfig targets="lightning__RecordAction">
           <actionType>ScreenAction</actionType>
       </targetConfig>
    </targetConfigs>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh

All Answers

mukesh guptamukesh gupta
Hi Sumit,

Please follow below code:-
 
import { LightningElement, wire, api } from 'lwc';
import getParticipation from '@salesforce/apex/ParticipationController.getParticipation';
import { refreshApex } from '@salesforce/apex';
import { updateRecord } from 'lightning/uiRecordApi';
import updateParticipations from '@salesforce/apex/ParticipationController.updateParticipations';
import { getRecordNotifyChange } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import { CloseActionScreenEvent } from ‘lightning/actions’;
  const COLS = [
    {
        label: 'Participation Name',
        fieldName: 'Participation_Name__c'
    },
    { label: 'Participated?', fieldName: 'Participated__c', type: 'boolean', editable: true }
];
export default class DatatableUpdateExample extends LightningElement {
    @api recordId;
    columns = COLS;
    draftValues = [];
    @wire(getParticipation, { accId: '$recordId' })
    participation;
    async handleSave(event) {
        const updatedFields = event.detail.draftValues;
        // Prepare the record IDs for getRecordNotifyChange()
        const notifyChangeIds = updatedFields.map(row => { return { "recordId": row.Id } });
        try {
               const result = await updateParticipations({ data: updatedFields });
            console.log(JSON.stringify("Apex update result: " + result));
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Attendance marked',
                    variant: 'success'
                })
            );
            // Refresh LDS cache and wires
            getRecordNotifyChange(notifyChangeIds);
               refreshApex(this.participation).then(() => {
                    this.draftValues = [];
                     });
           
        this.dispatchEvent(new CloseActionScreenEvent());
        } catch (error) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error updating or refreshing records',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        };
    }
}


Please update your file js-meta.xml file as below
js-meta.xml
<targetConfigs>
       <targetConfig targets="lightning__RecordAction">
           <actionType>ScreenAction</actionType>
       </targetConfig>
    </targetConfigs>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh
This was selected as the best answer
sumit dsumit d
Thanks Mukesh, I wasn't aware about it. where can i learn more about this actions?