Add Screens to Your Flow

Learning Objectives

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

  • List the types of components you can add to screens.
  • Add a confirmation screen to a flow.

Introducing Screen Components

Just as you configure the user experience of your record pages in Lightning App Builder, you use screens to do the same for your flow users.

Each screen is made up of one or more screen components. A screen component is a configurable, reusable element added to a screen.

Screen components are available in three categories.

  • Input includes standard components that request information from the user.
  • Display includes standard components that display information to the user.
  • Custom includes components that you or someone else have created. Install them from AppExchange or a third-party library, or work with a developer to build your own.

Choices in Screen Components

Most standard input components request a value like a number or a paragraph of text. For Radio Buttons, Picklist, Checkbox Group, and Multi-Select Picklist components, the user instead chooses from a set of options. To identify the available options, select at least one choice or choice set resource.

  • A record choice set generates multiple options by using a filtered list of records.
  • A picklist choice set generates multiple options by using the values of a picklist or multi-select picklist field.
  • A choice represents a single option with the label and value set manually.
Tip

Tip

We recommend using a choice resource only when you can’t use either of the other two. Record choice sets and picklist choice sets are easier to configure and don’t require as much maintenance.

The Runtime Experiences

There’s one more important consideration for screen components: which flow runtime experience they’re supported in.

Flows have two different runtime experiences: Lightning runtime and Classic runtime. Like its name suggests, Lightning runtime looks and feels like Lightning Experience, while Classic runtime looks and feels like Visualforce.

The same flow screen in Classic runtime compared to Lightning runtime

That said, the two runtime experiences aren’t tied to either desktop experience. You can use Lightning runtime in Salesforce Classic, and you can use Classic runtime in Lightning Experience.

Note

Note

We’re no longer enhancing Classic runtime, so if you want to take advantage of enhancements to how flow screens work, use Lightning runtime.

All screen components are supported in Lightning runtime, but not all screen components are supported in Classic runtime. Here are three indicators that a component requires Lightning runtime.

  • The component icon is a lightning bolt.
  • No preview is available for the component.The Toggle component on the screen canvas, which indicates that no preview is available for this component
  • A warning that a screen component requires Lightning runtime appears when the flow is saved.Warning screen indicating that some screen components require Lightning runtime to work properly.

The Screen Element

Let’s break down the Screen element.

The New Screen element

Screen Components Pane (1) The left-side pane displays all the screen components available in your org. Click and drag a component to add it to the screen.
Tip

Tip

Use the search field to easily find the screen component you need.

Screen Canvas (2) The canvas is where you build your screen. Drag components to arrange them in the right order. Properties Pane (3) Depending on the canvas selection, the properties pane shows either the screen’s properties or the properties of the selected component. To view or modify the screen properties, click the header or footer in the canvas.

The screen properties include whether to display the header, footer, or particular navigation options.

What You Did in the Project

Let’s look at the screen you built in the Build a Simple Flow project.

In the New Contact flow, open the screen.
  1. From Setup, enter Flows in the Quick Find box, and select Flows.
  2. Open the New Contact flow.
  3. From the canvas, double-click Contact Info.

The screen contains three components that request information about the contact: the name, the associated account, and a toggle that determines what to do when a contact with that name already exists.

The “Contact Info” screen in the “New Contact” flow

Name Component

First, let’s look at the Name component.

The settings for the Name component.

  • The component isn’t disabled, nor is it read-only.
  • The component displays fields for only First Name and Last Name. (The Name component can also display other name fields like Middle Name.) If your project’s Name component displayed a field for Salutation, the options would be Mr., Mrs., and Ms.
  • The label for the component is Name.

You need to be able to reference the user-entered values for First Name and Last Name in other parts of the flow. With the Name component, the only way to reference the entered values is by storing the values in variables. Enter the Store Output Values section.

The First Name and Last Name values are stored in fields on the {!contact} record variable.

In the Store Output Values section, the user-entered values for First Name and Last Name are stored in fields on the {!contact} variable

Account Component

Next, let’s look at Account, which is a Picklist component.

The settings for the Picklist component.

  • The component label is Account (1).
  • The component supports only Text choices and choice sets (2).
  • The choices are generated using the “accounts” record choice set (3).

You don’t have to manually store the value of the selected choice in a variable. Instead, you can reference the screen component by its API name (Account). When the user selects an account, the screen component is set to the selected choice’s value. Based on how we configured the record choice set, the choice value is the selected account’s ID.

Toggle Component

Last up, the Toggle component.

The settings for the Toggle component.

  • The text displayed next to the toggle is, “If this contact already exists, update the existing record.”
  • When the toggle is activated, its label is Update existing.
  • Otherwise, the toggle label is Create other contact.

Update the Flow

Let’s take a quick look at the business requirements from the Flow Basics module.

Requirement Element Type to Use
Collect information from user: first name, last name, and account for contact, as well as what to do if a matching contact exists. Screen
Find a matching contact record. Action
Check if a matching record was found. Logic
If no match exists, create the contact. Action
If a match exists, update that contact. Action
For both branches, confirm what the flow did in Chatter. Action
For both branches, confirm that the flow is done. Screen

The flow already has a screen to collect information from the user, so we can consider the first requirement as met. But there’s one screen missing: one that confirms that the flow is done.

Let’s add that confirmation screen.

Add a Confirmation Screen

  1. If you haven't already, open the "New Contact" flow that you created in the Build a Simple Flow project.
  2. Drag a Screen element onto the canvas.
  3. Give the screen a label (Confirm).
  4. Scroll or tab to the Control Navigation section, expand it, then deselect Previous. Leave the other screen properties as is.
  5. Add a Display Text component to the screen. From the screen components pane, search for Text and drag Display Text onto the canvas.
  6. Give the Display Text component an API name: confirmation_message. Now let’s craft a message that thanks the user and confirms what the flow did. This flow has multiple branches. It either creates a new contact or updates an existing one. Ideally the confirmation messages is either, “Thanks! The contact was created.” or “Thanks! The contact was updated.” To provide custom confirmation messages, you can:
    • Create one static confirmation message that works for all possibilities. For example, Thanks! The contact was created or updated. This option is easy, although the user will immediately wonder, Well… which one?
    • Create a dynamic confirmation message that changes depending on the outcome of the flow.
    • Create a separate confirmation screen for each possibility. (To keep our flow lean, let’s leave this as the last resort.)
    Because only one word changes between the two messages, all it takes to make a dynamic message work is a simple formula.
  7. In the text box, enter Thanks! The contact was XYZ. (Don’t worry, XYZ is a placeholder for the formula.)

Now, let’s figure out what the formula should be.

Dynamic Confirmation Message with a Formula

We start with the IF function: IF(logical_test, value_if_true, value_if_false)

For the logical_test, check whether the flow created the contact or updated it. To do so, reference the Create Records element. The {!Create_Contact} merge field resolves to true if the flow executed the Create Contact element. Otherwise (if the flow updated the contact instead), the merge field doesn’t resolve to true.

If the logical test is true, the flow created the contact. If the logical test is false, the flow updated the contact. So value_if_true is “created” and value_if_false is “updated.”

Here’s the final formula expression. IF({!Create_Contact}, "created", "updated")

OK, let’s return to the Display Text component and put this expression to work.

  1. In the Display Text component, click into the search box above the text box and then click New Resource. The New Resource button highlighted in the dropdown options from the search box.
  2. Configure the formula with these values, then click Done.
    Field Value
    Resource Type Formula
    API Name created_or_updated
    Data Type Text
    Formula IF({!Create_Contact}, "created", "updated")
    The “created_or_updated” formula.
  3. In the Display Text component, replace XYZ with a reference to your formula. To insert the formula, click into the search box again, enter created, and select the formula you created.
  4. Let’s add a link to the created or updated contact. No formulas required! You create a relative link using the ID of the contact record stored in the {!contact} record variable.
    1. In the confirmation message, select The contact, then click the Link.
    2. Delete the existing text using your keyboard’s delete or backspace key, then enter /{!contact.Id} .
    3. Click Save.
  5. On the Screen element, click Done. The “New Contact” flow, with the new “Confirm” screen element highlighted.
  6. Save the flow and ignore the warnings. You connect the screen later.

Now the flow has two screens that interact with the user. The first one, which you built in the Build a Simple Flow project, requests information from them. The second one, which you built in this unit, confirms what the flow did with that information. Next up, let’s dig in to the basic logic elements in Flow Builder.

Resources

Keep learning for
free!
Sign up for an account to continue.
Sign Up Login
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities
Skip for now