Available For Flow Screens

Add the lightning:availableForFlowScreens interface to a Lightning component to make it available for flow screens. This interface is supported only in Lightning runtime.

This example shows the markup required to add the lightning:availableForFlowScreens interface to a Lightning component.

1<aura:component implements="lightning:availableForFlowScreens">
2  <!-- Your component markup here -->
3</aura:component>

After making the component available to flow screens, you can add a resource bundle to enable attributes that admins can edit in the Cloud Flow Designer. You can also replace the whole flow screen with your own component.

For more information, see the Lightning Aura Components Developer Guide.

Salesforce validates each flow screen when the user attempts to navigate to the next screen. If the flow screen is not valid, the user can’t progress. To validate the component with the flow screen, declare the validate attribute in the component. Set the validate attribute to a custom validation function that must return two parameters: isValid and errorMessage.

Here’s example markup for a Lightning component with custom validation. The validate attribute is set by the component’s client-side controller later in this example.

1<aura:component implements="lightning:availableForFlowScreens" access="global">
2  <!-- When the component renders, call the init handler. -->
3  <aura:handler name="init" value="{!this}" action="{!c.init}" />
4  <!-- Attribute to store the validation logic in. -->
5  <aura:attribute
6    name="validate"
7    type="Aura.Action"
8    description="Custom validation function to run when the flow is navigated to the next screen. The function must evaluate the component and return values for isValid and errorMessage."
9  />
10  <aura:attribute name="textAttribute" type="String" />
11  <lightning:input
12    id="nameinput"
13    type="text"
14    label="What is your name?"
15    value="{!v.textAttribute}"
16  />
17</aura:component>

Here’s the corresponding client-side controller. When the component renders, the init handler sets the component’s validate attribute to a function that validates the component. When the user navigates to the next flow screen, the function in the validate attribute is run.

• If the component is valid, the function returns the isValid parameter as true and the user navigates to the next flow screen.
• Otherwise, the function returns the isValid parameter as false and a custom error message that displays under the Lightning component in the flow screen. The user can’t navigate to the next screen until the function is successful.

1({
2  init: function (cmp, event, helper) {
3    // Set the validate attribute to a function that includes validation logic
4    cmp.set("v.validate", function () {
5      var userInput = cmp.get("v.textAttribute");
6      if (userInput && userInput.length > 0) {
7        // If the component is valid...
8        return { isValid: true };
9      } else {
10        // If the component is invalid...
11        return { isValid: false, errorMessage: "A value is required." };
12      }
13    });
14  },
15});