1

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

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.

  • Seems like there are two issues: one is the element not rendered immediately as @sfdcfox said, other one is element renders only when tab selected. Also wrapped the function in getCallback per my friend suggestion as setTimeout($A.getCallback(function() { // code }), 100);. Also modified the code so that flow will start only when user select the tab. – user51395rk Nov 12 '18 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.