[Note: The following use case is written for use in Lightning Experience. However, you can use the flow slider feature in Cloud Flow Designer in Classic too. You can create flows with the flow slider in Classic, if enable the lightning runtime in the Process Automation Settings screen.]
You can now allow your users to visually select a value using a slider.
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 slider screen component.
- 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 is working with Addison on a flow screen to gather information from users for a rental inquiry that creates a rental inquire record behind the scenes. She would like to use the price/bathroom/bedroom sliders that she sees on sites like Airbnb.
Solution: Addison was able to solution this by building a flow screen, using the Winter ’19 out-of-the-box flow slider lightning flow screen component.
Quick Steps:
1. We need to create a custom object Rentals to hold the rental inquiry requests. This holds the price per night, number of bathrooms, number of bedrooms, city, state and the contact the request was submitted for. The price, bathroom and bedroom fields are number fields; city and state are text fields and the contact is a lookup field.
Best practice tip: Provide a description so you and other/future admins know what the custom object and fields are 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. We will show a screen to gather information from the user to create the rental inquiry record. After the record is successfully created, we will show a toast message using flow local actions.
A. Let’s create our flow resources.
Best practice tip: Provide a description so you and other/future admins know what this flow resource is used for.
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.
The variable “varBathroom” will hold the user selected number of bathrooms from the flow screen. This information will be used to create the Rental record.
The variable “varPrice” will hold the user selected maximum price per night for a room from the flow screen. This information will be used to create the Rental record.
The variable “varBedroom” will hold the user selected number of bedrooms from the flow screen. This information will be used to create the Rental record.
B. First, we will create the Flow Screen to gather the information needed for the rental record. We will create the bedroom, bathroom and price inputs using the flow slider lightning component. City and State inputs are using a text field.
Best practice tip: Provide a description so you and other/future admins know what this flow element is used for.
On the General Info screen, scroll down and deselect Allow Previous and Allow Pause options under Navigation Actions.
From the Add a Field tab, drag the Lightning Component and configure the Bedroom field per the screenshot. Select the flowruntime:slider as the Lightning Component. We are setting the bedroom min/max to 0-10. The slider size is set to small so the slider will fit in the lightning page component. The Step Size is 1, so it will increment by 1. The starting value is set to 0.
In the Outputs tab, configure the Value attribute to the variable varBedroom.
Here is a summary of the flow slider component attributes:
| Attribute | Description |
|---|---|
| Label | This label appears above the slider.
This attribute accepts single-value resources. The value is treated as text. |
| Range Minimum | The minimum value of the slider range. The default is 0.
This parameter accepts Number resources. |
| Range Maximum | The maximum value of the slider range. The default is 100.
This parameter accepts single-value Number resources. |
| Step Size | Divides the slider into a set of steps. The default is 1.
For example, for a range of 0–100, set the Step Size to 10 to let the user select every 10th value. Other example step sizes are 0.1 and 5. This parameter accepts single-value Number resources. |
| Slider Size | Controls the size of the slider. The accepted values are x-small, small, medium, or large.
This parameter accepts single-value resources of any type. That value is treated as text. |
| Value | The default value represented by the slider position. Setting this attribute from the Inputs tab pre-sets the value.
This parameter accepts single-value Number resources. |
From the Add a Field tab, drag the Lightning Component and configure the Bathroom field per the screenshot. Select the flowruntime:slider as the Lightning Component. We are setting the bathroom min/max to 0-5. The slider size is set to small so the slider will fit in the lightning page component. The Step Size is 1, so it will increment by 1. The output attribute Value is set up with the varBathroom.
We are setting the price min/max to 25-1,000. The slider size is set to small so the slider will fit in the lightning page component. The Step Size is 25, so it will increment by 25. The output attribute Value is set up with the varPrice.
The City and State are configured as test fields.
C. Next, we will perform a Record Create on the rental record based on the information from the flow screen.
Best practice tip: Provide a description so you and other/future admins know what this flow element is used for.
D. For our last flow element, we are using a Local Action (Lightning Component). This specific showToast Local Action is installed from the unofficial Lightning Web site managed by the Salesforce Product Management Process Automation Team. This local action shows a toast message in the Show Toast flow local action Lightning component. In the Inputs tab, configure the following attributes:
- message: Thank you for your rental inquiry
- type: success
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.
E. 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.
F. Set your flow starting point. And connect the flow elements, outcome connector, loop connector and the fault connectors to match the below…
G. 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.
H. Click the “Close” button.
I. On the flows screen, activate the flow.
3. Now, we need to add the Flow standard components to the Contact Lightning record page via Lightning App Builder.
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.
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.
- On a contact record, provide the number of bedrooms, bathroom, price per night, city and state and click on the Next button.
- You will see the successful toast message.
- See the new record in the Rentals related list.
Deployment Notes/Tips:
- The flow and lightning record page can be deployed to Production in a change set (or can be deployed using a tool such as Metazoa’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.
Jenwlee's Salesforce Blog 