Retain input values while validating custom Flow Screen Lightning components – Part 2

Hello and welcome back! 😀

In our previous post, we discussed how we can validate custom flow screen components, and towards the end of it we also touched upon the different limitations of this validation approach.

In today’s article we shall aim at finding the solution to one of the limitations we discussed in the previous post, i.e. Previous inputs from user get lost when the component rerenders.

So in order to get around this we can use SessionStorage to store the input values. With SessionStorage, web applications can store data locally within the user’s browser per session. To know more, follow this link:

https://www.w3schools.com/html/html5_webstorage.asp

This idea was suggested to me by Alex Edelstein, Product Manager of Flows, Salesforce. Unfortunately, this doesn’t provide us a complete solution to our problem which we will address towards the end of this article. Right now, let’s see how we can achieve this.

Logic

The idea is to temporarily store the values input by user into the the SessionStorage of the web browser everytime a user hits the Next button, and initialize the component input fields with those values when component validation fails.

Let’s flow!

To keep things simple, I created a simple flow screen lightning component with two inputs.

FlowScreenCMPsValidation.cmp

<aura:component implements="lightning:availableForFlowScreens" access="global">
    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <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="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>

    <lightning:input type="text" label="First Name" value="{!v.firstName}" required="true"/>
    <lightning:input type="text" label="Last Name" value="{!v.lastName}" required="true"/>
    
</aura:component>

FlowScreenCMPsValidationController.js

({
    init: function(component, event, helper) {
        
        //Get inputs when validation failed
        if(sessionStorage){
            if(sessionStorage.getItem('validationfailed')){
                if(sessionStorage.getItem('isFirstNameValid'))
                    component.set('v.firstName',sessionStorage.getItem('firstName'));
                if(sessionStorage.getItem('isLastNameValid'))
                    component.set('v.lastName',sessionStorage.getItem('lastName'));
            }
        }
        
        // Set the validate attribute to a function that includes validation logic
        component.set('v.validate', function() {
            
            var isFirstNameValid=false; //Check if input is valid
            var firstName = component.get('v.firstName');
            if(firstName && firstName.length>0)
                isFirstNameValid = true;
            
            var isLastNameValid=false; //Check if input is valid
            var lastName = component.get('v.lastName');
            if(lastName && lastName.length>0) 
                isLastNameValid = true;
            
            //When all fields are valid, remove the values from sessionStorage
            if(isFirstNameValid && isLastNameValid){
                if(sessionStorage){
                    sessionStorage.removeItem('validationfailed'); sessionStorage.removeItem('firstName');
                    sessionStorage.removeItem('lastName'); sessionStorage.removeItem('isFirstNameValid');
                    sessionStorage.removeItem('isLastNameValid');
                }
                return { isValid: true };
            }
            // When validation fails
            else{
                if(sessionStorage){
                    //Set the input values into sessionStorage
                    sessionStorage.setItem('validationfailed',true);
                    sessionStorage.setItem('isFirstNameValid',isFirstNameValid);
                    sessionStorage.setItem('isLastNameValid',isLastNameValid);
                    if(isFirstNameValid) 
                        sessionStorage.setItem('firstName',firstName);
                    else
                        sessionStorage.setItem('firstName','');
                    if(isLastNameValid)                    
                        sessionStorage.setItem('lastName',lastName);
                    else
                        sessionStorage.setItem('lastName','');
                }
                return {isValid: false, 
                        //Validation Error message 
                        errorMessage: 'Please fill all the required fields on the page.' 
                       };
            }
        })
        
    }
})

Time for some action!

But there’s a catch!

As we discussed in the beginning, this workaround doesn’t really provide us the complete solution. Why? Because the SessionStorage is browser dependent. So if a user is running the flow via Mobile app, this solution will not work. So the hunt for a better solution is still on!
Now if you are wondering, what about the second limitation which we discussed in my previous post. We shall try to address it in the part of this series. 🙂

I dropped an idea on the community for the same. Please upvote to make our life easy!

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