Salesforce Trails: Screen Flows

- Input Components
Input components are pre-built components that we can drag onto our canvas of Screen elements to allow data entry functions:

Here are some samples of the most common ones used:

You can also include an image (stored as a static resource), a file upload, lookups:

Include a password field, picklists, radio buttons, toggles etc:

Parameters
Each of these lookup components has it's own set of parameters that we must configure.
For example, the lookup parameter may be configured as follows:

Exercise: Build a Screen Flow 1

Using Input Components

Create a new Screen Flow.

Add a Screen element.

Drag the following components to the canvas:

Name
Email
Phone
Text
Picklist
Number
Radio Buttons
Checkbox

Configure as follows:

Name

Just add an API Name and leave the rest as defaults.

Email

Just add an API Name and leave the rest as defaults.

Phone

Just add an API Name and leave the rest as defaults.

Text

Just add an API Name and leave the rest as defaults.

Picklist

For the picklist you need to create a choice set that comes from the contact picklist for Salutation.

Clicking in the Choice input field allows you to create a new resource - a Picklist Choice Set.

Number

For the number you will set a default value and a precision of 2 decimal places:

Radio Buttons

To add the radio buttons, you first need to create two new choice resources. One for True and one for False.

Note they are of type: Boolean

Now you can finish the Radio Buttons config with the two new choice values.

Checkbox

The checkbox is just a very simple component:

Final Layout

The final page layout looks like this:

Add a label to the screen:

Save the Flow

Run/Debug the Flow

Click debug to run the flow.

About Display Components

Display Text

There is a lot you can do with Display Text to put headings and instructions for your users in your flow as well as displaying values from records you have retrieved or values that you have assigned to variables:

Multi-Column Support

Just released in beta in the Spring '21 Salesforce release is the new Section feature that supports multiple columns:

With this feature you can create up to four (4) columns and then place components inside them:

Four-column display:

Advanced Features

Some flow components (not all) provide advanced features.

The standard address field is a special type of "Compound Field" that is a combination of street address, city, postal code, state/province and country.

By using the Manually assign variables option, you can provide options for each sub-field and store input values in separate fields:

Revisited Screen Values helps to retain the values that a user may have entered when navigating back and forward between screens.

Exercise: Build a Screen Flow 2

Display Components

At the time of writing this (Feb 2021), there are only two Display Components:

Display Text
Section (provides Multiple Columns, beta in Spring '21)

We can also apply Component Visibility to only show a component when a condition is met.

Display Text

Create a new Screen Flow.

Drag the Display Text component to the canvas.

Give your Display Text component an API Name.

Copy/paste the following text into the resource box on the right.

This is the Display Text Component

You can include multiple fonts

Change the text size

Change the text color

Add bold, italic or underline features

Create a bulleted list:

Item 1

Item 2

Item 3

Create a numbered list:

First item

Second item

Third item

Indent text

Center text

Right align text

Add a URL Link:

Add an image:

Apply your own attributes to the text, maybe you want to do something like this (below):

Don't forget to give your Screen a Label and API Name so you can save it.

Save your flow:

Run your flow:

Section (beta in Spring '21)

The section component allows you to divide your screen display into multiple columns.

It is only available in beta mode (not suitable for production use yet).

The configuration allows you to select the width of the columns and also set component visibility.

Here is the flow running in Desktop mode:

Here is the same flow on a mobile device (the columns are stacked one on top of another):

Go back to your flow and add a Section.

Divide the section into several columns and drag some components into the new sections.

Save and run your flow to see the changes:

Component Visibility

Component Visibility is a powerful feature that allows you to only display a component when a certain condition is met.

You may only want to display a component when the Opportunity stage is equal to Prospecting or when a lead has a rating of Hot.

Go back to your flow and add one more Display Text component (1).

Add some text to display (2).

Add the conditions when this component will display (3).

Name your component and save and run your flow:

Try changing the date value in your condition so the message does not display.

Great work

Custom Components

In a brand new org, you will probably not find any custom components. Kind of makes sense because they are custom!

If you click on the link highlighted below it will take you to the AppExchange where you can find lots of Custom Components and many are 100% FREE!

Scroll down the page to find some of these:

The AppExchange is not the only place you can find new components.

There are some excellent Flow resources here too:

https://unofficialsf.com/flow-screen-components/

Exercise: Build a Screen Flow 3

Custom Flow Components are available from:

The Salesforce AppExchange
UnofficialSF.com
Your own developers

In this exercise, you will install a component from the AppExchange and one from UnofficialSF.com.

The AppExchange

When you visit the AppExchange from this link below, the first part of the display is complete flows, not components that we can add to our flows.

The components we want are further down the page.

Link: https://appexchange.salesforce.com/appxstore?type=Flow

Select the Flow Video Player and File Viewer by Salesforce Labs:

Note: Many of the components on the AppExchange are old now and have been replaced by new functions in the Flow product itself.

Select and install this component.

Remember when installing to your Developer Org, you need to select "Install to Production" - not to a sandbox.

We will come back to this after we install the next component.

UnofficialSF.org

Many of the flow components here are built by Salesforce staff (and other experts) but have not passed the official security checks, so take care how you use them.

Click this link to go directly to the Screen components part of the website:

https://unofficialsf.com/flow-screen-components/

The component you want for this exercise is the Advanced Navigation Button from the awesome team at Gravity Lab in New Zealand!

Dan Howell and GravityLab have made available an advanced Flow Navigation Button with no fewer than 12 built-in features, including:

Add bespoke navigation options in a flow. For example, replace the “Next” button with a “Save and View” button.
Launch new record or edit page. For example, launch the create new account page with a specific record type.
Auto launch a quick action. For example, automatically launch the new opportunity quick action when an account with the type “prospect” is created.
Navigate to another page. For example, auto navigate to another record page when a certain status is reached.

From this page, click the Documentation and Installation link: