I have a requirement that when Opportunity stage goes from stage A to B (which happens automatically using Flows when user fills few required fields on Opportunity and hit save.), this stage movement should open up a popup(modal) with a couple of custom fields for them to fill in and when they hit 'Ok', that would then save the popup fields on Opportunity. I am using Lightning Data Service and here is my lightning component
<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.openModalBox}"
targetError="{!v.recordError}"
mode="EDIT"/>
<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> INSERT FIELD FORM HERE</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>
Controller -
({
openModalBox:function(component, event, helper) {
var changeType = event.getParams().changeType;
console.log("I am here");
if (changeType === "CHANGED" && (('StageName' in event.getParams().changedFields))) {
var newStageName = event.getParams().changedFields.StageName.value;
var oldStageName = event.getParams().changedFields.StageName.oldValue;
if(newStageName == 'B' && oldStageName == 'A'){
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);
}
})
The problem is when I am filling those required fields on Opportunity for moving from Stage A to B, the popup (modal) is not opening up. I have tried putting console.log in the openModalBox but nothing is getting displayed in console. When I tried to invoke this using a quick action button, its opening the popup (modal) but not happening with field (StageName) update. Can you please help in what I might be doing wrong here?
