Creating Custom Footer for Screen Flows in Salesforce

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:

Name	Type	Description
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.

Component

JS Controller

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.

nikunj.vedia@hansen.co.uk

About Hansen

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.