How to validate custom Flow screen components in Flows – Part 1

Developing custom flow screen components is awesome! But, there is always a but, there is no out of the box validation feature available to validate them in flows.

But there is a cool feature, released in Winter 19, which let’s you add validation within your component.

So how exactly does it work?

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.

I created to small component to demo the same.

Component Markup: FlowScreenCMPsValidation.CMP

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <!-- When the component renders, call the init handler. -->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <!-- Attribute to store the validation logic in. -->
    <aura:attribute name="validate" type="Aura.Action" 
                    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."/>
    <aura:attribute name="Name" type="String"/>
    <lightning:input type="text" label="What is your name?" value="{!v.Name}" required="true"/>
</aura:component>

JS Controller: FlowScreenCMPsValidationController.js

({
    init: function(cmp, event, helper) {
       // Set the validate attribute to a function that includes validation logic
       cmp.set('v.validate', function() {
           var userInput = cmp.get('v.Name');
           if(userInput && userInput.length>0) {
               // If the component is valid...
               return { isValid: true };
           }
           else {
               // If the component is invalid...
               return { isValid: false, errorMessage: 'A value is required.' };
           }})
	}
})

Lights, Camera and Demo!

But! *arghh*, the ‘but’ again!
I noticed there are some limitations with this validation approach. When the user clicks next, the component rerenders and the that we pass is added at the end of the body of the component. And, because of this:

• Previous inputs from user get lost when the component rerenders.
• We cannot add multiple validations to individual field input, since the syntax only allows us to return a string for validation error.

We shall try to address these issues in our next post.

I did post an idea on the community for the same. Please upvote!

Thank you for being an awesome reader! Subscribe to this blog for all the updates delivered straight to your inbox. 🙂