[Note: The following use case is written for use in Lightning Experience. However, you can use the Flow Toggle feature in Cloud Flow Designer in Classic too. You can create flows with the flow toggle in Classic, if enable the lightning runtime in the Process Automation Settings screen.]

Lightning record pages are cool in terms of its flexibility, allowing you to drag, drop, and configure various components to show on the page, even to display conditionally as well. However, there may have a need to show or hide components on a Lightning record page, but you want to give the user the choice to decide to show or hide this information.

You can use a flow screen and the new flow toggle, introduced in Winter ’19, to allow the user to toggle on and off components and use component visibility to show and hide components at will.

Here are a few lessons learned from implementing this use case:

• Learn how to add flow a Lightning record page.
• Learn how to configure the flow toggle screen component.
• Learn how to use the Related Record Lightning component and the Update Record Quick Action to show fields as read only.
• Learn how to use component visibility to determine when to show components on a lightning record page.
• Provide descriptions, where provided, in Salesforce. This may be tedious step, I know, but your future self will thank you when you are trying to remember what you configured or assist other/future admins when troubleshooting or enhancing what was built. This includes variables, the purpose of a flow, what each flow element does, etc.

Business Use Case:  Addison Dogster is the system administrator at Universal Containers.  Mary Markle is the Director of Operations. She mentioned to Addison the she likes how the Lightning record pages are so flexible, especially the ability to control the component visibility. However, she would like the end users to decide whether to show or hide components and have the system remember their preference for a given record.

Solution: Being the #AwesomeAdmin that Addison is, she was able to solution this declaratively with a flow screen with the out-of-the-box flow toggle Lightning component using Cloud Flow Designer, an Update Record quick action and with Lightning App Builder to set up the component visibility.

View image full screen

Quick Steps:

1. We need to create a custom field checkbox on the Contact object that determines whether to show or hide the additional information. Go to Setup | Object Manager | Contact | Fields & Relationships, create a new field. Do not add this new field to the page layout as this is a behind-the-scenes processing field.

Best practice tip: Provide a description so you and other/future admins know what this custom checkbox field is used for.

2. Now, let’s create the flow. For those using Salesforce Classic, flow can be found in Create | Workflows & Approvals | Flows. In Lightning Experience, it is found under Process Automation | Flows.

Here is the flow we are going to create. This flow will do a record lookup for the value stores in the custom Show Addl Info field created in the previous step. Next, we show the screen with the Show/Hide toggle. Once the toggle selection is submitted, we perform a record update of the Show Addl Info field with the screen selection. Lastly, we return the user to the contact record, essentially refreshing the page to show or hide components accordingly.

A. Let’s create our flow resources.

The first variable resource is called “recordId.” This is case sensitive and is a reserved variable name used by Salesforce to denote the record Id of the detailed record page. This needs to be specified as “Input Only” or “Input and Output” in the Input/Output Type for Salesforce to pass the recordId from the Lightning record page to the flow.

Best practice tip: Provide a description so you and other/future admins know what this flow resource is used for.

This variable “varShowHideAddlInfoValue” will hold the value of the Show Add’ Info custom field created in Step 1. We will use this variable to show the record’s field value and store the toggle section from the flow screen to update back to the contact record.

Best practice tip: Provide a description so you and other/future admins know what this flow resource is used for.

B. First, we will perform a Record Lookup on the contact record to pull the current value stored in the Show Addl Info field. We will lookup the Contact object where the Id equals the value in the variable recordId (contact Id passed from the Lightning record page). Then we store the value in the Show_Addl_Info__c field in the variable “varShowHideAddlInfoValue.” Make sure you check the box “Assign null value to the variable(s) if no records are found.”

Best practice tip: Provide a description so you and other/future admins know what this flow element is used for.

C. Next, we are going to show the Show/Hide toggle in the Screen flow element. Under Header and Footer, deselect Footer. Under Navigation Actions, deselect “Allow Previous” and “Allow Pause.”

Best practice tip: Provide a description so you and other/future admins know what this flow element is used for.

Tab over to the “Add a Field” tab, scroll to the very bottom and locate “Lightning Component” and drag it over to the right screen location.

Double-click on the lightning component right screen to configure the field settings.

Select the “flowruntime:toggle” as the Lightning Component.

Configure the attributes for the Lighting Component to match the below for the Inputs tab and the Outputs tab.

Here is a summary of the component attributes:

• Label: This label appears next to the toggle and describes what the user is enabling. This attribute accepts single-value resources. The value is treated as text.
• Active Label:  When the toggle is active, this label appears underneath the toggle. Use it to clarify what active means. The default label is “Active.” This attribute accepts single-value resources. The value is treated as text.
• Inactive Label: When the toggle is inactive, this label appears underneath the toggle. Use it to clarify what inactive means. The default label is “Inactive.” This attribute accepts single-value resources. The value is treated as text.
• Value: Whether the toggle is active ($GlobalConstant.True) or inactive ($GlobalConstant.False). Setting this attribute from the Inputs tab controls the default state of the toggle. To store the user’s selection in a flow variable, set this attribute from the Outputs tab. This parameter accepts single-value Boolean resources.
• Disabled: If set to $GlobalConstant.True, the user can’t modify or copy the value. This attribute accepts single-value Boolean resources.

D. Next, we will use a Record Update flow element. We will update the contact object where we find a record that has an Id equals to the variable recordId. We will update the Show Addl Info custom field on the contact record to the toggle selection from the previous screen (i.e. variable varShowHideAddlInfoValue).

Best practice tip: Provide a description so you and other/future admins know what this flow element is used for.

E. For our last flow element, we are using a Local Action (Lightning Component). This specific OpenSObject Local Action is installed from the unofficial Lightning Web site managed by the Salesforce Product Management Process Automation Team. This local action takes the user to a record page — in this case, back to the contact record page to essentially refresh it to show or hide the components based on the toggle selection.. For the sObject attribute on the Inputs tab, select the recordId variable. In the Outputs tab, delete the row. This is not needed.

Note: To use Lightning Components in your org, you need to have My Domain enabled and enable lightning runtime feature on the Process Automation Settings screen.

Best practice tip: Provide a description so you and other/future admins know what this flow element is used for.

F. Add the subflow Send Flow Fault Email. For instructions on how to create this, go to Step 2 of blog post: Maximize Maintainability With Process Builder and Componentized Visual Workflow.

G. Set your flow starting point. And connect the flow elements, outcome connector, loop connector and the fault connectors to match the below…

H. Save/Save As and provide the following properties.

Best practice tip: Provide a description so you and other/future admins know what this flow is used for.

I. Click the “Close” button.

J. On the flows screen, activate the flow.

3. We need to configure the display only additional contact information by setting up a Contact Record Update Quick Action. Go to Setup | Object Manager | Contact | Buttons, Links, and Actions. Create a Update a Record quick action.

Best practice tip: Provide a description so you and other/future admins know what this quick action is used for.

The next step, you need to specify the fields to show. To simply this, I just selected two fields from the contact object and made them read only (setting the property of each field) since we only want to show these to the user, it’s not meant for them to update the information. This is not to say that you can’t allow selected fields to be editable. Additionally, if you want to show other related data, you can create formulas to pull that additional information into the contact object and show the data as read only to the user.

4. Now, we need to add the Flow and Related Record standard components to the Contact Lightning record page via Lightning App Builder.

View image full screen

Locate the Flow component that we configured in Step 2 and drag it to the desired location on the page. Refer to the configuration below. Don’t forget to check the box next to “Pass record ID into this variable”, which is the recordId variable.

Locate the Related Record component and drag it to the desired location on the page. Ensure you configure the attributes accordingly .

For the Component Visibility, we will set up the filter so Show Addl Info equals true. Otherwise, the component will be hidden to the user.

Click the Save button and hit Back.

That’s it! You’ve configured the changes.

Now, before you deploy the changes to Production, don’t forget to test your configuration changes.

1. On a contact record, set the Show Addl Info field to true.
2. Refresh the page.
3. In the flow toggle, toggle to Hide and click on the Next button.
4. Upon page refresh, confirm that the component is hidden.
5. Next, toggle to Show and click on the Next button.
6. Upon page refresh, confirm that the component is showing.

Deployment Notes/Tips:

• The flow, custom label, quick action and lightning record page can be deployed to Production in a change set (or can be deployed using a tool such as Dreamfactory’s Snapshot).
• You will find the flow in a change set under the Flow Definition component type.
• Activate the flow post deployment as they deploy inactive in Production, unless with Winter ’19, you have opted in on the Process Automation Settings screen, to “Deploy processes and flows as active.” NOTE: With this change, in order to successfully deploy a process or flow, your org’s Apex tests must launch at least 75% of the total number of active processes and active autolaunched flows in your org.