With Lightning Flows, Salesforce has launched a powerful feature for advanced administration. Using this feature, Salesforce admins can achieve the desired Flows without developer input.
There are two types of Flows in Salesforce
- Auto Launched Flow: To perform different operations / No User Intervention
- Screen Flow: To create multi-screen data input / Involves User Intervention
In this blog, we are going to focus on a specific feature of Screen Flow, involving customizing the standard footer and create a Custom Footer.
The Footer is an area which drives Flow navigation. It includes various buttons such as Previous, Next, Pause and Finish. By default, the Flow Footer displays the available actions as standard buttons. Next and Finish use the brand variant style, and Previous and Pause use the neutral variant. Also, Pause floats left, while the rest of the buttons float right.
Scenarios that require the Standard Footer to be replaced with the Custom Footer:
- Having a custom lightning component in screen; perform validation on-click of a Footer button
- Redirecting User to a URL when the Finish button is clicked on the Footer
- Renaming Standard Footer button
In order to make Lightning components available in the Flow Screen, we need to implement the lightning:availableForFlowScreens Interface. The Lightening component inherits the following attributes:
|availableActions||string||The navigation actions available for this screen.|
Valid actions are NEXT, PREVIOUS, FINISH, and PAUSE.
|navigateFlow||Action||References the appropriate navigation action to move away from this screen.|
|screenHelpText||String||Help text for this screen.|
|validate||Action||Custom validation is invoked when the flow navigates to the next screen.|
[Pass a function into this attribute that evaluates the component and returns values for isValid and errorMessage.]
We can use availableActions to determine which buttons get displayed by setting the component’s local attributes:
To begin with, we need to remove the Standard Footer from the Lightning Flow. In order to do that:
- Open the Flow you want to update in a Flow Builder
- Go to the screen for which you want to hide the Standard Footer.
- Uncheck the “Show Footer” Checkbox.
Now let’s have a quick look at how we can create a Custom Footer and tag it as a lightning component.
Tips and tricks for creating a Custom Footer Lighting component
- Create design attributes and pass those values from the Flow. For example, you can create multiple CSS Classes in the component CSS file and set CSS Class parameter for each button from the Flow.
- You can check, which action was clicked by using the event.getSource().getLocalId() and the Trigger Application event which can be handled by any component residing in a screen performing different activities.
- You can redirect to any URL once the button is clicked which is not possible in standard (out of the box) action buttons.
- Using a similar approach, Flow Headers can also be overwritten to fulfil any business requirements.
- If you need to place the navigation controls in a specific location on the screen, you can do so by simply placing this custom component in the desired location.
Author : Nikunj Vedia
Nikunj Vedia is one of Hansen’s techno-functional Salesforce Quote to Cash experts. He has had a variety of roles including Developer, Technical Lead and Technical Architect successfully delivering multiple full project lifecycle CPQ, Billing and CLM implementations into organisations across multiple verticals.
Hansen is a specialist consultancy helping you maximise Lead-to-Cash ROI. Our expertise is focused on unlocking value from your investments in CPQ, Billing and Unified Commerce on the Salesforce ecosystem.