Tag: Flows

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

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 

 

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

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.

 

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.

Component 

Here is the lightning component

 

 

Flow 

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.