Enhancing Screen Flows with Visual Picker: Create or Update Quotes by Product Type (Summer '25)

July 25 2025 • 15 min read

Introduction

When building Screen Flows in Salesforce, it's important to make the user experience as simple and clear as possible. Earlier, many flows used the Choice Lookup component to let users pick from a list. While this works well, it shows only text, which can be hard to understand quickly.

With the Summer '25 release, Salesforce introduced a new feature called the Visual Picker. This component lets users choose by clicking on icons with labels, making it much easier and more visual—especially when selecting product types like Hardware, Software, or Services.

In this blog, we’ll walk through how to use the Visual Picker to create a flow that helps users either create or update a Quote based on the product type they select. But before that, let’s look at a quick comparison between Choice Lookup and Visual Picker.

Choice Lookup vs. Visual Picker

User Interface

Choice Lookup: Uses a dropdown or search-based list.

Visual Picker: Offers a visually rich interface with icon-based tiles.

Best Use Case

Choice Lookup: Ideal for long, dynamic record sets.

Visual Picker: Best for short, predefined, and visually distinct choices.

Visual Clarity

Choice Lookup: Low visual clarity as it displays text only.

Visual Picker: High clarity with the use of icons and labels.

Multi-Select Option

Choice Lookup: Supported.

Visual Picker: Supported and configurable.

User Experience

Choice Lookup: Standard and basic selection experience.

Visual Picker: Guided, intuitive, and engaging experience.

Business Challenge

In many sales processes, users are required to create or update Quote records based on different product types such as Hardware, Software, or Services — each with its own unique set of input fields. Traditional screen flows using picklists provide a limited and text-heavy user experience, making it difficult for users to clearly understand and select the right product type. This often leads to incorrect data entry, reduced efficiency, and a higher chance of errors. There is a strong need for a more intuitive, guided approach that visually differentiates product types and streamlines the Quote creation or update process directly from the Home Page.

Requirement

The requirement is to design a Screen Flow using the new Visual Picker component introduced in the Summer '25 release to let users select a product type—Hardware, Software, or Services. Based on the selected option, the flow should display only the relevant input fields. After entering the details, users should be able to choose whether to create a new Quote or update an existing one. This flow should be easily accessible from the Home Page, providing a quick and user-friendly way to manage Quotes.

Steps to achieve the Requirement

Create a Screen Flow.
Add a Visual Picker to select the Product Type (Hardware, Software, Services).
Add a Decision element to the branch based on the selected Product Type.
Show a product-specific input screen for each branch.
Add a screen to ask the user whether to Create or Update a Quote.
Use a Decision element to branch based on Create or Update.
If Create is selected, use Create Records to insert a new Quote.
If Update is selected, use Get Records to retrieve the Quote.
Use a Decision element to check if the Quote exists.
If found, use Update Records to update the Quote.
Add End elements to complete each flow path.

1. Create a Screen Flow

1.1. Go to Setup → In Quick Find, search for Flows

1.2. Click New Flow.

1.3. Select Screen flow → Click Create.

2. Add a Visual Picker to select the Product Type

2.1. Add a Screen Element → Label: Select Product Type

2.2. Drag the Visual Picker component

2.3. Label: Product Type Picker.

2.4. Create three Choice Resources:

2.4.1. Software

2.4.1.1. Label: Software

2.4.1.2. API Name: Software_Choice

2.4.1.3. Choice Value: Software

2.4.1.4. Icon: utility:record

2.4.2. Hardware

2.4.2.1. Label: Hardware

2.4.2.2. API Name: Hardware_Choice

2.4.2.3. Choice Value: Hardware

2.4.2.4. Icon: utility:desktop

2.4.3. Services

2.4.3.1. Label: Services

2.4.3.2. API Name: Services_Choice

2.4.3.3. Choice Value: Services

2.4.3.4. Icon: utility:service_appointment

2.5. Set "Let Users Select Multiple Options" to No

2.6. Click Done.

3. Branch Flow by Product Type Using Decision Element

3.1. Add a Decision Element → Label: Product Type Decision

3.2. Create three outcomes :

3.2.1. If Product type is Software

3.2.2. If Product type is Hardware

3.2.3. If Product type is Services

3.3. Configure Outcome: "If Product Type is Software"

3.3.1. Outcome Label: If Product type is Software

3.3.2. Outcome API Name: If_Product_type_is_Software

3.3.3. Condition Requirements: All Conditions Are Met (AND)

3.3.4. Resource:
Screen SelectProductType → Product Type Picker → Selected Choice Labels

3.3.5. Operator: Equals

3.3.6. Value: Software

4. Display Product-Specific Input Screen (Software Example)

4.1. Under the Software path, add a Screen Element → Label: Software Details

4.2. Add fields:

4.2.1. Software Name – Text

4.2.2. License Type – Picklist

4.2.3. No. of Licenses – Number

4.3. Mark required fields appropriately

4.4. Set clear API names (e.g., Software_Name, License_Type, No.of_Licenses)

4.5. Click Done.

5. Ask User to Create or Update a Quote

5.1. After each product-specific screen, add a Screen Element → Label: Quote Selection

5.2. Add a Radio Button component:

5.2.1. Label: Quote Selection Radio

5.2.2. API Name: Quote_Selection_Radio

5.2.3. Choices:

5.2.3.1. Create New

5.2.3.2. Update Existing

5.3. Data Type: Text

5.4. Mark as Required

5.5. Click Done.

6. Decision Element for Create vs Update

6.1. Add a Decision Element → Label: Create Update Quote Decision
6.2. Outcomes:

6.2.1. Create → Condition: Quote Selection Radio = Create New

6.2.2. Update → Condition: Quote Selection Radio = Update Existing

7. Handle Create Path

7.1. Add a Create Records element → Label: Create Software Quote Record

7.1.1. Object: Quote

7.1.2. How to Set Fields: Manually

7.1.3. Set fields:

7.1.3.1. Quote Name ← Software Name

7.1.3.2. No. of Licenses ← No. of Licenses

7.1.3.3. Product Type ← Product Type Picker → Selected Choice Labels

7.2. Click Done.

8. Handle Update Path

8.1 Get Existing Quote

8.1.1. Add a Get Records element → Label: Find Existing Quote

8.1.2. Object: Quote

8.1.3. Filter: Quote Name = Software Name

8.1.4. Store: Only the first record

8.2. Check If Quote Exists

8.2.1. Add a Decision Element → Label: QuoteExists?

8.2.2. Condition:

8.2.2.1. Find Existing Quote → Quote ID Is Null = False → Existing quote found

8.2.2.2. Default Outcome → No quote found → Connect to Create Quote Record.

8.3 Update Quote

8.3.1. Add an Update Records element → Label: Update Quote Record

8.3.2. Object: Quote

8.3.3. Filter: Quote ID = Found Quote ID

8.3.4. Fields to update:

8.3.4.1. Quote Name, No. of Licenses, Product Type

Hardware Quote Path

1. Display Product-Specific Input Screen (Hardware)

1.1. Under the Hardware outcome of the Product Type Decision element, add a Screen Element → Label: Hardware Details
1.2. Add the following input fields:

1.2.1. Hardware Name – Text

1.2.2. Quantity – Number

1.3. Mark the required fields as needed
1.4. Set appropriate API names (e.g., Hardware_Name, Hardware_Quantity)
1.5. Click Done

2. Ask User to Create or Update a Quote

2.1. After the Hardware Details screen, add a Screen Element → Label: Quote Selection
2.2. Add a Radio Button component with the following configuration:

2.2.1. Label: Quote Selection Radio

2.2.2. API Name: Quote_Selection_Radio_Hardware

2.2.3. Data Type: Text

2.2.4. Required: Yes

2.2.5. Choices:

2.2.5.1. Create New

2.2.5.2. Update Existing

2.3. Click Done

3. Decision Element for Create vs Update

3.1. Add a Decision Element → Label: Create Update Hardware Quote Decision
3.2. Add two outcomes:

3.2.1. Create → Resource: Quote Selection Radio = Create New

3.2.2. Update → Resource: Quote Selection Radio = Update Existing

4. Handle Create Path

4.1. Add a Create Records element → Label: Create Hardware Quote Record

4.1.1. Object: Quote

4.1.2. Field Mapping:

4.1.2.1. Quote Name ← Hardware Name

4.1.2.2. Quantity ← Hardware Quantity

4.1.2.3. Product Type ← Product Type Picker → Selected Choice Labels

4.2. Click Done

5. Handle Update Path

5.1. Get Existing Quote

5.1.1. Add a Get Records element → Label: Find Existing Hardware Quote

5.1.2. Object: Quote

5.1.3. Filter Condition: Quote Name = Hardware Name

5.1.4. Store: Only the first record

5.2. Decision Element to Check If Quote Exists

5.2.1. Add a Decision Element → Label: HardwareQuoteExists?

5.2.2. Condition:

5.2.2.1. Quote ID Is Null = False → Quote found

5.2.2.2. Default Outcome → No quote found → Connect to Create Hardware Quote Record.

5.3. Update the Quote

5.3.1. Add an Update Records element → Label: Update Hardware Quote Record

5.3.2. Object: Quote

5.3.3. Filter: Quote ID = Found Quote ID

5.3.4. Fields to update:

5.3.4.1. Quote Name ← Hardware Name

5.3.4.2. Quantity ← Hardware Quantity

5.3.4.3. Product Type ← Product Type Picker → Selected Choice Labels

Services Quote Path

1. Display Product-Specific Input Screen (Services)

1.1. Under the Services outcome of the Product Type Decision element, add a Screen Element → Label: Service Details
1.2. Add the following input fields:

1.2.1. Service Name – Text

1.2.2. Service Duration – Number (e.g., in months)

1.3. Mark fields as required appropriately

1.4. Set API names like Service_Name, Service_Duration

1.5. Click Done.