Comment on page
Visual Picker
A visual picker is visual enhanced box to open an external content.
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.
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. You can access various ratio values to decide how to dispose of your items.
The Variant attribute lets you decide the appearance of an item when selected.
Non coverable vs Coverable variant
Enter visual picker items manually. Manual data source is not connected to your flow collection and items are not dynamic.
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.
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
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.
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.
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 |
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 |
Name | Description |
|---|---|
change | The event fired when the value changed. |
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 |
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 |
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 |
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 |
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 2mo ago