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: