[SalesForce] Flow embedded within a Lightning Component, can’t navigate programmatically

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.

Best Answer

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.

Related Solutions

[SalesForce] Handling output variables from a lightning flow component embedded in visualforce page

Interesting, it does seem like the docs are missing something.

I believe the function they put there is intended to be a handler for the flow's onstatuschange event. See an example for putting an event handler in createComponent:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm

In the example code I'd focus on this line:

$Lightning.createComponent("lightning:flow", {}, ...

The second parameter is an empty object. This is where you'd normally pass in direct attributes of the component. So try replacing that {} with:

{"onstatuschange":statusChange}

I'm not sure if that'll actually work, or if you need to do some sort of binding to a Lightning controller function, but if it fails you're likely to at least get an error message to start you off!

--- EDITED to add insight from comments

Here's the other problem with Salesforce's code sample.

JS for (k in obj) syntax returns the key not the value. So of course you're getting 0! That's the array index. What you really need to do is:

for (key in outputVariables){
    if outputVariables[key].name == 'vaOutput' {
        // make your decisions here
    }
}

Alternate array iteration syntax instead of for .. in:

outputVariables.forEach( function(outputVar){
    if outputVar.name == 'vaOutput' {
        // make your decisions here
    }
} );

If you have a LOT of output variables it might make sense to rearrange them into a map before processing.

var outputMap = {};
outputVariables.forEach( function(outputVar){
    outputMap[outputVar.name] = outputMap.[outputVar.value];
} );

Then instead of using an if statement to find each output, you can just access them from the map.

[SalesForce] Lightning Input: type:search clear icon action

Since you want to detect every change in the search input box but are not looking for a specific key stroke, you could use onchange in the lightning:input instead of wrapping it in a div with onkeyup. This will trigger your controller function anytime the user enters or removes a character in the box as well as when the user clicks the clear button that's part of the lightning:input search type component.

You would change your component markup from what you posted above to the following. Notice you no longer need the div for keystroke detection purposes. You shouldn't need to make any changes to your client controller, helper, or server controller.

<lightning:input 
    aura:id="searchKnowledgeInput"
    name="searchKnowledgeInput" 
    label="" type="search" 
    placeholder="Search Knowledge"
    isLoading="{! v.issearching }"
    onchange="{!c.onChangeSearchText}"
 />

I used this solution myself in a situation where I needed to add dynamic filtering to a table.

Best Answer

Related Solutions

[SalesForce] Handling output variables from a lightning flow component embedded in visualforce page

[SalesForce] Lightning Input: type:search clear icon action

Related Topic