[SalesForce] Lightning pop up on Opportunity Stage change

URGENT Requirement:

I am trying to display a custom pop up with Footer buttons, Ok and Cancel when the Opportunity Stage changes from Closed Won to Unqualified. I am using LDS (Lightning Data Service) to do so without Apex controller.
Issue:

  • The pop up is loading everytime I refresh the page
    I only want the pop up to load only upon Stage change from CW to UQ and not when Opportunity is in Stage UQ.
    Please help fix this

My code
WarningModal.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionwithoutheader" access="global" >
<aura:attribute name="opportunityRecord" type="Opportunity"/>
<aura:attribute name="recordError" type="String"/>
 <aura:attribute name="openModal" type="Boolean" default="false" />

      <force:recordData aura:id="opportunityRecordCmp"
                      recordId="{!v.recordId}"
                      fields="Id,StageName"
                      targetFields="{!v.opportunityRecord}"
                      recordUpdated="{!c.openModal}"
                      targetError="{!v.recordError}" 
                        mode="EDIT"/>

    <!-- Here we wrapped our modal code inside aura:if. If it evaluates true, code inside it will be visible -->
    <aura:if isTrue="{!v.openModal}" >
        <div class="demo-only" style="height: 100px;">
            <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 of Modal -->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close" class="slds-modal__close" size="small" variant="bare" alternativeText="Close" onclick="{! c.closeModal }"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Warning</h2>
                    </header>
                     <!-- Body of Modal -->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p> Closed Won Opps are not recovered. Continue?</p>
                    </div>
                    <!-- Footer of Modal -->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="brand" label="OK" title="Save" onclick="{!c.handleOk}" />
                        <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.handleCancel }" />   
                    </footer>
                </div>
            </section>
            <!-- Backdrop to set background slightly opaque. -->
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </aura:if>
    <!--End of Modal Footer-->
     <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.recordError}
            </ui:message>
        </div>
    </aura:if>
</aura:component>

WarningModal.js

({
   
    openModal:function(component, event, helper) {
        var stageName=component.get("v.opportunityRecord");
        if(stageName.StageName=='Unqualified'){
           component.set('v.openModal',true);
        }
    },
             
 handleOk:function(component, event, helper) {
      
        component.set('v.openModal',false);

     },
    
    handleCancel : function(component, event, helper) {
        component.set('v.openModal',false);
    }
})

Please help fix this

Best Answer

Update your openModal function as shown below:

openModal:function(component, event, helper) {
    var changeType = event.getParams().changeType;
    
    if (changeType === "CHANGED" && (('StageName' in event.getParams().changedFields))) {
        var newStageName = event.getParams().changedFields.StageName.value;
        var oldStageName = event.getParams().changedFields.StageName.oldValue;
        if(newStageName == 'Unqualified' && oldStageName == 'Closed Won'){
            component.set('v.openModal',true);
        }
    }
}