Color Picker

Overview

The Avonni Color Picker is a Flow Screen component that provides a rich user interface for selecting colors. It supports three main modes of selection: a visual spectrum, a predefined palette of swatches, or direct input of color codes (Hex, RGB, etc.). It can be configured as a standalone input field, an inline palette, or a dropdown menu button.

---

Configuration & Customization

General Behavior & Layout

Control how the component interacts with the user and fits into your screen design.

• Display Mode: Choose between a standard input field, a clickable button, or an inline canvas.

• Validation: Toggle Required, Disabled, or Read-Only states to manage user input.

• Transparency: Enable the Opacity slider to allow alpha-channel adjustments.

Customizing the Palette

Ideal for product configurators or strict brand compliance, this section allows you to curate the visual selection experience.

• Curated Colors: Define specific color arrays (Hex/RGB) to restrict user choice.

• Grid Layout: Customize the Number of Columns and Tile Dimensions (width/height).

• Selection Style: Choose how selected colors are highlighted (Outline vs. Checkmark).

Button Menu Mode

Activated when the Type is set to Menu, transforming the input into a seamless dropdown.

• Label & Icon: Customize the button text and Lightning Design System icon.

• Variant: Adjust the button style (e.g., Border-filled, Bare) to match your page layout.

• Alignment: Control where the dropdown menu appears relative to the button.

---

Interactions

The Color Picker supports one interaction event: On Change. It fires every time the user selects a different color — whether by clicking a swatch, picking from the spectrum, or typing a hex code.

Open the Interactions tab in the Component Builder to configure what happens when the color changes.

On Change

This event fires immediately when the selected color value changes. Here are common ways to use it:

Action	What it does	When to use
Flow Navigation	Automatically advances to the next screen	When color selection is the only step on the screen — creates a one-click experience with no "Next" button needed
Show Toast	Displays a confirmation message	To give immediate visual feedback (e.g., "Color preference saved!")
Open Flow Dialog	Opens a sub-flow in a modal	To show related options based on the color choice (e.g., selecting "Red" opens a modal with available red products)
Update Records	Saves the color to Salesforce immediately	To persist the selection in real time without waiting for the user to finish the screen
Refresh Query	Refreshes another component's data	To update a preview or related component that depends on the selected color

Accessing the selected color in your flow

After the screen, use the Value output variable on the Color Picker component in Flow Builder. It returns the selected color as a string (e.g., #1B5E20). No interaction setup is needed to capture this value — it's available automatically

---

Use Case Example

The Seamless Product Selector

Scenario: You are building a "Product Customization" screen where the user picks a color preference. You want the experience to feel fast and fluid.

The Setup

1. User Action: The user clicks a specific color in the palette.

2. Component Interaction: The Color Picker is configured to trigger Flow Navigation (Next) on the Change event.

The Logic Chain (Standard Flow Behavior)

• Step 1 (Screen): User picks "Midnight Blue." The screen automatically transitions.

• Step 2 (Flow Element): The Flow moves to a standard Assignment element to store the color value.

• Step 3 (Flow Element): The Flow moves to a standard Update Records element to save the choice to the Salesforce database.

• Step 4 (Screen): The user lands on a "Summary" screen showing their updated product configuration.

Result: By using the interaction to auto-advance, you eliminate unnecessary clicks, making the Flow feel like a modern web application.

---

Specifications

General Attributes

Name	Type	Description
Label	String	The text label displayed for the input.
Value	String	The current value of the selected color (e.g., #FFFFFF). Use this to set a default value or store the user's output.
Type	String	Determines the display mode. Can be set to base (standard input) or custom (button menu).
Variant	String	Changes the layout appearance. Options: standard, label-inline, label-hidden, or label-stacked.
Hide Color Input	Boolean	If enabled, the text input field (for Hex/RGB codes) is hidden, forcing users to pick from the visual tools only.
Inline	Boolean	If enabled, the color palette is displayed directly on the screen (inline) rather than inside a popover or dropdown.
Opacity	Boolean	If enabled, an alpha transparency slider is added to the picker.
Field Level Help	String	Help text (tooltip) explaining the purpose of the field.
Required	Boolean	If enabled, the user must select a color before the flow can proceed.
Disabled	Boolean	If enabled, the component is visible but non-interactive.
Read Only	Boolean	If enabled, the value is displayed but cannot be changed.

Palette Configuration

Name	Type	Description
Colors	Array	An array of colors to display in the default palette. This can be a simple list of strings (Hex codes) or specific color objects (used to create grouped sections of colors).
Number of Columns	Integer	Defines the number of columns in the swatch grid. Defaults to 7 (unless Inline is used).
Tile Height	String	The height of individual color swatches (e.g., 30px).
Tile Width	String	The width of individual color swatches (e.g., 30px).
Hide Outline	Boolean	If enabled, the outline usually shown around a selected swatch is removed.
Show Checkmark	Boolean	If enabled, a checkmark icon appears on top of the selected color swatch.

Button Menu Configuration

(Only applicable when Type is set to menu/button mode)

Name	Type	Description
Label	String	Optional text to display on the button itself.
Icon Name	String	The Lightning Design System icon name (e.g., utility:palette) to display on the button.
Variant	String	Visual style of the button. Options: bare, container, border, border-filled, etc.
Alignment	String	Alignment of the dropdown menu relative to the button (e.g., left, right, center).
Nubbin	Boolean	If enabled, displays a small triangular pointer (nubbin) connecting the dropdown menu to the button.