Flow Local Actions Using Lightning Components allow you to execute client-side logic in your flow, build or modify custom Lightning components to use as local actions in flows. For example, get data from third-party systems without going through the Salesforce server, or open a URL in another browser tab. Once you configure the Lightning component’s markup, client-side controller, and design resource, it appears in the Cloud Flow Designer as a Local Action element. In this example, the input screen on the flow will take a country name and from there invoke the local action and return the country information from the web service.
How to add Flow Local Actions
Add the lightning:availableForFlowActions interface to a Lightning component to make it available as a flow action. When a component is executed as a flow action, the flow calls the invoke method in the client-side controller. Flows that include Lightning components are supported only in Lightning runtime. Lightning components that implement lightning:availableForFlowActions are available as Local Action elements in the Cloud Flow Designer. When a component is executed as a flow local action, the flow calls the invoke method in the client-side controller. To run the code asynchronously in your client-side controller, such as when you’re making an XML HTTP request (XHR), return a Promise. When the method finishes or the Promise is fulfilled, control is returned back to the flow.
Flow Action Component
Here is the simple component that we will be used as flow action.
<aura:component implements="lightning:availableForFlowActions" access="global">
<aura:attribute name="countryName" type="String" default="USA" access="global" />
<aura:attribute name="response" type="String" default="USA" access="global" />
</aura:component>
Controller
({
invoke : function(component, event, helper) {
var cancelToken = event.getParam("arguments").cancelToken;
return new Promise(function(resolve, reject) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = $A.getCallback(function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 300) {
var response = JSON.parse(xhttp.responseText);
console.log('response'+response);
component.set("v.response", JSON.stringify(response));
resolve();
} else {
var errorText = "";
if (this.status === 0) {
errorText = 'Request has been terminated\nPossible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.';
} else {
errorText = this.statusText;
}
reject(errorText);
}
}
});
var countryName = component.get("v.countryName");
xhttp.open("GET", "https://restcountries.eu/rest/v2/name/"+countryName, true);
xhttp.send(null);
cancelToken.promise.then(function(error) {
xhttp.abort();
reject(error);
});
});
}
})
When a component is executed as a flow local action, the flow calls the invoke method in the client-side controller. To run the code asynchronously in your client-side controller, such as when you’re making an XML HTTP request (XHR), return a Promise. When the method finishes or the Promise is fulfilled, control is returned back to the flow. When a Promise is resolved, the next element in the flow is executed. When a Promise is rejected or hits the timeout, the flow takes the Local Action element’s fault connector and sets $Flow.FaultMessage to the error message. By default, the error message is “An error occurred when the elementName element tried to execute the c:FlowAction component.” To customize the error message in $Flow.FaultMessage, return it as a new Error object in the reject() call. When a Promise is fulfilled, the next element in the flow is executed. When a Promise is rejected or times out, the flow takes the Local Action element’s fault connector and sets $Flow.FaultMessage to the error message. By default, the error message is “An error occurred when the flow tried to execute the c:FlowAction component.”. To customize the error message, return it as an error in the reject() call.
Configure the designer
To make an attribute’s value customizable in the Cloud Flow Designer, add it to the component’s design resource. That way, flow admins can pass values between that attribute and the flow when they configure the Local Action element. That way, flow admins can pass values between that attribute and the flow when they configure the corresponding Local Action element.
<design:component>
<design:attribute name="countryName" label="String" />
<design:attribute name="response" label="String" />
</design:component>
Invoke Action from the Flow
Now go to the cloud flow designer and create a new screen element to enter the country name
Add the Flow locale actions into the screen and configure the input params as shown below.
Create a screen element to show the output response as shown below.
Final screen flow looks like below
Testing
Synchronous Code
the example code we have seen so far is Asynchronous Code where we will get the promise and here is the synchronous version of the controller.js
({
invoke : function(component, event, helper) {
var cancelToken = event.getParam("arguments").cancelToken;
var xhttp = new XMLHttpRequest();
var countryName = component.get("v.countryName");
xhttp.open("GET", "https://restcountries.eu/rest/v2/name/"+countryName, false);
xhttp.send(null);
if (xhttp.status === 200) {
component.set("v.response", JSON.stringify(xhttp.responseText));
}
},
})
