---
schema_version: "1"
id: 81c9bd3bb3455d09a233dc3115449fdb8ee64229d790120b989dc792dcd7dcb3
title: Dynamically Update a Flow Screen with an Aura Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-config-for-flow-screens-replace-form.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-replace-form.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c6ef6a602ac69a547704fc33d4aede534fb858bff19075a490eaaa8534a0db84
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Dynamically Update a Flow Screen with an Aura Component

To conditionally display a field on your screen, build an Aura component that uses `aura:if` to check when parts of the component should appear.

In this example, this component (`c:flowDynamicScreen`) displays a custom script component and a group of radio buttons. The component gets the contact's existing phone number from the flow, and uses that value to fill in the script.

![A flow screen that shows a script and a radio button field.](https://developer.salesforce.com/media/aura-platform/flow_dynamicform1.png)

If the user selects the No radio button, the component displays an input, where the user can enter the new phone number.

![When No is selected, the Phone field displays.](https://developer.salesforce.com/media/aura-platform/flow_dynamicform2.png)

## c:flowDynamicScreen Component

```nolang
<aura:component access="global" implements="lightning:availableForFlowScreens">
   <aura:attribute name="oldPhone" type="String" />
   <aura:attribute name="newPhone" type="String" />
   <aura:attribute name="radioOptions" type="List" default="[
      {'label': 'Yes', 'value': 'false'},
      {'label': 'No', 'value': 'true'} ]"/>
   <aura:attribute name="radioValue" type="Boolean" />

   <!-- Displays script to guide the agent's call -->
   <div class="script-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="Suggested script" /></h2>
            </div>
            <div class="slds-media__body">
               <!-- Inserts the user’s current number, pulled from the flow, into the script -->
               <ui:outputRichText class="script" value="{!'Let me verify your phone number.
                  Is ' + v.oldPhone + ' still a good phone number to reach you?'}"/>
            </div>
         </div>
      </div>
   </div>
   <!-- Displays a radio button group to enter the customer’s response -->
   <div class="slds-p-top_medium slds-p-bottom_medium">
      <lightning:radioGroup aura:id="rbg_correct" name="rbg_correct"
         label="Is the phone number correct?"
         options="{! v.radioOptions }" value="{! v.radioValue }" />
      <!-- If the current number is wrong,
         displays a field to enter the correct number -->
      <aura:if isTrue="{!v.radioValue}">
         <lightning:input type="tel" aura:id="phone_updated" label="Phone"
            onblur="{!c.handleNewPhone}" class="slds-p-top_small"/>
      </aura:if>
   </div>
</aura:component>
```

## c:flowDynamicScreen Style

```nolang
.THIS.script-container {
   border: t(borderWidthThick) solid t(colorBorderBrand);
   border-radius: t(borderRadiusMedium);
}

.THIS .script {
   font-size: 1.125rem; /*t(fontSizeTextLarge)*/
   font-weight: t(fontWeightRegular);
   line-height: t(lineHeightHeading);
}
```

## c:flowDynamicScreen Controller

When the user tabs out, or otherwise removes focus from the Phone input, the controller sets the `newPhone` attribute to the input value, so that you can reference the new number in the flow.

```javascript
({
  handleNewPhone: function (cmp, event, helper) {
    cmp.set("v.newPhone", cmp.find("phone_updated").get("v.value"));
  },
});
```

## defaultTokens.tokens

The script in `c:flowDynamicScreen` uses tokens to stay in sync with the Salesforce Lightning Design System styles.

```nolang
<aura:tokens extends="force:base" >
</aura:tokens>
```

**See Also**

- [Customize the Flow Header with an Aura Component](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-replace-header.md)
- [Customize the Flow Footer with an Aura Component](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-replace-footer.md)
- [_Component Library_: lightning:availableForFlowScreens Interface](https://developer.salesforce.com/docs/component-library/bundle/lightning:availableForFlowScreens/documentation)