Visual Picker

A visual picker is visual enhanced box to open an external content.

📘 Overview

A Visual picker is a vertical visual way to allow the user to select one or more items from a set of values. A visual Picker can be either radio buttons, checkboxes, or links.

Changing the Properties

Selecting Radio or Checkbox type

The type attribute allows you to define how the input selection should behave. To allow users to select more than one option, use checkboxes instead of radio buttons.

Selection Range Customization

The Visual Picker components now include a 'Selection Range Customization' feature, enhancing your control over item selection. This feature allows you to define minimum and maximum selection limits, which is particularly useful when utilizing the Checkbox Type.

By setting these parameters, you can precisely manage the number of options a user can select, ensuring adherence to your specified range and enhancing the accuracy of data collection or user input.

Setting a Ratio

You can access various ratio values to decide how to dispose of your items.

Choosing a Variant

The Variant attribute lets you decide the appearance of an item when selected.

Non coverable vs Coverable variant

Adding a Data Source

Manual

Enter visual picker items manually. Manual data source is not connected to your flow collection and items are not dynamic.

Variable

Add visual picker items with values from one of your flow source collections. You can map your data with all the visual picker attributes by adding a source collection.

Picklist Values

Add visual picker items with values coming from your picklist values fields. Select an object and a picklist field to add visual picker items based on picklist values.

Images can not be added to picklist values items

Adding Interactions

Interactions define what will happen when users interact with the visual picker component. You can find a list of interactions available

Here are the available interactions for the visual picker component:

• On Change: The event fired when the slider value changed.

Styling the Visual Picker

From the Styles panel, you can customize styling attributes for the visual picker:

• Header: to customize the styling settings of the label.

• Title: to customize the styling settings of the title text.

• Description: to customize the styling settings of the description text.

• Background: to customize the styling settings of the item's background.

• Border: to customize the styling settings of the item's border.

You can find the instructions for styling here.

Examples

Property	Value
Label	Select a product
Type	Radio
Size	XX-Large
Ratio	1-by-1
Variant	Not Coverable
Required	Yes
Data Source	Manual
Items / Title	Appointment Analytics
Items / Description	Bring the power of Tableau CRM to Lightning Scheduler...
Items / Value	appointmentAnalytics
Image Source	Upload your own image
Items / Title Position	Center
Items / Description position	Center
Items / Avatar Position	Left
Items / Avatar Variant	Square
Items / Avatar Icon name	standard:service_appointment
Items / Avatar Size	Medium
Items / Presence Position	Top Right
Tags / Label	Lightning
Tags / Variant	Base

Specifications

Attributes

Name	Type	Description
disabled	Boolean	If present, the visual picker is disabled and the user cannot with it.
hideCheckMark	Boolean	If present, hide the check mark when selected
label	String	Text label to title the visual picker
name	String	The name of the visual picker
ratio	String	The ratio of the items. Valid values include 1-by-1, 4-by-3, 16-by-9, 3-by-4 and 9-by-16.
required	Boolean	If present, at least one item must be selected
size	String	The size of the items. Valid values include xx-small (4rem x 4 rem), x-small (6rem x 6 rem), small (8rem x 8rem), medium (12rem x 12rem), large (15rem x 15rem), x-large (18rem x 18rem), xx-large (21rem x 21rem) and responsive. Only avatar appears when x-small and xx-small
type	String	It defines the type of input. Valid values include radio and checkbox
value	String	Value of the selected item. For the checkbox type, the value can be an array. Ex: [value1, value2], 'value1' or ['value1']
valueCollection	String[]
variant	String	Changes the appearance of the item when selected. Valid values include coverable and non-coverable
items	VisualPickerItem[]	Visual picker item information

Events

Name	Description
change	The event fired when the value changed.

Styling Hooks

Header

Name	Description
Text Color	Define a text color for the header if a label is present
Font Size	Define a text color for the header if a label is present
Font Style	Define a text color for the header if a label is present
Font Weight	Define a text color for the header if a label is present

Title

Name	Description
Text Color	Define a text color setting for the title
Alignment	Define a text color setting for the title
Font Size	Define a text color setting for the title
Font Style	Define a text color setting for the title
Font Weight	Define a text color setting for the title

Description

Name	Description
Text Color	Define a text color setting for the description
Font Size	Define a text color setting for the description
Font Style	Define a text color setting for the description
Font Weight	Define a text color setting for the description

Background

Name	Description
Background Color	Define a background color for items
Background Color Hover	Define a background color hover for items
Background Color Selected	Define a background color selected for items

Border

Name	Description
Border Size	Define a border size for items
Border Radius	Define a border radius for items
Border Color	Define a border color for items
Border Color Hover	Define a border color hover for items
Border Color Selected	Define a border color selected for items
Border Style	Define a border style for items
Shadow	Define a border shadow for items