Modify this Aura Component

Question

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();
}

})

Answer 1

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