class sap.ui.unified.ColorPicker

Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/unified/ColorPicker
Application Component: CA-UI5-CTR

Enables the user to select a color. The color can be defined using HEX, RGB, or HSV values or a CSS color name.

Note: Keep in mind that this control needs either sap.m or sap.ui.commons library to be loaded in order to work as it depends on controls available in one or the other library.


Constructor

Constructor for a new ColorPicker.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.ui.unified.ColorPicker(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control


Properties

Name Type Default Value Description
colorString string

Determines the input parameter that can be a string of type HEX, RGB, HSV, or a CSS color name:

  • HEX - #FFFFFF
  • RGB - rgb(255,255,255)
  • HSV - hsv(360,100,100)
  • CSS - red
Note: The output parameter is an RGB string of the current color.

Since: 1.48.0.

Visibility: public
displayMode sap.ui.unified.ColorPickerDisplayMode Default

Determines the display mode of the ColorPicker among three types - Default, Large and Simplified

Since: 1.58.

Visibility: public
mode sap.ui.unified.ColorPickerMode HSV

Determines the color representation mode the ColorPicker works with - Hue, Saturation, and Value (HSV) or Hue, Saturation, and Lightness (HSL).

Note: The ColorPickerMode.HSV is set by default. For color composing with alpha values, please set the mode to ColorPickerMode.HSL

Since: 1.48.0.

Visibility: public

Aggregations

Default Aggregation:

Name Cardinality Type Description
_grid 0..1 sap.ui.layout.Grid

Holds the control layout.

Since: 1.48.0.

_invisibleTexts 0..n sap.ui.core.InvisibleText

Holds the control invisible texts.

Since: 1.48.0.

_oAlphaField 0..1 sap.ui.core.Control
_oAlphaField2 0..1 sap.ui.core.Control
_oAlphaSlider 0..1 sap.ui.core.Control
_oBlueField 0..1 sap.ui.core.Control
_oButton 0..1 sap.ui.core.Control
_oCPBox 0..1 sap.ui.core.Control
_oGreenField 0..1 sap.ui.core.Control
_oHexField 0..1 sap.ui.core.Control
_oHueField 0..1 sap.ui.core.Control
_oLitField 0..1 sap.ui.core.Control
_oRGBorHSLRBUnifiedGroup 0..1 sap.ui.core.Control
_oRedField 0..1 sap.ui.core.Control
_oSatField 0..1 sap.ui.core.Control
_oSlider 0..1 sap.ui.core.Control
_oValField 0..1 sap.ui.core.Control

Events Overview

Event Description
change

Fired when the value is changed by user action.

Note: When the user action is mouse dragging, the change event fires on the mouseup event.

Since: 1.48.0.

liveChange

Fired when the value is changed during the mouse move.

Note: When the user action is mouse move, the liveChange event is fired during the mousedown event.

Since: 1.48.0.

change

Fired when the value is changed by user action.

Note: When the user action is mouse dragging, the change event fires on the mouseup event.

Since: 1.48.0.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
r int

Parameter containing the RED value (0-255).

g int

Parameter containing the GREEN value (0-255).

b int

Parameter containing the BLUE value (0-255).

h int

Parameter containing the HUE value (0-360).

s int

Parameter containing the SATURATION value (0-100).

v int

Parameter containing the VALUE value (0-100).

l int

Parameter containing the LIGHTNESS value (0-100).

hex string

Parameter containing the Hexadecimal string (#FFFFFF).

alpha string

Parameter containing the alpha value (transparency).

liveChange

Fired when the value is changed during the mouse move.

Note: When the user action is mouse move, the liveChange event is fired during the mousedown event.

Since: 1.48.0.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
r int

Parameter containing the RED value (0-255).

g int

Parameter containing the GREEN value (0-255).

b int

Parameter containing the BLUE value (0-255).

h int

Parameter containing the HUE value (0-360).

s int

Parameter containing the SATURATION value (0-100).

v int

Parameter containing the VALUE value (0-100).

l int

Parameter containing the LIGHTNESS value (0-100).

hex string

Parameter containing the Hexadecimal string (#FFFFFF).

alpha string

Parameter containing the alpha value (transparency).


Methods Overview

Method Description
attachChange

Attaches event handler fnFunction to the change event of this sap.ui.unified.ColorPicker.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.unified.ColorPicker itself.

Fired when the value is changed by user action.

Note: When the user action is mouse dragging, the change event fires on the mouseup event.

attachLiveChange

Attaches event handler fnFunction to the liveChange event of this sap.ui.unified.ColorPicker.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.unified.ColorPicker itself.

Fired when the value is changed during the mouse move.

Note: When the user action is mouse move, the liveChange event is fired during the mousedown event.

detachChange

Detaches event handler fnFunction from the change event of this sap.ui.unified.ColorPicker.

The passed function and listener object must match the ones used for event registration.

detachLiveChange

Detaches event handler fnFunction from the liveChange event of this sap.ui.unified.ColorPicker.

The passed function and listener object must match the ones used for event registration.

sap.ui.unified.ColorPicker.extend

Creates a new subclass of class sap.ui.unified.ColorPicker with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

fireChange

Fires event change to attached listeners.

fireLiveChange

Fires event liveChange to attached listeners.

getColorString

Gets current value of property colorString.

Determines the input parameter that can be a string of type HEX, RGB, HSV, or a CSS color name:

  • HEX - #FFFFFF
  • RGB - rgb(255,255,255)
  • HSV - hsv(360,100,100)
  • CSS - red
Note: The output parameter is an RGB string of the current color.

getDisplayMode

Gets current value of property displayMode.

Determines the display mode of the ColorPicker among three types - Default, Large and Simplified

Default value is Default.

sap.ui.unified.ColorPicker.getMetadata

Returns a metadata object for class sap.ui.unified.ColorPicker.

getMode

Gets current value of property mode.

Determines the color representation mode the ColorPicker works with - Hue, Saturation, and Value (HSV) or Hue, Saturation, and Lightness (HSL).

Note: The ColorPickerMode.HSV is set by default. For color composing with alpha values, please set the mode to ColorPickerMode.HSL

Default value is HSV.

getRGB

Gets current RGB values.

isColor

Checks the validity of the CSS color string.

setColorString

Sets a new value for property colorString.

Determines the input parameter that can be a string of type HEX, RGB, HSV, or a CSS color name:

  • HEX - #FFFFFF
  • RGB - rgb(255,255,255)
  • HSV - hsv(360,100,100)
  • CSS - red
Note: The output parameter is an RGB string of the current color.

When called with a value of null or undefined, the default value of the property will be restored.

setDisplayMode

Setter for displayMode property.

setMode

Setter for mode property.

attachChange

Attaches event handler fnFunction to the change event of this sap.ui.unified.ColorPicker.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.unified.ColorPicker itself.

Fired when the value is changed by user action.

Note: When the user action is mouse dragging, the change event fires on the mouseup event.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.unified.ColorPicker itself

attachLiveChange

Attaches event handler fnFunction to the liveChange event of this sap.ui.unified.ColorPicker.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.unified.ColorPicker itself.

Fired when the value is changed during the mouse move.

Note: When the user action is mouse move, the liveChange event is fired during the mousedown event.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.unified.ColorPicker itself

detachChange

Detaches event handler fnFunction from the change event of this sap.ui.unified.ColorPicker.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachLiveChange

Detaches event handler fnFunction from the liveChange event of this sap.ui.unified.ColorPicker.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.ui.unified.ColorPicker.extend

Creates a new subclass of class sap.ui.unified.ColorPicker with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireChange

Fires event change to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

r int

Parameter containing the RED value (0-255).

g int

Parameter containing the GREEN value (0-255).

b int

Parameter containing the BLUE value (0-255).

h int

Parameter containing the HUE value (0-360).

s int

Parameter containing the SATURATION value (0-100).

v int

Parameter containing the VALUE value (0-100).

l int

Parameter containing the LIGHTNESS value (0-100).

hex string

Parameter containing the Hexadecimal string (#FFFFFF).

alpha string

Parameter containing the alpha value (transparency).

fireLiveChange

Fires event liveChange to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

r int

Parameter containing the RED value (0-255).

g int

Parameter containing the GREEN value (0-255).

b int

Parameter containing the BLUE value (0-255).

h int

Parameter containing the HUE value (0-360).

s int

Parameter containing the SATURATION value (0-100).

v int

Parameter containing the VALUE value (0-100).

l int

Parameter containing the LIGHTNESS value (0-100).

hex string

Parameter containing the Hexadecimal string (#FFFFFF).

alpha string

Parameter containing the alpha value (transparency).

getColorString

Gets current value of property colorString.

Determines the input parameter that can be a string of type HEX, RGB, HSV, or a CSS color name:

Note: The output parameter is an RGB string of the current color.

getDisplayMode

Gets current value of property displayMode.

Determines the display mode of the ColorPicker among three types - Default, Large and Simplified

Default value is Default.

sap.ui.unified.ColorPicker.getMetadata

Returns a metadata object for class sap.ui.unified.ColorPicker.

getMode

Gets current value of property mode.

Determines the color representation mode the ColorPicker works with - Hue, Saturation, and Value (HSV) or Hue, Saturation, and Lightness (HSL).

Note: The ColorPickerMode.HSV is set by default. For color composing with alpha values, please set the mode to ColorPickerMode.HSL

Default value is HSV.

getRGB

Gets current RGB values.

isColor

Checks the validity of the CSS color string.

Param Type DefaultValue Description
sColorString string

CSS color string to be validated

setColorString

Sets a new value for property colorString.

Determines the input parameter that can be a string of type HEX, RGB, HSV, or a CSS color name:

Note: The output parameter is an RGB string of the current color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sColorString string

New value for property colorString

setDisplayMode

Setter for displayMode property.

Param Type DefaultValue Description
sDisplayMode sap.ui.unified.ColorPickerDisplayMode

control displayMode enum

setMode

Setter for mode property.

Param Type DefaultValue Description
sMode sap.ui.unified.ColorPickerMode

control mode enum

bSuppressInvalidate boolean

should control invalidation be suppressed