Build a Custom Navigation Model for Your Flow Screens

Since Aura components have access to a flow screen’s navigation actions, you can fully customize how the user moves between screens. For example, hide the default navigation buttons and have the flow move to the next screen when the user selects a choice. The c:choiceNavigation component displays a script and a choice in the form of buttons.

A flow screen that has no navigation buttons. Instead, the body of the screen has Yes and No buttons.

The design resource includes the scriptText attribute, so you can set the script from the flow.

When the user clicks either of the buttons, the JavaScript controller calls navigateFlow(“NEXT”), which is the equivalent of the user clicking Next.

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

See Also