[SalesForce] Salesforce Flow with Lightning components

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

}
})