Add More Options to Your Screens

Learning Objectives

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

• Give users more details about choices with a data table.
  
• Place record fields directly on a flow screen.
  
• Place a lookup field on a flow screen.
  
• Create a screen that allows users to upload files.
  

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.

Before You Start

For the exercises in this unit, you need an additional custom field. On the Case object, create a custom field with these details.

• Data Type: Lookup Relationship
  
• Related To: User
  
• Field Label: QA Reviewer
• Field Name: QA_Reviewer
• Keep the default values for all other settings
  

Give Users a More Informed Choice

Flo received more feedback from Pyroclastic’s support teams about the Create Case for Contact flow. First, they want to update a question to make it easier for support agents to select a contact record. Then, they want to add questions that capture the case reason and the related account.

When choosing from a group of records, users often need more information than just the record name. Support agents need more contact information to select the best point of contact for a case. They want to see: 

• Title, to confirm that their role is appropriate for the problem
  
• Email, so that support agents can follow up
  
• Phone number, so that support agents can follow up
  

To give users enough info to choose a record, use a Data Table component. The table format presents a list of records in rows, and the record’s fields in columns.

Add a Data Table Component

1. Open the Create Case for Contact flow.
   
2. In the Create Case element, click to remove the Contact ID ← Questions Page 2 > Point of Contact line.
   
3. Before the Questions element, add a Get Records element to retrieve the account’s contacts.
   

• Label: Get Contacts
• Object: Contact
  
• Condition Requirements: All Conditions Are Met (AND)
  
• Field: AccountId
  
• Operator: Equals
  
• Value: inputAccountId
  
• How Many Records to Store: All Records
  

4. Open the Questions Page 2 element and hover over the Point_of_Contact component. Click to remove that component.
   
5. Add a Data Table component for users to select the correct contact.
   

1. Drag Data Table from the Components sidebar to the screen canvas.
   
2. For API Name, enter PointOfContact.
   
3. For Label, enter Point of Contact
4. Select Use Label as the table title.
   
5. For Source Collection, select Contacts from Get_Contacts.
   
6. Click Configure Rows to open the section.
   
7. For Row Selection Mode, select Single.
   

Row Selection Mode has two other options: Multiple and View Only. The Multiple option allows users to select multiple records, storing them in a record collection variable. The View Only option just displays the records without allowing the user to make a selection. Use View Only to display a list of records within your flows, so users don’t have to navigate away from the flow to get the information they need.

8. Select Require user to make a selection.
   
9. Click Configure Columns to open the section.
   
10. For Source Field, select Name (Full Name).
    
11. Before you click Done, make sure that you’re clicking Done in the Column Options, not at the bottom of the Edit Screen window.
    
    
12. Click +Add Column and repeat steps j-k to add columns for the Title, Email, and Phone (Business Phone) fields.
    
    

6. Click Done to close the Questions Page 2 element.
   

Quickly Add Existing Fields with Minimal Configuration

The most efficient way to add an object’s field to a screen flow is to use a Record Field component. (You might have heard this feature referred to as Dynamic Forms for Flow.) Record Field components resemble fields on a Salesforce object. To use a Record Field component, you choose a record variable to indicate the object and then drag as many of its fields as you want to the screen canvas. Imagine how quickly you could add 5, 10, or even more fields to the screen!

If this is so great, why haven’t we mentioned it before now? Well, there are some limitations. Each Record Field component inherits most of the corresponding field’s configuration, including its label, picklist values, and requiredness. You can’t change them in the flow. 

At Pyroclastic, the case Description and Subject fields are not defined as required fields in Salesforce, but the support teams want to require them in the flow. Because the requiredness in the flow doesn’t match the requiredness in the corresponding field, you can’t use Record Field components for those. Instead, you used the Long Text Area and Text components, which have more flexible configuration options.

While some field properties are inherited by the Record Field component and can’t be changed, others, such as default values and record type filters, aren’t reflected in the Record Field component at all. For more details, see Adding Record Fields to Flow Screens.

Record Fields don’t support every field type, but Salesforce keeps adding support for more field types. To find out whether a field type is supported, check out the Record Fields on Flow Screens Considerations section of the Adding Record Fields to Flow Screens page in the Salesforce Help documentation.

Add a Picklist Record Field Component and a Lookup Record Field Component

Flo has more feedback from the support teams at Pyroclastic. Now they want to collect the case reason and the related account in the Create Case for Contact flow. The field names, picklist values, and requiredness should match those in the Case object, so these are perfect candidates for Record Field components.

Record Field components are configured differently from other screen components and flow elements. Instead of selecting an object directly, you use a record variable that corresponds to a specific object. You can choose an existing record variable or create a new one. To access the new fields requested by the support teams, you create a record variable based on the Case object.

1. In the Questions Page 2 screen, click the Fields tab in the left pane.
   
2. For Record Variable, select +New Resource.
   
3. For API Name, enter caseVar.
   
4. For Object, select Case.
   
5. Click Done.
   The Record Variable field contains the caseVar resource, and supported fields from the variable are listed.
   
   
6. Drag Case Reason from the Fields list to the screen canvas.
   
7. Drag QA Reviewer from the Fields list to the screen canvas.
   

Just like that, you’ve added a picklist field and a lookup field to your screen flow, with names, object configuration, and picklist values already set for you. Imagine how fast it would be if you needed to add 5, 10, or even more fields!

Previously in this badge, we added screen components that directly correspond to existing case fields. Why didn’t we use Record Field components then? For all of those fields, the questions needed different configuration: different labels, different requiredness, or different filters. So we used configurable components instead.

Create a Lookup Field with Different Settings

While you were building this screen flow, Flo received another requirement: the QA Reviewer lookup must be required, not everywhere, just in this flow. But the field itself isn't defined as required, so we can't use a Record Field component. No worries; you can use a Lookup screen component instead.

Like Record Field components, the Lookup component imitates an existing lookup field from a Salesforce object. However, the Lookup component offers more configuration than the Record Field component, including setting a default value and making it required. Its configuration style is also different from other components, requiring more manual entry and knowledge of the object and field API names. When adding a Lookup component, you may need to refer to the object and its fields in the Object Manager.

Replace a Record Field Component with a Lookup Component

1. In the Questions Page 2 element, click to remove the QA Reviewer record field from the screen canvas.
   
2. Click the Components tab in the left sidebar to display the list of screen components.
   
3. Drag Lookup from the Components sidebar to the screen canvas.
   
4. For API Name, enter ScreenReviewer.
   
5. For Field API Name, enter QA_Reviewer__c.
   This setting contains the API name of the existing lookup field being replicated in the flow.
   
6. For Label, enter QA Reviewer.
   
7. For Object API Name, enter Case.
   Case is the API name of the object that contains the existing lookup field.
   
8. For Record ID, select $User > Id.
   This setting determines where the flow stores the value that the user selects. The value that you set here becomes the default value when the flow runs. In this case, when the flow runs, the QA Reviewer Lookup component has the running user's ID as its default value.
   
9. For Required, select $GlobalConstant.True.
   
   
10. Click Done.
    

All done! The Lookup component takes a little longer to research and configure than a Record Field component. Still, it gets the job done, and it gives you a few more configuration options.

Update the Create Records Element

To use the values collected by the new screen components, you need to add their field values to the element that creates the case. Each screen component has a specific way of referencing a running user’s answers. You referenced the Text and Long Text Area components directly. The three components you added in this unit introduce three more ways to reference component values. Let’s unpack each one as you add the point of contact, reason, and QA reviewer to the Create Case element.

Get the Value from a Data Table Component

1. Open the Create Case element.
   
2. Under Set Field Values, click +Add Field.
   
3. For Field, select Contact ID.
   
4. For Value, select Questions Page 2 > Point of Contact > First Selected Row > Contact ID.
   

The Contact ID you want was selected from a Data Table in which each row (contact record) has multiple columns (field values). The Create Records element needs to know which field to use from the selected table row.

When a Data Table is configured to allow users to select multiple records, Flow Builder uses the record that the user selected first (which is not necessarily the first record sequentially).

Get the Value from a Lookup Component

1. Click +Add Field.
   
2. For Field, select QA Reviewer.
   
3. For Value, select Questions Page 2 > QA Reviewer > Record ID.
   

You set QA Reviewer from a Lookup component. Unlike other components, such as Long Text Area and Radio Buttons, the Lookup component has multiple potential values to reference. You’re setting the value of a Lookup field, which requires a record ID, so you select the component’s Record ID.

Get the Value from a Record Field Component

With most screen components, the value entered by the user is stored in the component. To reference that value in a data element, you select the component or a field within that component. For example, the Point of Contact component allows users to select a record, so its value is stored in the component’s Id field. When you want to reference a component’s value in another element, you select the screen that contains the screen component, then select the component.

The Record Field component is a bit different. For a Record Field component, the value is not stored in the component itself, but in the record variable related to the component. For example, the selected case reason is stored in the caseVar record variable that you chose when you added the Case Reason record field to the screen.

When you set field values in a data element, for a Record Field component, you select from the Record Variables section of the Value picklist.

1. Click +Add Field.
   
2. For Field, select Case Reason.
   
3. For Value, select caseVar > Case Reason.
   Your new field values for the case should look like this.
   
   

Allow Users to Upload Files

Before we finish this unit, there’s one last feature to add to the flow. Support agents sometimes talk customers through sending screenshots or other images that help with troubleshooting their cases. They want to attach those images to the case.

The File Upload screen component does exactly what it says: It uploads files to Salesforce. To associate uploaded files with the created case, you add the File Upload component to a Screen element that comes after the element that creates the case. Otherwise, there’s no case to upload the files to, and the upload fails.

Add a Screen with an Upload Button

1. Add a Screen element after the Create Case element.
   
2. For Label, enter File Upload Screen.
   
3. Drag the File Upload component to the screen canvas.
   
4. For API Name, enter UploadImages.
   
5. For File Upload Label, enter The case has been created. Do you have any related files to upload to it?
6. For Allow Multiple Files, select $GlobalConstant.True.
   
7. For Related Record ID, select CaseId from Create_Case.
   
8. Click Done.
   
9. Save the flow.
   

Usually, after you collect input in a screen element, you need a data element (such as Create Records or Update Records) to save that input to a Salesforce record. Well, this is an exception. The new screen element contains only the File Upload component, and the File Upload component automatically saves the files. So when users run the flow and upload files, the files are attached to the case immediately.

Resources

• Salesforce Help: Flow Screen Input Component: Data Table
• Salesforce Help: Adding Record Fields to Flow Screens
• Salesforce Help: Flow Screen Input Component: Lookup
• Salesforce Help: Flow Screen Input Component: File Upload