Usage Of lightning:availableForFlowScreens

Salesforce flow is one of the most powerful business automation tools that will be used to build the application with drag and drop. Now we will see how to use the lightning component available for the flow screens. Make your custom Lightning components available to flow screens in the Cloud Flow Designer by implementing the lightning:availableForFlowScreens interface. In the Cloud Flow Designer, flow screen components appear as options for Lightning component screen fields. In this example, I will get the current conversion rates from the external API and will display on the flow by using component.

Apex class
public class FlowGetExchangeRates {
    public static ConversionRates getConversionRates(String source , String target){
        ConversionRates cr = new ConversionRates() ;
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        HttpResponse response = http.send(request);
        if (response.getStatusCode() == 200) {
            Map<String, Object> results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
            Map<String , Object> qts = (Map<String , Object>) results.get('quotes');
            for(String s : qts.keySet() ){
                    cr.USDEUR =  String.valueOf((Object)qts.get(s));
                    cr.USDGBP =  String.valueOf((Object)qts.get(s));
                    cr.USDCAD =  String.valueOf((Object)qts.get(s));
                    cr.USDPLN =  String.valueOf((Object)qts.get(s));
        return cr ; 
    public class ConversionRates{
        public String USDEUR{get;set;}
        public String USDGBP{get;set;}
        public String USDCAD{get;set;}
        public String USDPLN{get;set;}

The above class is covert the exchange rates based on the source currency specified. Make sure you added the Rest API URI to remove site settings.

Lightning component 

<aura:component implements="lightning:availableForFlowScreens" access="global" Controller="FlowGetExchangeRates">
    <aura:attribute name="sourcecurrencies" type="String" access="global" default="USD"/>
    <aura:attribute name="targetcurrencies" type="String" access="global" default="EUR,GBP,CAD,PLN" />
    <aura:attribute name="resVal" type="FlowGetExchangeRates.ConversionRates" access="global"  />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
            <th>Conveted Val</th>


    doInit : function(component, event, helper) {
        var action=  component.get('c.getConversionRates'); 
        action.setParams({"source":component.get("v.sourcecurrencies") , "target":component.get("v.targetcurrencies")})
            var state=response.getState();

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 screen field. Here is the designer for component

    <design:attribute name="sourcecurrencies" label="sourcecurrencies"  default="USD"/>
    <design:attribute name="targetcurrencies" label="targetcurrencies"  default="EUR,GBP,CAD,PLN" />

A design resource describes the design-time behavior of a Lightning component information that visual tools need to allow adding the component to a page or app. Adding this resource is similar to adding it for the Lightning App Builder. When admins reference this component in a flow, they can pass data between the flow and the Lightning component. Use the Inputs tab to set an attribute using values from the flow. Use the Outputs tab to store an attribute’s value in a flow variable

Use Component in flow 

Now we will use the above lightning component in flow designer. Go to salesforce flow builder and create a new flow. Drag and Drop the screen element to flow designer and configure the flow screen as shown below. the flow contains the two input text element that will accept the source and target currencies.


Drag and drop another screen element into the designer and configure flow to receive the input values from the first screen element as shown below.

Click save. Connect the two flow screen elements as shown below. Set the first screen as a starting element


Now go to the flow and enter the source and target currencies as shown below

Click Next and you will see the result from the Lightning component as shown below.



Custom Navigation Model for Flow Screens with Lightning Component

In this blog, I am going to explain how to use the custom lightning component button that is used to control the navigation of flow.By default, users navigate a flow by clicking standard buttons at the bottom of each screen. The lightning:availableForFlowScreens interface provides two attributes to help you fully customize your screen’s navigation. To figure out which navigation actions are available for the screen, loop through the availableActions attribute. To programmatically trigger one of those actions, call the navigateFlow action from your JavaScript controller.

Flow Navigation Actions

The availableActions attribute lists the valid navigation actions for that screen NEXT, BACK, PAUSE, RESUME, FINISH are the possible actions. A screen’s available actions are determined by:

  • Where in the flow the screen is. For example, Previous isn’t supported on the first screen in a flow, Finish is supported for only the last screen in a flow, and you can never have both Next and Finish.
  • Whether the flow creator opted to hide any of the actions in the screen’s Navigation Actions controls. For example, if Allow Pause is de-selected, the Pause action isn’t included in availableActions.


Here is the lightning component

<aura:component implements="lightning:availableForFlowScreens" access="global" >
    <!-- Get the script text from the flow -->    
    <aura:attribute name="scriptText" type="String" required="true" />
    <!-- Pass the value of the selected option back to the flow -->
    <aura:attribute name="value" type="String" />
    <aura:attribute name="action" type="String" />
    <div class="script-container">
        Navigation Action :   {!v.value}
    <!-- Buttons for the agent to click, according to the customer’s response -->
    <div class="slds-p-top_large slds-p-bottom_large">
        <p><lightning:formattedText value="Customer Response" 
                                    class="slds-text-body_small" /></p>
        <lightning:buttongroup >
            <lightning:button label="Previous" aura:id="previousId" 
                              variant="neutral" onclick="{!c.handleChange}"/>
            <lightning:button label="Next" aura:id="nextId" 
                              variant="neutral" onclick="{!c.handleChange}"/>
            <lightning:button label="Finish" aura:id="finishId" 
                              variant="neutral" onclick="{!c.handleChange}"/>


    handleChange : function(component, event, helper) {
        // When an option is selected, navigate to the next screen
        var response = event.getSource().getLocalId();
        component.set("v.value", response);
        var navigate = component.get("v.navigateFlow");


    <design:attribute name="scriptText" label="Script Text" 
                      description="What the agent should say to the customer" />
    <design:attribute name="action" label="Navigation Action" 
                      description="" />


Here the simple flow that I created for testing
You can see below the image that shows how the lightning component interacts with flow navigation.
Once you click the next button on the component it will take to the next action i.e Finish.