Represents a predefined range of colors for easier selection.
The ColorPalette
provides the users with a range of predefined colors.
You can customize them with the use of the colors
property. You can specify a defaultColor
and display a "Default color" button for the user to choose directly. You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.
The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.
The control can be embedded in a form or can be opened as popover (by use of thin wrapper control sap.m.ColorPalettePopover
).
Documentation links:
Note: The application developers should add dependency to sap.ui.unified
library
on application level to ensure that the library is loaded before the module dependencies will be required.
The sap.ui.unified.ColorPicker is used internally only if the ColorPicker
is opened (not used for the initial rendering). If the sap.ui.unified
library is not loaded
before the ColorPicker
is opened, it will be loaded upon opening. This could lead to CSP compliance
issues and adds an additional waiting time when the ColorPicker
is opened for the first time.
To prevent this, apps using the ColorPalette
should also load the sap.ui.unified
library in advance.
Constructor for a new ColorPalette
.
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.m.ColorPalette(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 |
---|---|---|---|
colors | sap.ui.core.CSSColor[] | gold, darkorange, indianred, darkmagenta, cornflowerblue, deepskyblue, darkcyan, olivedrab, darkslategray, azure, white, lightgray, darkgray, dimgray, black | Defines the List of colors displayed in the palette. Minimum is 2 colors, maximum is 15 colors. Visibility: public |
Default Aggregation:
Name | Cardinality | Type | Description |
---|---|---|---|
_defaultColorButton | 0..1 | sap.m.Button | |
_moreColorsButton | 0..1 | sap.m.Button |
Event | Description |
---|---|
colorSelect |
Fired when the user selects a color. |
liveChange |
Fired when the value is changed by user interaction in the internal ColorPicker |
Fired when the user selects a color.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
value | sap.ui.core.CSSColor |
The color that is returned when user chooses the "Default color" button. |
defaultAction | boolean |
Denotes if the color has been chosen by selecting the "Default Color" button (true or false) |
Fired when the value is changed by user interaction in the internal ColorPicker
Since: 1.85.
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 |
---|---|
attachColorSelect |
Attaches event handler When called, the context of the event handler (its Fired when the user selects a color. |
attachLiveChange |
Attaches event handler When called, the context of the event handler (its Fired when the value is changed by user interaction in the internal ColorPicker |
detachColorSelect |
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.m.ColorPalette.extend |
Creates a new subclass of class sap.m.ColorPalette with name
|
fireColorSelect |
Fires event colorSelect to attached listeners. |
fireLiveChange |
Fires event liveChange to attached listeners. |
getColors |
Gets current value of property colors. Defines the List of colors displayed in the palette. Minimum is 2 colors, maximum is 15 colors. Default value is |
sap.m.ColorPalette.getMetadata |
Returns a metadata object for class sap.m.ColorPalette. |
setColorPickerSelectedColor |
Sets a selected color for the ColorPicker control. |
setColors |
Sets a new value for property colors. Defines the List of colors displayed in the palette. Minimum is 2 colors, maximum is 15 colors. When called with a value of Default value is |
Attaches event handler fnFunction
to the colorSelect event of this sap.m.ColorPalette
.
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.m.ColorPalette
itself.
Fired when the user selects a color.
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.m.ColorPalette
.
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.m.ColorPalette
itself.
Fired when the value is changed by user interaction in the internal ColorPicker
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 colorSelect event of this sap.m.ColorPalette
.
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.m.ColorPalette
.
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.m.ColorPalette 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 colorSelect to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
value | sap.ui.core.CSSColor |
The color that is returned when user chooses the "Default color" button. |
|
defaultAction | boolean |
Denotes if the color has been chosen by selecting the "Default Color" button (true or false) |
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 colors.
Defines the List of colors displayed in the palette. Minimum is 2 colors, maximum is 15 colors.
Default value is ["gold", "darkorange", "indianred", "darkmagenta", "cornflowerblue", "deepskyblue", "darkcyan", "olivedrab", "darkslategray", "azure", "white", "lightgray", "darkgray", "dimgray", "black"]
.
Sets a selected color for the ColorPicker control.
Param | Type | DefaultValue | Description |
---|---|---|---|
color | sap.ui.core.CSSColor |
the selected color |
Sets a new value for property colors.
Defines the List of colors displayed in the palette. Minimum is 2 colors, maximum is 15 colors.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is ["gold", "darkorange", "indianred", "darkmagenta", "cornflowerblue", "deepskyblue", "darkcyan", "olivedrab", "darkslategray", "azure", "white", "lightgray", "darkgray", "dimgray", "black"]
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sColors | sap.ui.core.CSSColor[] | ["gold", "darkorange", "indianred", "darkmagenta", "cornflowerblue", "deepskyblue", "darkcyan", "olivedrab", "darkslategray", "azure", "white", "lightgray", "darkgray", "dimgray", "black"] |
New value for property |