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

Why is this important for a Salesforce Admin?

Unlike standard Salesforce Flow components that typically wait for the user to click "Next" to process data, the Avonni Color Picker is event-driven.

Using the Interactions Panel, you can trigger logic immediately when the user selects a color. This allows you to build dynamic, single-screen applications without constant page reloads.

Available Actions

Here are the most common ways to use the Interactions Panel with the Color Picker:

• Flow Navigation (Auto-Advance)

  • Action: Flow Navigation (Next)

  • Why use it: Create a seamless experience where selecting a color automatically moves the user to the next screen. This removes the need for a "Next" button.

  • Note: Ensure you map the Value of the Color Picker to a flow variable or use the component's output directly in the next element.

• Open Flow Dialog (Modals)

  • Action: Open Flow Dialog

  • Why use it: Launch a sub-flow in a modal window without leaving the current screen.

  • Power User Tip: You can pass the selected Value (Color Code) from the picker as an Input Variable into the sub-flow. (e.g., Selecting "Red" opens a modal showing available "Red" inventory).

• Real-Time Feedback

  • Action: Show Toast

  • Why use it: Display an immediate success or information message (e.g., "Color preference saved!") to confirm the selection visually.

---

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.