0

I have a flow embedded within a custom lightning component where I'm trying to programmatically navigate the flow (hit the next button) if/when the user presses enter, here's the code I have so far:

Component:

<aura:component implements="lightning:availableForFlowScreens,flexipage:availableForRecordHome,force:hasRecordId,flexipage:availableForAllPageTypes" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <div onkeyup="{!c.onkeypress}">
        <lightning:flow aura:id="createNote"/>
    </div>
</aura:component>

Controller:

({ 
    init : function (component) {
        // Find the component whose aura:id is "createNote"
        var flow = component.find("createNote");
        // In that component, start the CreateNote_CustomAction2 flow with an initialized
        // input variable to pass the current recordId into the flow
        var input = [
            {
                name : "recordId",
                type: "String",
                value : component.get("v.recordId")
            }
        ]
        flow.startFlow("CreateNote_CustomAction2", input);
    },
    onkeypress : function (component, event, helper) {
        var navigate = component.get("v.navigateFlow");
        if (event.which === 13 || event.keyCode === 13) {
            navigate("NEXT");
        }
    }
})

The function to detect the enter key being pressed within the component is working fine, but it's not actually clicking the next button. Here's the error I get when I hit enter on the component:

Uncaught Action failed: c:CreateNote_LightningComponenet$controller$onkeypress [navigate is not a function]

onkeypress()@https://sandboxorg.lightning.force.com/lightning/r/Opportunity/0063J00000257PcQAI/components/c/CreateNote_LightningComponenet.js:27:13

The flow fires and runs fine if you click the next button within the component, but I can't seem to figure out how to correctly click the button programmatically on an enter press.

  • There is nothing called “navigateFlow” on your component – Sebastian Kessel Dec 16 '19 at 15:57
  • @SebastianKessel I think navigateFlow is supposed to be a natively supported action within Flows in Lightning, see: developer.salesforce.com/docs/atlas.en-us.lightning.meta/… I could totally be wrong though so please do elaborate if possible – traguseo Dec 16 '19 at 15:59
  • First. Is your component in API 47 (Winter 20)? If so, you have not added the lightning:availableForFlowScreens interface. Follow the link at the bottom of the link you sent me for details – Sebastian Kessel Dec 16 '19 at 16:08
  • @SebastianKessel good catch, unfortunately that also didn't work, I've edited the main post to include that under implements= – traguseo Dec 16 '19 at 16:09
0

I think your approach might be the problem here. According to this article, you are supposed to put your component inside the flow. In what you have written, the flow is contained inside the component instead. That is a fundamental change on how the interface is supposed to work.

Here is the relevant part of the text

Since Aura components have access to a flow screen’s navigation actions, you can fully customize how the user moves between screens. For example, hide the default navigation buttons and have the flow move to the next screen when the user selects a choice

Try creating the flow, and placing the buttons to navigate inside it instead.

| improve this answer | |
  • Our use case is to display the component on a record page so that the flow can be easily accessed and interfaced with by our team. With that being said would you still recommend the nested component approach? Put a component inside the flow and then another component to display the flow (which is really just showing a component at this point)? – traguseo Dec 16 '19 at 16:24
  • I guess you can drop a flow directly on a record page in lightning app builder."Display a Flow on a Page in Your Salesforce Org Unit | Salesforce" trailhead.salesforce.com/en/content/learn/modules/… – Ashish Sharma Dec 16 '19 at 16:52
  • @AshishSharma Unfortunately that still doesn't allow users to hit enter to submit the Flow form, which was the main use case for creating the component – traguseo Dec 16 '19 at 17:00
  • Your approach should be to embed a lightning component with lightning:availableForFlowScreens implemented. "Customize the Flow Footer with an Aura Component | Lightning Aura Components Developer Guide | Salesforce Developers" developer.salesforce.com/docs/atlas.en-us.lightning.meta/… Check if your flow has got all the necessary navigations added onto flow screens. – Ashish Sharma Dec 16 '19 at 17:07
  • 1
    thanks guys, I swapped the way I was approaching this and everything is functioning as intended now. – traguseo Dec 16 '19 at 20:33

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.