Getting Started with Salesforce Flow – Part 58 (Customize Previous, Next, Finish, and Pause Button Label for Screen Flow!)

Getting Started with Salesforce Flow – Part 58 (Customize Previous, Next, Finish, and Pause Button Label for Screen Flow!)

Last Updated on March 15, 2021 by Rakesh Gupta

Big Idea or Enduring Question:

What if you could customize the Previous, Next, Finish, and Pause button label for Screen Flow? Ya, why endure mundane when we can jazz things up!! Let us do it!

A Screen Element allows you to take users’ input and process it – yes, one can write custom logic to process user-entered data. However, as opposed to Record-Triggered Flow or Scheduled-Triggered Flow – which doesn’t have the capability to take user input and process it – Salesforce Screen Flow can take user-entered data and process it further! So, let us harness the power of Salesforce Screen Flows – every drop, one at a time!

Like everything else in life, Salesforce’s Screen Flow’s power comes with some limitations –  like, it doesn’t provide the ability to customize the Previous, Next, Finish and Pause buttons.

Held back by limits? Us? No, way! So, in this article, I will show you how you can create a Lightning component that will allow you to customize the button labels.

Objectives:

After reading this article, you will be able to:

  • Make your custom aura components available to Screen Flows
  • Clone an existing Flow
  • Reference aura component in a Screen Flow 
  • Customize labels of Previous, Next, Finish, and Pause buttons

Business Use Case

Brenda David, an awesome System administrator at Gurukul on Cloud (GoC), created a flow that allows users – with the role of Direct Sales Director – to add or remove followers from a record. Then, Brenda received the following requirements: 

  • Change the Next button label to Done
  • Change the Pause button label to Save and Continue Later.

Automation Champion Approach (I-do):

To solve the above business use case, we will modify the Screen Flow Created for this article

Before discussing the solution, let me show you a diagram of a Process Flow at a high level. Please spend a few minutes to go through the following Flow diagram and understand it.

Let’s begin building this automation process.

Pre-requisites:

Please go through these articles first:

  1. Getting Started with Salesforce Flow – Part 55 (Add or Remove Followers to a Record with the Help of Salesforce Flow)
  2. Create and Edit Aura Components (Source Trailhead)

Guided Practice (We-do):

There are 2 steps to solve Brenda’s business requirement using Screen Flow. We must:

  1. Create a custom Aura Component to replace the screen footer 
  2. Salesforce Flow Steps: Clone an existing Flow
    1. Update the Screen component properties to hide the Footer
    2. Add a custom aura component to a Screen
    3. Configure aura component attributes to set the values for the buttons

Step 1: Create a Custom Aura Component to Replace the Screen Footer

I have taken the initial code from Salesforce documentation and modified it. In the modification process, I repositioned the buttons, added extra style components, and made each and every button label customizable. These customizations make the aura component generic so that you can use it in any Flow without modifying the code each time. 

Follow the steps below to create the lightning component in your org. 

  1. Log-in into your developer org.
  2. Click on Setup (Gear icon) | Developer Console. 
  3. To Create a new lightning component, click on File | New Lightning Component, and configure it – as shown in the following screenshot:
  4. Now copy and paste the following code – feel free to change it based on your business requirement.
Component Markup                                          
<aura:component access="global" implements="lightning:availableForFlowScreens">

<!-- Determine which actions are available -->
<aura:attribute name="nextLabel" type="String"/>
<aura:attribute name="pauseLabel" type="String"/>
<aura:attribute name="backLabel" type="String"/>
<aura:attribute name="finishLabel" type="String"/>
<aura:attribute name="canPause" type="Boolean" />
<aura:attribute name="canBack" type="Boolean" />
<aura:attribute name="canNext" type="Boolean" />
<aura:attribute name="canFinish" type="Boolean" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />

<br/>
<div aura:id="actionButtonBar" class="actionButtonBar1 slds-modal__footer">
<!-- If Previous is available, display to the left -->
<div class="slds-float_left">
<aura:if isTrue="{!v.canPause}">
<lightning:button aura:id="PAUSE" label="{!v.pauseLabel}"
variant="neutral" onclick="{!c.onButtonPressed}" />
</aura:if>
</div>
<div>
<!-- If Pause, Next, or Finish are available, display to the right --> 
<aura:if isTrue="{!v.canBack}">
<lightning:button aura:id="BACK" label="{!v.backLabel}"
variant="neutral" onclick="{!c.onButtonPressed}" />
</aura:if>
<aura:if isTrue="{!v.canNext}">
<lightning:button aura:id="NEXT" label="{!v.nextLabel}" 
variant="brand" onclick="{!c.onButtonPressed}" />
</aura:if>
<aura:if isTrue="{!v.canFinish}">
<lightning:button aura:id="FINISH" label="{!v.finishLabel}"
variant="brand" onclick="{!c.onButtonPressed}" />
</aura:if>
</div>
</div>

</aura:component>
Client-side Controller                            

({
   init : function(cmp, event, helper) {
      // Figure out which buttons to display
var availableActions = cmp.get('v.availableActions');
      for (var i = 0; i < availableActions.length; i++) {
         if (availableActions[i] == "PAUSE") {
            cmp.set("v.canPause", true);
         } else if (availableActions[i] == "BACK") {
            cmp.set("v.canBack", true);
         } else if (availableActions[i] == "NEXT") {
            cmp.set("v.canNext", true);
         } else if (availableActions[i] == "FINISH") {
            cmp.set("v.canFinish", true);
         }
      }
   },
    
   onButtonPressed: function(cmp, event, helper) {
      // Figure out which action was called
      var actionClicked = event.getSource().getLocalId();
      // Fire that action
      var navigate = cmp.get('v.navigateFlow');
      navigate(actionClicked);
   }
})
Design Resource

<design:component >
<design:attribute name="nextLabel" label="Lable for Next Button"/>
    <design:attribute name="pauseLabel" label="Lable for Pause Button"/>
    <design:attribute name="backLabel" label="Lable for Previous(Back) Button"/>
    <design:attribute name="finishLabel" label="Lable for Finish Button"/>
</design:component>

Things to understand before proceeding to the next step: 

    1. lightning:availableForScreenFlow: Implement lightning:availableForScreenFlow interface to make sure that lightning component is available as a component in Screen. 
    2. You can get the code from my GitHub repo. 

Step 2: Salesforce Flow – Clone an Existing Flow

  1. Click Setup.
  2. In the Quick Find box, type Flows.
  3. Select Flows.
  4. Click on the Flow Name that will be modified. In this case, Add or Remove Record Followers.
  5. Click on the Save As button at the top right of the Flow Builder page.
  6. In the pop-up window select A New Version and enter the Flow Label. It is recommended to update the description with a note about what changed. The API Name is not updateable. 
  7. For API Version for Running the Flow always select the latest version, in this scenario, 51.0
  8. Click Save.

Step 2.1: Salesforce Flow – Update the Screen Component Properties to Hide the Footer

  1. Double click on the Screen ComponentAdd/Remove Followers
  2. It will open the screen detail page.
  3. Under the Screen Properties, expand the Configure Frame section. 
  4. Deselect Show Footer option.
  5. Click Done.

Step 2.2: Salesforce Flow – Add a Custom Aura Component to a Screen

  1. Then, under the Custom section on Screen Element, drag and drop the flowFoorer component onto the screen. 
  2. Input the following information:
    1. Enter a name in the API Name field.
  3. Click Done.

Step 2.3: Salesforce Flow – Configure Aura Component Attributes to Set the Values for Buttons

Now we will use values from the Flow (even you can enter values manually) to set the Screen component’s attributes.

  1. Under flowFooter Component set the values for each attribute (buttons) manually. 
  2. Input the following information:
    1. Lable for Next Button: Done
    2. Lable for Pause Button: Save and Continue Later
  3. Click Done.

Once everything looks good, perform the steps below: 

  1. Click Save.
  2. Click the Activate button. 

Proof of Concept

From now onwards, when users with the role of Direct SalesDirector open the same Flow they will see the customized button labels, as shown below!

What a wonderful learning journey this was!!! With little creativity, we can push many boundaries! Happy journey!

Formative Assessment:

I want to hear from you!  

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? 

Let me know by Tweeting me at @automationchamp, or find me on LinkedIn.

Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

One thought on “Getting Started with Salesforce Flow – Part 58 (Customize Previous, Next, Finish, and Pause Button Label for Screen Flow!)

  1. Hey Rakesh!

    Great article, thank you.

    Just trying to wrap my head around you using an Aura Component rather than a Lightning Web Component?

    Keith

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.