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 {
    
    @AuraEnabled
    public static ConversionRates getConversionRates(String source , String target){
        ConversionRates cr = new ConversionRates() ;
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        request.setEndpoint('http://apilayer.net/api/live?access_key=456fab5d3bee967f81169416e234387e&currencies='+target+'&source='+source+'&format=1');
        request.setMethod('GET');
        System.debug('response'+request);
        HttpResponse response = http.send(request);
        if (response.getStatusCode() == 200) {
            Map<String, Object> results = (Map<String, Object>) JSON.deserializeUntyped(response.getBody());
            System.debug('results'+results);
            Map<String , Object> qts = (Map<String , Object>) results.get('quotes');
            for(String s : qts.keySet() ){
                System.debug('s'+s);
                if(s=='USDEUR'){
                    cr.USDEUR =  String.valueOf((Object)qts.get(s));
                }
                if(s=='USDGBP'){
                    cr.USDGBP =  String.valueOf((Object)qts.get(s));
                }
                if(s=='USDCAD'){
                    cr.USDCAD =  String.valueOf((Object)qts.get(s));
                }
                if(s=='USDPLN'){
                    cr.USDPLN =  String.valueOf((Object)qts.get(s));
                }
            }
        }
        return cr ; 
        
    }
    
    
    public class ConversionRates{
        @AuraEnabled
        public String USDEUR{get;set;}
        @AuraEnabled
        public String USDGBP{get;set;}
        @AuraEnabled
        public String USDCAD{get;set;}
        @AuraEnabled
        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">
        <tr>
            <th>USD</th>
            <th>Conveted Val</th>
        </tr>
        <tr>
            <td>EUR</td>
            <td>{!v.resVal.USDEUR}</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>{!v.resVal.USDGBP}</td>
        </tr>
        <tr>
            <td>CAD</td>
            <td>{!v.resVal.USDCAD}</td>
        </tr>
        <tr>
            <td>PLN</td>
            <td>{!v.resVal.USDPLN}</td>
        </tr>
    </table>
    
    
</aura:component>

 

({
    doInit : function(component, event, helper) {
        var action=  component.get('c.getConversionRates'); 
        action.setParams({"source":component.get("v.sourcecurrencies") , "target":component.get("v.targetcurrencies")})
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state=='SUCCESS')
            {
                component.set('v.resVal',response.getReturnValue()); 
            }
        });
        $A.enqueueAction(action);
    }
})

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:component>
    <design:attribute name="sourcecurrencies" label="sourcecurrencies"  default="USD"/>
    <design:attribute name="targetcurrencies" label="targetcurrencies"  default="EUR,GBP,CAD,PLN" />
</design:component>

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

Testing 

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.