0

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

0

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);
        }
    }
}
7
  • Hi Arut,Thanks for responding. I tried replacing the JS controller code as you mentioned. However, the pop up did't fire upon Stage change to Unqualified from Closed Won. Any idea?
    – Desat
    Aug 19 '20 at 17:04
  • Have you tried placing few console.log statements to capture the values (inside & outside the IF loops)? Do the API names of the picklist values exactly match 'Unqualified' & 'Closed Won'?
    – arut
    Aug 19 '20 at 19:27
  • Looks like the "initStageName" is not being set to Closed Won. I tried tweaking it but still couldn't get it to work. Would you be able to test this out and assist me with the workaround for the same?
    – Desat
    Aug 19 '20 at 22:27
  • Turns out that my earlier code snippet was incorrect. Try the updated code snippet and this should solve your problem. [No need to add any additional attribute in the component file]
    – arut
    Aug 20 '20 at 7:28
  • Hi Arut, I've tried your updated code and the pop up seems to be working now upon Stage change!!! However, upon move from Closed Won to Unqualified, the pop up does show up but, the record is being saved to Unqualified before hitting Ok or cancel buttons on the Pop up. Do you know how I can prevent the default save from happening upon Stage change?
    – Desat
    Aug 20 '20 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.