Documentation - Flow Action Development

Introduction

A local Flow Action is basically a Lightning Component optimized for use as a standalone node in a flow definition.

Preparing your Lightning Component for Use With Flow

1) Add the Local Action interface to your component

The component must include the following marker:

implements="flowruntime:availableForLocalInvocableActions"

Note that this will be changing in the Summer '18 release to:

implements="lightning:availableForFlowActions"


2) Add an Invoke method that calls the “callback” function passed from Flow

Flow will attempt to call an Invoke method in your component, so you need to have one there in your controller. It will pass a parameter called “arguments” that contains a callback function called “callback”. Here's an example of code that extracts the callback and then uses it:

 invoke : function(component, event, helper) {
 .
 .
 .
    component.get("v.scriptLoaded").then($A.getCallback(function() {
           
             //do some stuff using the loaded external script
            
            callback("SUCCESS");
            }
            
   }


If you return “ERROR”, then the Fault path of the Node will be executed, giving you the opportunity to specify a recovery path. (Summer '18: If you fail to call the callback function during your processing, it will time out after 2 minutes.)

When the status is 'ERROR', the callback function takes a second parameter for the error message.


Working with External Scripts

If you want to require additional javascript, you need to add it as a static resources to your org and then require it using the

<lightning:require> mechanism as shown here:

 <ltng:require aura:id="require" styles="" scripts="{!$Resource.petstore}" afterScriptsLoaded="{!c.scriptsLoaded}"/>.


Timing can be tricky with this, so you should use onScriptsLoaded to make sure the scripts are loaded before you try to use them. Here's an example of this:


In the cmp file:

<aura:attribute name="scriptLoaded" type="Object" default="false"/>

In the controller file:

init : function(component, event, helper) {
        component.set("v.scriptLoaded", helper.defer());
    },
scriptsLoaded : function(component, event, helper) {
        component.get("v.scriptLoaded").resolve(true);
    },
    
 invoke : function(component, event, helper) {
 .
 .
 .
    component.get("v.scriptLoaded").then($A.getCallback(function() {
           
             //do some stuff using the loaded external script
            
            callback("SUCCESS");
            }
            
   }

In the helper file:

 defer : function() {
            var res, rej;
            var promise = new Promise(function(resolve, reject) {
                res = resolve;
                rej = reject;
            });
            promise.resolve = res;
            promise.reject = rej;
            return promise;

Whitelisting External Targets (CORS)

If you’re doing callouts to some external server, you need to do the following:

  1. Add an entry to your org's global whitelist. It can be found in setup -> CSP Trusted sites. Just add an entry for the server you wish to connect to, eg “www.google.com” and give it a name.
  2. Enable CORS on the external server. This generally involves adding a special header that responds to the OPTIONS http call. Here, for example, is the documentation AWS uses to explain how to enable CORS on the Api-Gateway service. Here is a good general purpose resources.