Can <lightning:flow> be nested inside of </aura:iteration>, getting Uncaught Error in $A.getCallback() [Cannot read property 'startFlow' of undefined]

Question

Trying to display more than one flow in the lighting component. Name of the flow will be passed by apex class

<lightning:tabset>


                <aura:iteration items="{!v.lsCustomTabs}" var="objTab">

                <lightning:tab label="{!objTab.tabName}">
                    <p>{!objTab.tabName}</p>

                    <aura:if isTrue="{!objTab.rWBFields}">
                        <aura:iteration items="{!objTab.lsFieldSet}" var="objCF">
                            <div class="slds-form-element">
                                <label class="slds-form-element__label" for="{!'form-'+objCF.fieldAPIName}">{!objCF.fieldAPIName}</label>
                                <div class="slds-form-element__control">
                                    <input type="text" id="{!'form-'+objCF.fieldAPIName}" class="slds-input" value="{!objCF.fieldValue}"/>
                                </div>
                            </div>
                        </aura:iteration>
                        <button class="slds-button slds-button_brand">Update</button>

                        <button class="slds-button slds-button_brand">Next</button>
                    </aura:if>

                    <aura:if isTrue="{!objTab.rWBFlow}">
                        <p>Display Flow</p>
                        <lightning:flow aura:id="flowData"/>
                    </aura:if>

                </lightning:tab>

                </aura:iteration>


            </lightning:tabset>

In JS response success i am trying to find the component by ID to start the flow, below is the code related to that

if(state === 'SUCCESS'){

            component.set("v.acct", response.getReturnValue().acc);
            component.set("v.lsCustomTabs", response.getReturnValue().lsTabsSet); 

            console.log("v.lsCustomTabs ===>" +JSON.stringify(response.getReturnValue().lsTabsSet));

            var lsTabs = response.getReturnValue().lsTabsSet;
            var vrWBFlow = 'FALSE';
            var vrWBFlowName = '';
            lsTabs.forEach(
                function (item, index) {
                    for( var key in item ) {
                        if(item.hasOwnProperty('wbFlowName')){
                            if(key === 'wbFlowName'){
                                console.log(key +':==>' + item[key])
                                vrWBFlow = 'TRUE';
                                vrWBFlowName = item[key];
                                component.set("v.renderWBFlow", "TRUE"); 
                                component.set("v.wbFlowName", item[key]); 
                            }
                        }
                    }
                });

            console.log("vrWBFlow ===>"+vrWBFlow);
            console.log("vrWBFlowName ===>"+vrWBFlowName);

            if(vrWBFlow === 'TRUE')
            {
                // Find the component whose aura:id is "flowData"
                var flow = component.find("flowData");
                console.log("In IF vrWBFlowName ===>"+vrWBFlowName);
                console.log("flow ===>"+flow);
                flow.startFlow(vrWBFlowName);

            }

        }

Error i am getting is

    Uncaught Error in $A.getCallback() [Cannot read property 'startFlow' of undefined]
    Callback failed: apex://clsWorkflowBuilder/ACTION$getCustomFieldData

I tried setting unique aura:Id for , that also gave the same error. Tried with a static Id, when loop has one record; still got the same error.

Wondering now if salesforce allow using in ? or am i am missing something?

Documentation/How to Use link - https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_flow_cmp.htm

Answer 1

When you set an attribute, none of the elements are rendered immediately. You have to wait until the next life cycle completes, at minimum. You'll probably want to do something like:

if(vrWBFlow === 'TRUE')
{
    setTimeout(function() {
    // Find the component whose aura:id is "flowData"
    var flow = component.find("flowData");
    console.log("In IF vrWBFlowName ===>"+vrWBFlowName);
    console.log("flow ===>"+flow);
    flow.startFlow(vrWBFlowName);
    }, 500); // wait half a second
}

The 500ms wait is probably overkill, but this is just to make sure that a couple of life cycles have progressed so everything should be rendered.