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 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 |
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:
Since: 1.48.0.Visibility: public |
|
displayMode | sap.ui.unified.ColorPickerDisplayMode | Default | Determines the display mode of the |
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 |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
_grid | 0..1 | sap.ui.layout.Grid |
Holds the control layout. |
_invisibleTexts | 0..n | sap.ui.core.InvisibleText |
Holds the control invisible texts. |
_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 |
Event | Description |
---|---|
change |
Fired when the value is changed by user action. Note: When the user action is mouse dragging, the |
liveChange |
Fired when the value is changed during the mouse move. Note: When the user action is mouse move, the |
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). |
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). |
Method | Description |
---|---|
attachChange |
Attaches event handler When called, the context of the event handler (its Fired when the value is changed by user action. Note: When the user action is mouse dragging, the |
attachLiveChange |
Attaches event handler When called, the context of the event handler (its Fired when the value is changed during the mouse move. Note: When the user action is mouse move, the |
detachChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachLiveChange |
Detaches event handler 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
|
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:
|
getDisplayMode |
Gets current value of property displayMode. Determines the display mode of the Default value is |
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 Default value is |
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:
When called with a value of |
setDisplayMode |
Setter for |
setMode |
Setter for |
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 |
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 |
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 |
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 |
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 |
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). |
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). |
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:
Gets current value of property displayMode.
Determines the display mode of the ColorPicker
among three types - Default, Large and Simplified
Default value is Default
.
Returns a metadata object for class sap.ui.unified.ColorPicker.
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
.
Checks the validity of the CSS color string.
Param | Type | DefaultValue | Description |
---|---|---|---|
sColorString | string |
CSS color string to be validated |
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:
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 |
Setter for displayMode
property.
Param | Type | DefaultValue | Description |
---|---|---|---|
sDisplayMode | sap.ui.unified.ColorPickerDisplayMode |
control displayMode enum |
Setter for mode
property.
Param | Type | DefaultValue | Description |
---|---|---|---|
sMode | sap.ui.unified.ColorPickerMode |
control mode enum |
|
bSuppressInvalidate | boolean |
should control invalidation be suppressed |