0

I'm trying to use the new LWC modal component. Embedded in the LWC modal is a screenflow. The issue I'm facing is the finish behavior. How can I get the modal window to close when the flow interview finishes? I get this error: enter image description here Below is my code:

HTML:

<template>
<div class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <h2 class="slds-text-heading_medium">Campaign Closed</h2>
        </header>
        <div class="slds-modal__content slds-p-around_medium">
            <p>This campaign is closed and cannot be edited.</p>
        </div>
            <lightning-flow
                flow-api-name='Campaign_Member_Management_in_LWC'
                flow-input-variables={inputVariables}
                onstatuschange={handleStatusChange}
                onfinish={handleFinish}
                aura:id="flowData"
                >
            </lightning-flow>
        <footer class="slds-modal__footer">
            <!-- Button to close window   -->
            <lightning-button label="Close" onclick={handleClose}></lightning-button>
         
        </footer>
    </div>
             <p> Text Here instead of Button </p>
</div>
<div class="slds-backdrop slds-backdrop_open"></div>

JavaScript:

import { LightningElement, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { closeModal } from 'lightning/modal';
import CAMPAIGN_STATUS_FIELD from '@salesforce/schema/Campaign.Status';
export default class CampaignModal extends LightningElement {
    @api recordId;
    get inputVariables() {
        return [
            {
                name: 'recordId',
                type: 'String',
                value: this.recordId
            }
        ];
    }
    @wire(getRecord, { recordId: '$recordId', fields: [CAMPAIGN_STATUS_FIELD] })
    campaign;
    connectedCallback() {
        if (this.isClosed) {
            this.showModal();
        }
    }
    get isClosed() {
        return getFieldValue(this.campaign.data, CAMPAIGN_STATUS_FIELD) === 'Closed';
    }
     
    handleStatusChange(event) {
        if (event.detail.status === 'FINISHED') {
           closeModal();  
        }
      }
   
      handleFinish(event) {
       
        const flowData = this.template.querySelector('lightning-flow');
        flowData.removeEventListener('onstatuschange', this.handleStatusChange);
        flowData.removeEventListener('onfinish', this.handleFinish);
        this.dispatchEvent(new CustomEvent('close'));
       
        const modal = this.template.querySelector('.slds-modal');
        const backdrop = this.template.querySelector('.slds-backdrop');
        modal.classList.remove('slds-fade-in-open');
        backdrop.classList.remove('slds-backdrop_open');
         
    }
     
    handleClose() {
        const modal = this.template.querySelector('.slds-modal');
        const backdrop = this.template.querySelector('.slds-backdrop');
        modal.classList.remove('slds-fade-in-open');
        backdrop.classList.remove('slds-backdrop_open');
    }
}
2
  • How you are opening the modal? Also there is no onfinish method for lightning-flow all you have is onstatuschange and "FINISHED" is one of the status.
    – Saroj Bera
    Commented Mar 7, 2023 at 8:24
  • Hi Saroj, thanks for your response. The LWC was dragged onto the Lightning Page in App Builder, so it is automatially envoked when users land on the page. How do I add an onFinish method to the code?
    – Taku
    Commented Mar 7, 2023 at 8:58

1 Answer 1

1

onstatuschange is where you can handle the flow status changes including flow finish behavior.

handleStatusChange(event) {
    if (event.detail.status === "FINISHED") {
       //Action to be performed on click of finish button in Flow
    }
}

I tried with the below example and it is working.

LWC Component

HTML

<template>
    <template if:true={isShowModal}>
        <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">
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Flow Inside Modal</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <lightning-flow flow-api-name="Flow_Inside_Modal" flow-input-variables={inputVariables}
                        onstatuschange={handleStatusChange}>
                    </lightning-flow>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

JS

import { LightningElement,api} from "lwc";
export default class LwcModalWithFlow extends LightningElement {
    isShowModal = true;
    @api recordId;
    //pass input variables to the flow when component is loaded
    get inputVariables() {
        return [
            {
                name: 'oppId',
                type: 'String',
                value: this.recordId
            }
        ];
    }    
    handleStatusChange(event){
        if (event.detail.status === "FINISHED") {
            this.isShowModal = false;
        }        
    }
}

Flow Variable

enter image description here

3
  • Hi Soraj. I appreciate your help! I tried your code and dragged it onto the Lighting Page but nothing pops up. I'm still new to LWC. How do you incorportate the 'inputVariables' into the JS so the current record's ID is passed into the flow?
    – Taku
    Commented Mar 7, 2023 at 16:07
  • Have you added the variable isShowModal = true; in your JS? First create the component with only above code and check if the popup is coming then add your code in to it. Also I have added details on how to pass inputVariables from LWC to Flow.
    – Saroj Bera
    Commented Mar 7, 2023 at 18:31
  • Yes, I updated my code to include isShowModal=true and confirmed my flow variable is "available for input." The modal is no longer throwing an error! Thanks! My code matches your exactly, the only quuarky thing is that when the flow finishes, the modal reappears, but when you go over the flow again and finish the second time, the modal dissappears as expected. I'm looking to see if its a flow configuration issue
    – Taku
    Commented Mar 7, 2023 at 20:11

You must log in to answer this question.

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