Dynamically Update a Flow Screen with a Lightning Component

In this post, I am going to explain how to dynamically update the flow screen with the lightning component. To conditionally display a field on your screen, build a Lightning component that uses aura: if to check when parts of the component should appear. This component displays a custom script component and a group of radio buttons. The component gets the user feedback based on user-selected yes or no options.

If the user selects the Yes radio button, the component displays  form for the user get in touch details

If the user selects the Yes radio button, the component displays thanks message.

Here is the lightning component

<aura:component access="global" implements="lightning:availableForFlowScreens">
    
    <aura:attribute name="radioOptions" type="List" default="[
                                                             {'label': 'Yes', 'value': 'false'},
                                                             {'label': 'No', 'value': 'true'} ]"/>
    <aura:attribute name="radioValue" type="Boolean" default="true"/>
    <div class="survey-container">
        <div class="slds-card__header slds-grid slds-p-bottom_small slds-m-bottom_none">
            <div class="slds-media slds-media_center slds-has-flexi-truncate" >
                <div class="slds-media__figure slds-align-top">
                    <h2><lightning:icon iconName="utility:quotation_marks"
                                        title="Get in touch Details" /></h2>
                </div>
                <div class="slds-media__body">
                    <ui:outputRichText class="script" value="{!'Would you like to Get in touch with Sales?'}"/>
                </div>
            </div>
        </div>
    </div>
    
    <div class="slds-p-top_medium slds-p-bottom_medium">
        <lightning:radioGroup aura:id="rbg_correct" name="rbg_correct"
                              label="Would you like to take survey?"
                              options="{! v.radioOptions }" value="{! v.radioValue }" />
        <aura:if isTrue="{!v.radioValue}">
            <div class="slds-media__body">
                <ui:outputRichText class="script" value="{!'Thanks for your Time'}"/>
            </div>
        </aura:if>
        
        <aura:if isTrue="{!v.radioValue}">
            <aura:set attribute="else">
                <lightning:input label="Name" name="Name" class="slds-p-top_small" />
                <lightning:input type="tel"  label="Phone" class="slds-p-top_small"/>
                <lightning:input type="date" label="Birthday" name="date" class="slds-p-top_small"/>
                <lightning:input type="email" label="Email" name="email" value="abc@domain.com" class="slds-p-top_small"/>
            </aura:set>
            
        </aura:if>
        
    </div>
    
    
</aura:component>

Here is the flow which created for this example 

Below image shows how to invoke the lightning component in flow designer.