ColorPicker (ALPHA)

BusinessEnterprise

Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The ColorPicker widget lets users pick a color. Users can drag in the color area or type a hex value. The widget stores the color as a hex string, for example #2E3D49. Use it to let users choose a brand color, a theme color, or a color tag for a record.

ColorPicker widget

Widget type: WDS_COLOR_PICKER_WIDGET

Content properties

These properties appear in the Content tab of the property pane.

Data

Default Color string

Sets the color shown when the widget loads. Enter a hex color in one of these forms: #rgb, #rgba, #rrggbb, or #rrggbbaa. Other formats show an error. If you change this value, the widget's color updates to match. Default: empty (no color).

Example:

#2E3D49

Allow alpha boolean

Adds a transparency (alpha) slider. When on, the widget stores colors as #rrggbbaa. When off, the widget reads colors as #rrggbb and drops any alpha digits. Turning it back on restores the stored alpha digits. Default: off.

Label

Text string

Sets the label shown above the color picker. Default: Label.

Validations

Required boolean

Makes picking a color mandatory. When on and no color is set, the widget is invalid and shows the message "Please select a valid color" after the user interacts with it. Default: off.

General

Tooltip string

Shows help text or details next to the label.

Visible boolean

Controls whether the widget is visible when the app runs. Default: on.

Disabled boolean

Stops users from changing the color. Default: off.

Animate loading boolean

Shows a loading animation while the widget's data loads. Default: on.

Reference properties

Reference properties let you read the widget's state in bindings and code, for example {{ColorPicker1.isVisible}}. You cannot set them directly.

isVisible boolean

Shows whether the widget is visible.

Example:

{{ColorPicker1.isVisible}}

selectedColor string

Holds the selected color as a hex string, #rrggbb or #rrggbbaa. It is an empty string when no color is set or when the stored value is not a valid hex color.

Example:

{{ColorPicker1.selectedColor}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{ColorPicker1.isDisabled}}

Methods

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise

Shows or hides the widget.

Example:

ColorPicker1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns the disabled state on or off.

Example:

ColorPicker1.setDisabled(false)

Events

onColorChange

Runs when the user finishes dragging to a new color, or commits a hex value in the input. It does not run on every step of a drag.