Skip to main content

Improve the Look and Feel of Your Screens

Learning Objectives

After completing this unit, you’ll be able to:

  • Define a flow screen’s footer buttons.
  • Divide a flow screen into multiple sections and columns.
  • Configure a screen component to show only in certain conditions.
  • Configure a screen component to accept only valid input.
Note

This badge is one stop along the way to Flow Builder proficiency. From start to finish, the Build Flows with Flow Builder trail guides you through learning all about Flow Builder. Follow this recommended sequence of badges to build strong process automation skills and become a Flow Builder expert.

In this module, you built a flow that asks support agents a lot of questions and then creates a case. It’s good, but we can improve it. We can make it better, stronger, faster… Or, at the very least, we can make it tidier, easier to use, and mindful of your data requirements. Let’s unlock your screens’ full flowtential!

Pyroclastic’s support agents are having some trouble when they run the Create Case for Contact flow. When they click Finish on the last screen, the flow unexpectedly restarts from the beginning, and they don’t know what to do. Sometimes they generate two new cases instead of one. After some troubleshooting and investigation, Flo discovers that the problem occurs when an agent clicks the Previous button on the final screen. Take a look at the flow again.

A section of the flow showing Questions Page 2, followed by Create Case, and then File Upload Screen.

If a user clicks the Previous button, they return to the previous screen: Questions Page 2. When the user clicks Next to proceed, the flow runs the Create Case element a second time (which we don’t want)!

It’s best practice to make your flows as transparent and foolproof as possible. Remove unneeded buttons and give each button a label that describes what happens when a user clicks the button. 

Let’s customize the buttons on the Questions Page 2 and File Upload screens, and hide that potentially hazardous Previous button on the File Upload screen.

  1. Open the Create Case for Contact flow.
  2. In the Questions Page 2 element, make sure no components are selected in the screen canvas.
  3. In the Screen Properties sidebar, click Configure Footer.
  4. For Next or Finish Button, select Use a custom label.
  5. For Next or Finish Button Label, enter Create Case.
  6. Click Done.
  7. In the File Upload Screen element, make sure no components are selected in the screen canvas.
  8. In the Screen Properties sidebar, click Configure Footer.
  9. For Next or Finish Button, select Use a custom label.
  10. For Next or Finish Button Label, enter Restart.
  11. For Previous Button, select Hide Previous.
  12. Click Done and save the flow.

Now when the flow runs the Questions Page 2 screen, the Next button tells the user exactly what happens when they click it: the flow creates a case.

The button on the Questions Page 2 screen labeled Create Case.

When the flow runs the File Upload screen, the Finish button has the clearer label Restart, and the Previous button is hidden.

The button on the File Upload screen labeled Restart. There is no button labeled Previous.

Note

The Configure Footer section has settings for the Pause button too, but it doesn’t appear unless it’s enabled in org-wide settings. Pause lets users freeze their progress in a flow, saving the flow to resume later. For more information, check out Prepare Your Org for Paused Flow Interviews in Salesforce Help.

Organize Components into Rows and Columns

Flo embedded the Create Case for Contact flow in the wider column of a contact Lightning page. Now the flow screen has a lot of unused white space. Plus, the second screen has quite a few questions, which take up a lot of vertical space. How can we use the screen space more efficiently?

The Section component splits a flow screen into multiple columns, allowing you to position components side by side and make use of that horizontal white space. In the Section component, you define the number of columns and the relative width of each column.

Add Section components to your screens to use that extra space.

Update the Questions Screen

  1. Open the Questions element.
  2. Drag Section from the Components sidebar to the top of the screen canvas.
  3. In the Section sidebar, click +Add Column.
    The screen canvas with the Section component divided into two columns.
  4. Drag the SayThisText Display Text component to the first Empty column.
    Green highlighting shows which section is active as you move over the canvas. Drop the component into the first column when it’s highlighted.
    A Section column turned green as a component is dragged into the column.
  5. Drag the Problem Description Long Text Area component to the first column, below SayThisText.
  6. Drag the Case Subject Text component to the second column.
  7. Drag the CloseCase Toggle component to the second column, below ScreenSubject.
    Your screen canvas should look like this.
    The Questions element with its components arranged into columns corresponding to the preceding steps.
  8. Click Done.

Update the Questions Page 2 Screen

  1. Open the Questions Page 2 element.
  2. Drag Section from the Components sidebar to the top of the screen canvas.
  3. In the Section sidebar, click +Add Column.
  4. Set Column 1 Width to 9 of 12.
  5. Drag the Point of Contact Data Table component to the first column.
  6. Drag the What priority would the customer assign to this case Radio Buttons component to the second column.
  7. Drag another Section from the Components sidebar to the screen canvas, below the first Section component.
  8. In the Section sidebar, click +Add Column twice.
    The second section has three columns now.
  9. Change the column widths to:
    • Column 1 Width: 3 of 12
    • Column 2 Width: 3 of 12
    • Column 3 Width: 6 of 12 (Half Width)
  1. Drag the QA Reviewer Lookup component to the second section’s first column.
  2. Drag the Case Reason Record Field component to the second section’s second column.
  3. Drag the In which timeslots can we call the customer for follow-up if needed Checkbox Group component to the second section’s third column.
    Your screen canvas should look like this.
    The Questions Page 2 element with its components arranged into columns corresponding to the preceding steps.
  4. Click Done and save the flow.

To see your newly arranged screens in action, save the flow and click Run. This screen is so aesthetically pleasing, you should call yourself Michelangeflow!

The Questions Page 2 screen when the Create Case for Contact flow runs.

Control When Components Appear

Like Lightning page components, flow screen components support conditional visibility. When you add conditional visibility to a component, the flow displays the component only when the conditions you specify are present. These conditions can reference anything in the flow, including other components on the same screen.

Pyroclastic’s support agents don’t need to see follow-up time slots unless they select a Reason that’s likely to require follow-up. So let’s simplify the flow with a little conditional visibility.

  1. Open the Questions Page 2 element and select the CallbackTimes checkbox group component.
  2. Click Set Component Visibility.
  3. For When to Display Component, select All Conditions Are Met (AND).
  4. For Resource, select caseVar > Reason.
  5. For Operator, select Equals.
  6. For Value, enter Equipment Complexity,Performance,Breakdown,Equipment Design,Other.
    These values are all of the options for this picklist except Installation and Feedback. When you enter all the desired options separated by commas, Salesforce treats each value as a valid option. Alternatively, you can set When to Display Component to Any Condition is Met (OR) and add each viable option as a separate condition.
    The New Condition pop-up in the sidebar’s Set Component Visibility section, with settings corresponding to the preceding steps.
  7. Click Done in the popup.
  8. Click Done to close the screen element.
  9. Save the flow.

Now, when the Case Reason is set to a value other than Installation or Feedback, the CallbackTimes component appears. Change the Case Reason to Installation or Feedback, and the question disappears. Click the Run button, make your way to the second screen, and try it for yourself!

Example 1: When case reason is none, time slots are not shown. Example 2: When case reason is breakdown, time slots are shown.

Improve Data Quality in Components

Pyroclastic’s support managers have one last request for the Create Case for Contact flow. Some case descriptions are too brief and don’t have enough information about the call. Flo asks you to implement a minimum character requirement on the description field.

Fortunately, you can add validation to screen components. It’s like adding a validation rule to each component. However, there’s one major difference.

  • A validation rule fires when its formula returns TRUE.
  • A screen component validation fires when its formula returns FALSE.

Let’s add a 20-character minimum to the Problem Description component.

  1. Open the Questions element and select the Problem Description component.
  2. In the properties pane, click Validate Input.
  3. For Error Message, enter Please add more detail.
  4. For Formula, enter LEN({!ScreenDescription}) >= 20
    The sidebar’s Validate Input section, with settings corresponding to the preceding steps.
  5. Click Done and save the flow.

Now when a user enters a description with fewer than 20 characters, the flow displays the error message and prevents the user from proceeding until they add more text. Sure, it won’t ensure that they add relevant details, but it’s gentle encouragement that’s hard to ignore.

When the Problem Description is “It’s not working” (only 16 characters), ‘Please add more detail’ is displayed.

In this badge, you learned how to create a screen flow. Next, check out the Screen Flow Distribution badge to learn how to embed screen flows where your users need them.

Resources

Share your Trailhead feedback over on Salesforce Help.

We'd love to hear about your experience with Trailhead - you can now access the new feedback form anytime from the Salesforce Help site.

Learn More Continue to Share Feedback