In this blog, I am going to explain how to use the custom lightning component button that is used to control the navigation of flow.By default, users navigate a flow by clicking standard buttons at the bottom of each screen. The lightning:availableForFlowScreens interface provides two attributes to help you fully customize your screen’s navigation. To figure out which navigation actions are available for the screen, loop through the availableActions attribute. To programmatically trigger one of those actions, call the navigateFlow action from your JavaScript controller.
Flow Navigation Actions
The availableActions attribute lists the valid navigation actions for that screen NEXT, BACK, PAUSE, RESUME, FINISH are the possible actions. A screen’s available actions are determined by:
- Where in the flow the screen is. For example, Previous isn’t supported on the first screen in a flow, Finish is supported for only the last screen in a flow, and you can never have both Next and Finish.
- Whether the flow creator opted to hide any of the actions in the screen’s Navigation Actions controls. For example, if Allow Pause is de-selected, the Pause action isn’t included in availableActions.
Component
Here is the lightning component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<aura:component implements="lightning:availableForFlowScreens" access="global" > <!-- Get the script text from the flow --> <aura:attribute name="scriptText" type="String" required="true" /> <!-- Pass the value of the selected option back to the flow --> <aura:attribute name="value" type="String" /> <aura:attribute name="action" type="String" /> <div class="script-container"> Navigation Action : {!v.value} </div> <!-- Buttons for the agent to click, according to the customer’s response --> <div class="slds-p-top_large slds-p-bottom_large"> <p><lightning:formattedText value="Customer Response" class="slds-text-body_small" /></p> <lightning:buttongroup > <lightning:button label="Previous" aura:id="previousId" variant="neutral" onclick="{!c.handleChange}"/> <lightning:button label="Next" aura:id="nextId" variant="neutral" onclick="{!c.handleChange}"/> <lightning:button label="Finish" aura:id="finishId" variant="neutral" onclick="{!c.handleChange}"/> </lightning:buttongroup> </div> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
({ handleChange : function(component, event, helper) { // When an option is selected, navigate to the next screen var response = event.getSource().getLocalId(); component.set("v.value", response); var navigate = component.get("v.navigateFlow"); console.log('navigate'+navigate) if(response=='previousId'){ navigate("BACK"); } if(response=='nextId'){ navigate("NEXT"); } if(response=='finishId'){ navigate("FINISH"); } } }) |
|
1 2 3 4 5 6 7 |
<design:component> <design:attribute name="scriptText" label="Script Text" description="What the agent should say to the customer" /> <design:attribute name="action" label="Navigation Action" description="" /> </design:component> |
Flow
Here the simple flow that I created for testing
You can see below the image that shows how the lightning component interacts with flow navigation.
Once you click the next button on the component it will take to the next action i.e Finish.
