Home / flow / flow-reactive-screen-components
flow-reactive-screen-components
Build reactive Flow screens where one component updates another without navigation using reactive formulas and component outputs. NOT for Aura-based screens — use flow/flow-screen-input-validation-patterns.
Open the skill folder on GitHub
Flow Reactive Screen Components
Reactive screens let one component's output drive another without navigating to a new screen. Use {!Component_API_Name.value} as a reference in any downstream component's attribute — Flow re-renders dependents on change. This skill shows reactive formulas, dependent picklists, and common pitfalls.
Adoption Signals
Any screen flow that currently uses multiple Next clicks to update displayed values.
- Reactive when a downstream picklist must filter on the current value of an upstream input.
- Reactive when conditional visibility, formula recalculation, or running totals must update without page navigation.
Recommended Workflow
- Activate Reactive Screens via org setting (default on Winter '24+).
- Use formula resources that reference component API names for derived values.
- Reference
{!Source.value}in dependent component attribute (Text, Default Value, Visibility). - Avoid complex loops/actions inside the screen — reactivity triggers on each change.
- Test: tab through fields, observe updates in real time; verify mobile support.
Key Considerations
- Not all standard screen components are reactive yet; check docs.
- Reactivity is synchronous — don't call heavy Apex actions in a reactive handler.
- Custom LWC screen components must implement
@api validate()and emitFlowAttributeChangeEventto be reactive. - Visibility rules re-evaluate on each change.
Worked Examples (see references/examples.md)
- Live total — Order quantity * price
- Show/hide state field — Country → State dependent
Common Gotchas (see references/gotchas.md)
- Heavy action in reactive — UI freezes.
- Custom LWC not reactive — Doesn't update others.
- Mobile lag — Updates delayed.
Top LLM Anti-Patterns (full list in references/llm-anti-patterns.md)
- Next clicks for trivially-derivable fields
- Heavy Apex action on every change
- Custom LWC screen without FlowAttributeChangeEvent
Official Sources Used
- Flow Builder Guide — https://help.salesforce.com/s/articleView?id=sf.flow.htm
- Flow Best Practices — https://help.salesforce.com/s/articleView?id=sf.flow_best_practices.htm
- Reactive Screens — https://help.salesforce.com/s/articleView?id=sf.flow_ref_elements_screen_reactive.htm
- Flow HTTP Callout Action — https://help.salesforce.com/s/articleView?id=sf.flow_concepts_callout.htm