Salesforce Flow with Lightning components

Question

Scenario:

We have a multi-step flow made up from a number of lightning components, our first step contains a lightning:recordEditForm which creates and inserts a record and then passes the ID into a variable in the flow for use in later steps.

Issue:

When navigating back to the first step the recordID variable seams to be cleared and so the record is not getting loaded into the lightning:recordEditForm breaking our flow.

Question:

Should this variable exist for the duration of the flow even when navigating back, if not is there an alternate approach to store the created record in order to maintain our flow?

---

Flow with two components. Component 1 - Inputs Component 1 - Outputs

---

Component 1:

<lightning:recordEditForm objectApiName="Account" recordId="{!v.recordId}" onsuccess="{!c.handleNavigation}">
        <!-- the messages component is for error messages -->
        <lightning:messages />

        <lightning:inputField fieldName="Name" />

        <div class="slds-m-top_medium">
            <lightning:button variant="brand" type="submit" name="save" label="Save" />

    </div>
    </lightning:recordEditForm>

Controller:

({
handleNavigation : function(component, event, helper) {
    var params = event.getParams();
    component.set('v.recordId', params.response.id);
    console.log(params.response.id);
    var navigate = component.get("v.navigateFlow");
    navigate('NEXT');
}

})

Component - 2

<aura:component implements="force:lightningQuickAction,force:hasRecordId,force:appHostable,lightning:actionOverride,lightning:availableForFlowScreens,force:hasSObjectName">
<lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Account" onsuccess="{!c.handleNavigation}">
        <!-- the messages component is for error messages -->
        <lightning:messages />

        <lightning:inputField fieldName="Name" />

        <div class="slds-m-top_medium">
            <lightning:button variant="brand" type="submit" name="save" label="Save" />
            <lightning:button variant="brand" name="back" label="Back" onclick="{!c.goback}"/>
        </div>
</lightning:recordEditForm>

Controller

({
handleNavigation : function(component, event, helper) {
    var navigate = component.get("v.navigateFlow");
    navigate('NEXT');
},
goback : function(component, event, helper) {
    var navigate = component.get("v.navigateFlow");
    navigate('BACK');
}

})

Wrapper component which flow where "New" action for "Account" is overriden:

<aura:component implements="force:hasRecordId,force:lightningQuickAction,lightning:actionOverride">

<aura:handler name="init" value="{!this}" action="{!c.init}"/>

<lightning:card title="New Account">
    <lightning:flow aura:id="flow" onstatuschange="{!c.handleStatusChange}"/>
</lightning:card>

Controller:

({
init : function (component) {
    var flow = component.find("flow");
    flow.startFlow("AccountCreateFlow", []);
},

handleStatusChange : function (component, event) {
    // Get the output variables and iterate over them
    var outputVariables = event.getParam("outputVariables");
    var outputVar;

    for(var i = 0; i < outputVariables.length; i++) {
        outputVar = outputVariables[i];
        if(! $A.util.isEmpty(outputVar.value)) {
            component.set("v.recordId", outputVar.value);
        } 
    }

} })

Answer 1

Looks like you are trying to retrieve the recordId from flow's outputVariables but I think you also need to set the recordId in order to retrieve it.

Try setting recordId inside your handleNavigation like so:

    var flow = component.find("flowData");
    var inputVariables = [ { name : "recordId", type : "String", value:  params.response.id } ];
    flow.startFlow("myFlow", inputVariables);        

For details see setting flow variables.