Let's build a simple screen flow so that we can gather contact and account data from the user's interactions by using the Cloud Flow Designer (this is the new version of the old Flow Builder app and was introduced in Spring 2019). This is shown in the following screenshot:

Grab the Screen element and drop it onto the flow canvas. The specific element's modal will appear, as shown in the following screenshot:

Add a label and a unique API name for the modal (this is automatically filled in for you when you leave the focus of the label input).

We'll be creating a form here, so let's start by adding the Name, Email, Phone, and Address input components, as shown in the following screenshot:

For each component, provide a valid API name. In this example, we have used the contact_component_type format; for example, contact_name or contact_phone. In flows, all the input components are considered variables or resources. For example, you can use the contact_component_type variable to fill in another component.

Click the Done button to return to the canvas.

Next, we need to define that we are going to put our values into a Contact object, so we need a resource that will host the values that are grabbed from the screen element.

On the Flow Designer's Toolbox, click on the Manager tab to show the list of resources and elements that have already been defined on the current flow (you will see the components that we just added):

Now, click on the New Resource button; the New Resource modal will appear:

On this modal, select the following values to configure a new flow variable of the Contact type:

• Resource Type: Variable
• API Name: Contact
• Description: Customer's contact details
• Data Type: Record
• Object: Contact

To link form components to the contact variable, double-click on the screen element. Then, for each component, click on the corresponding attribute to tell the screen element where each value should be grabbed from:

For this example, we'll be configuring the following attributes:

• Name component:
  • First Name: {!contact.FirstName}
  • Last Name: {!contact.LastName}
• Email component:
  • Value: {!contact.Email}
  • Required: {!$GlobalConstant.True}
• Phone component:
  • Value: {!contact.Phone}
• Address component:
  • City Value: {!contact.MailingCity}
  • Country Value: {!contact.MailingCountry}
  • Postal Code Value: {!contact.MailingPostalCode}
  • State/Province Value: {!contact.MailingState}
  • Street Value: {!contact.MailingStreet}

Repeat this configuration for the Store Output Values attributes section of each component's value to tell the flow engine where the data should be stored:

Why do we have this double configuration?

The first configuration is used to get the component's data from an already defined variable, while the second configuration sets up where the component's data should be stored. In our example, the two configurations match.

But why do you need to do this? You may want to get the component's initial values from the previous elements, which may have stored another kind of data. In our scenario, we are doing this so that we can go from the input screen to the verification screen and back without losing the data that we've inserted (using the Previous button on the flow screens). In other words, we'll go back and forth without losing any form fields.

In our scenario, we'll be using the email field as the unique field for contacts (for the email component's Required attribute, we selected the true global value):

Close the modal and link the Start element to the New Customer Info screen element by dragging the white circle of the Start element to the white circle of the next block, called New Customer Info, as shown in the following screenshot:

Now, we need to create a new screen element. This is where we'll be reviewing the data we've just filled in:

This element contains a Display Text component, which is used to display the data stored in the contact variable.

Next, link this element to the previous one:

At the moment, we don't have any database interaction, but we can test it anyway by clicking the Run button at the top of the Cloud Flow Designer (remember to save the flow first). To do this, compile the form with some values:

Click Next to go to the review screen:

If you repeatedly click the Previous and Next buttons, you'll see the form keeping its data, thanks to the previous configuration of the value and output value attributes of the screen components.

Did you try to leave a non-required field blank? If so, you should have received an error message (and an email message with a log) stating that "The flow failed to access the value for contact.field because it hasn't been set or assigned." This is just Salesforce telling you that the variables associated with that input box were not initialized.

To initialize a variable, we'll be using the Assignment element and appending it between the Start element and the New customer info element. Let's see how we can do this:

In our example, the element is being configured so that it assigns all the required fields to the empty string global variable, which a safe way to initialize a value to the empty value (use this global variable instead of a blank text input value):

 The next step is adding the account's data.

Create a new screen element called account details with the following components:

• Text component:
  •  Name: Account name
  •  API name: account_name
  •  Required: True
  •  Default value: {!account.Name}
• Text component:
  •  Name: Duns Number
  •  API name: account_duns
  •  Required: True
  • Default value: {!account.DunsNumber}
• Currency component:
  •  Name: Annual Revenue
  •  API name: annual_revenue
  •  Required: False
  •  Default value: {!account.AnnualRevenue}
  • Decimal places: 2

The following screenshot shows the screen element's account details:

Have you noticed that none of the components have the Set Output Values attribute section? This is because these are simple components that do not convey complex logic.

Does this mean that we cannot set text or currency components for variables like we've done for the contact details screen?

The answer is that we can; however, we need to use the assignment element again to map the form components to the proper variable fields. Let's look at how we can do this:

Create a new resource variable of the Account type by going to Toolbox | Manager | New Resource:

Next, create a new Assignment element so that you can store the screen components, values in the account resource:

Remember to update the Contact Defaults element in order to initialize the account fields as well:

Now, let's modify the customer info verification screen so that it displays the account data:

Finally, detach the Customer info review and link everything together, as follows:

The whole flow can now be summarized in the following steps:

1. Initialize the contact and account data
2. Get contact details
3. Get account details
4. Finalize variable assignment
5. Review the data

For the last few steps, we'll be creating some logic to handle contact/account creation.

First, we need to know whether the contact and account are already in our database.

We'll be using the Email field on the contact and the Duns Number on the account. Initially, they were unique fields.

For this, we need a Get Records element that can query a given object type based on specific conditions. 

We'll be creating a Find Contact by email element with the following configuration (this is shown in the following screenshot):

• Label: Find Contact by email
• Get Records of This Object:
  • Object: Contact (name of the object that the element will query)
• Filter Contact Records:
  • Condition Requirements: Conditions are Met
  • Field: Email
  • Operator: Equals
  • Value: {!contact.Email}
• Set Contact Records:
  • Sort Order: Not sorted (we don't need sorting)
  • How Many Records to Store: Only the first record (this is based on the fact that we consider the email field to be unique across all the contacts)
  • Where to Store Field Values: In separate variables (we want to get the contact ID field only; the rest of the contact data will be received from our flow)
  • When no records are returned, set specified variables to null: Set this to true so that if no contact is found, no value is set on the variables we'll define in the next section
• Select Variables to Store Contact Fields:
  • Field: ID field of the contact object
  • Variable: {!FoundContactID} (this text variable has been created inline and will contain the matched contact, if there is one)

The following screenshot summarizes this configuration:

Create another Get Records element for the Account object with the same configuration that's shown in the preceding screenshot; the only things we need to change are the object type (which should be set to Account), the matching condition based on the Duns Number field (instead of the Contact.Email field) and the new FoundAccountID text variable, which we will use to store the matching Account ID (instead of the FoundContactID variable).

Now, based on the fact that the account has not been found, we can create or update a new record.

Connect the Customer Info Review screen to the Find Contact By Email element and the Find Contact by Email element to the Find Account by Duns Number element.

Let's create a new Decision element that will decide on whether the account is created or updated:

Here, we have two outcomes (we can have more, but in our scenario, we only have a two-way decision): that is, either the account has been found or it hasn't, depending on the FoundAccountID variable value (the Account found outcome has no conditions as it is the else path of the Account not found outcome). Use the EmptyString global value whenever you need to check null/empty values.

Connect the Find Account by Duns Number element to the Account to be created? decision element.

Let's create a Create Records element so that we can create the account and an Update Records element so that we can update the account (they are quite similar):

Connect the Account to be created? element to the Create Account element and select the Account not found outcome.

Before connecting the Update account element, we need to set the ID of our account record with the FoundAccountID value (we are going to be doing an upsert).

Then, we need to create a new Assignment element to set this value:

Now, connect the Account to be created? element to the Set Account Id assignment screen and select the Account found outcome. Then, connect it to the Update Account element.

At this stage, we have created/updated the account record. We need to do exactly the same for the contact record, but with a few modifications. For this, we need to do the following:

1. Create a new Assignment element to set the contact's account ID with an assignment set to {!contact.AccountId} Equals {!account.Id}. This has to be connected to the account's Create/Update elements of the previous flow branch.
2. Create a new Decision element (contact to be created?) based on the FoundContactID variable with two outcomes: Contact not found and Contact found. This new element will follow the previous Assignment element.
3. Create a new Assignment element to put FoundContactID into our contact variable.
4. Create a Create Records element to create a brand-new contact.
5. Create an Update Records screen to update our contact with its old ID.
6. Create a final screen to tell the user that customer acquisition has been completed.
7. Create an error handling screen to tell the customer whether any of the database operations (the Get Records or Create/Update records elements) went wrong.

In order to show flow error messages, we need to use the $Flow.FaultMessage global variable, as shown in the following configuration for the Error Message screen:

If you followed previous instructions correctly, this is what you will have:

Mission accomplished – easy, eh?

So far, we have created a few actions, but the flow has already become a bit messy. The secret is designing simple flows that can be linked with one another using the subflow element, which can call subflows.