0

I need a little help that I can't help, I have this aura component, called "ShopSatisfaction Questionnaire", the thing I want is that the popup with the flow only appears in certain when the aura:if is true, at the moment it works that the button appears and then using the button I bring up the popup with the flow, but what if I would like to remove the button and make it appear automatically when the page is loaded?

CMP:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="record" type="Object"/>
<aura:attribute name="simpleRecord" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="showModal" type="Boolean" default="false"/>

<!-- record that we're sitting on -->
<aura:attribute name="recordfields" type="String[]" default="Name,CreatedBy.Name,CreatedDate,OwnerId,Carrelli_Totali__c"/>
<force:recordData aura:id="recordLoader"
                  recordId="{!v.recordId}"
                  targetRecord="{!v.record}"
                  fields="{!v.recordfields}"
                  targetFields="{!v.simpleRecord}"
                  targetError="{!v.recordError}"
                  />
<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:if isTrue="{!v.simpleRecord.Carrelli_Totali__c > 11}">
    <label>Totali Carrelli:</label>&nbsp;<ui:outputText value="{!v.simpleRecord.Carrelli_Totali__c}"/><br />
    <div class="slds">
        <aura:if isTrue="{!v.showModal}">
            <div class="slds-backdrop slds-backdrop_open"></div>
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                     class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                                title="Chiudi" onclick="{!c.closeModal}">
                            <lightning:icon iconName="utility:close" size="small" variant="inverse" />
                            <span class="slds-assistive-text">Chiudi</span>
                        </button>
                        <!--<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Flusso di registrazione</h2>-->
                    </header>
                    <div class="slds-modal__content slds-p-around_medium">
                        <lightning:flow aura:id="flowData"/>
                    </div>
                </div>
            </section>
        </aura:if>
        <aura:if isTrue="{!not(v.showModal)}">
            <lightning:button variant="base" label="Non sei un membro? Registrati" title="Registrati" onclick="{!c.openModal}" class="button-style"/>
            <!--<ui:button label="Non sei un membro? Registrati" press="{!c.openModal}" class="button-style"/>-->
        </aura:if>
    </div>
</aura:if>

</aura:component>

JS:

({
openModal: function(component, event, helper) {
    component.set("v.showModal", true);
    var flow = component.find("flowData");
    flow.startFlow("Form_di_Registrazione_ScreenFlow");
},
closeModal: function(component, event, helper) {
    component.set("v.showModal", false);
    var flow = component.find("flowData");
    flow.stopFlow();
}

})

1 Answer 1

0

This is relatively simple to achieve. To do this, you need to invoke the logic when the force:recordData component finishes asynchronously loading the record.

This can be achieved by using the recordUpdated event that is fired by this component once it's loaded. To use this, you'll need to modify your force:recordData declaration:

<force:recordData aura:id="recordLoader"
                  recordId="{!v.recordId}"
                  targetRecord="{!v.record}"
                  fields="{!v.recordfields}"
                  targetFields="{!v.simpleRecord}"
                  targetError="{!v.recordError}"
                  recordUpdated="{!c.handleRecordUpdated}"
                  />

From here, you'll need to define the handleRecordUpdated function that will contain the logic required.

({
    /**
     * Method called when the force:recordData component finishes retrieving or updating the record.
     */
    handleRecordUpdated: function(component, event, helper) {
        
        //Get the total to use in your logic
        var total = component.get("v.simpleRecord").Carrelli_Totali__c;
        //If total meets the conditions (based on your existing component that was shared)
        if(total > 11){
            component.set("v.showModal", true);
            var flow = component.find("flowData");
            flow.startFlow("Form_di_Registrazione_ScreenFlow");
        }
    }
})

This is similar to the question/answer here: get the value from force:RecordData on Init handler

4
  • I added what you told me and fixed the component, but when I insert it it gives me this error: This page has an error. You might just need to refresh it. Assertion Failed!: Unable to get value for key '{c.handleRecordUpdated}'. No value provider was found for '{c'. : false Failing descriptor: {force:recordData}
    – Giuseppe
    Apr 26, 2023 at 8:15
  • I fixed it, the exclamation mark was missing
    – Giuseppe
    Apr 26, 2023 at 8:20
  • Apologies, I've updated that now. Apr 26, 2023 at 18:53
  • Thanks a lot for the explanation
    – Giuseppe
    Apr 28, 2023 at 7:13

You must log in to answer this question.

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