Links

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

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
Last modified 22d ago