Aug 12 • Great Content to Share
Color Picker Component
I created a component to have a color picker with the web safe colors in it. It has a drop down menu selection to filter the color groups by. In the header there is also a gallery showing the selected colors that have been selected. Here is the code:
ComponentDefinitions:
comp_ColorPicker:
DefinitionType: CanvasComponent
AllowCustomization: true
CustomProperties:
CPBackgroundColor:
PropertyKind: Input
DisplayName: CP Background Color
Description: CP Background Color
DataType: Text
Default: ="#ffffff"
CPBorderRadius:
PropertyKind: Input
DisplayName: CP Border Radius
Description: CP Border Radius
DataType: Number
Default: =10
CPDropShadow:
PropertyKind: Input
DisplayName: CP Drop Shadow
Description: CP Drop Shadow
DataType: Text
Default: =DropShadow.Regular
CPFont:
PropertyKind: Input
DisplayName: CP Font
Description: CP Font
DataType: Text
Default: =Font.Arial
CPFontSize:
PropertyKind: Input
DisplayName: CP Font Size
Description: CP Font Size
DataType: Number
Default: =18
CPFontWeight:
PropertyKind: Input
DisplayName: CP Font Weight
Description: CP Font Weight
DataType: Text
Default: =FontWeight.Semibold
CPForegroundColor:
PropertyKind: Input
DisplayName: CP Foreground Color
Description: CP Foreground Color
DataType: Text
Default: ="#000000"
CPGap:
PropertyKind: Input
DisplayName: CP Gap
Description: CP Gap
DataType: Number
Default: =10
CPLabelText:
PropertyKind: Input
DisplayName: CP Label Text
Description: CP Label Text
DataType: Text
Default: ="Color Picker"
CPPadding:
PropertyKind: Input
DisplayName: CP Padding
Description: CP Padding
DataType: Number
Default: =10
ColorPickerChosenColors:
PropertyKind: Output
DisplayName: Color Picker Chosen Colors
Description: A custom property
DataType: Table
ColorsTable:
PropertyKind: Input
DisplayName: Colors Table
Description: Colors Table
DataType: Table
Default: |-
=Table(
{ColorName: "aliceblue",HexCode: "#F0F8FF",RGBCode: "RGBA(240,248,255,1)",ColorGroup: "White"},
{ColorName:"antiquewhite",HexCode:"#FAEBD7",RGBCode:"RGBA(250,235,215,1)",ColorGroup:"White"},
{ColorName:"aqua",HexCode:"#00FFFF",RGBCode:"RGBA(0,255,255,1)",ColorGroup:"Cyan"},
{ColorName:"aquamarine",HexCode:"#7FFFD4",RGBCode:"RGBA(127,255,212,1)",ColorGroup:"Cyan"},
{ColorName:"azure",HexCode:"#F0FFFF",RGBCode:"RGBA(240,255,255,1)",ColorGroup:"White"},
{ColorName:"beige",HexCode:"#F5F5DC",RGBCode:"RGBA(245,245,220,1)",ColorGroup:"White"},
{ColorName:"bisque",HexCode:"#FFE4C4",RGBCode:"RGBA(255,228,196,1)",ColorGroup:"Brown"},
{ColorName:"black",HexCode:"#000000",RGBCode:"RGBA(0,0,0,1)",ColorGroup:"Gray"},
{ColorName:"blanchedalmond",HexCode:"#FFEBCD",RGBCode:"RGBA(255,235,205,1)",ColorGroup:"Brown"},
{ColorName:"blue",HexCode:"#0000FF",RGBCode:"RGBA(0,0,255,1)",ColorGroup:"Blue"},
{ColorName:"blueviolet",HexCode:"#8A2BE2",RGBCode:"RGBA(138,43,226,1)",ColorGroup:"Purple"},
{ColorName:"brown",HexCode:"#A52A2A",RGBCode:"RGBA(165,42,42,1)",ColorGroup:"Brown"},
{ColorName:"burlywood",HexCode:"#DEB887",RGBCode:"RGBA(222,184,135,1)",ColorGroup:"Brown"},
{ColorName:"cadetblue",HexCode:"#5F9EA0",RGBCode:"RGBA(95,158,160,1)",ColorGroup:"Cyan"},
{ColorName:"chartreuse",HexCode:"#7FFF00",RGBCode:"RGBA(127,255,0,1)",ColorGroup:"Green"},
{ColorName:"chocolate",HexCode:"#D2691E",RGBCode:"RGBA(210,105,30,1)",ColorGroup:"Brown"},
{ColorName:"coral",HexCode:"#FF7F50",RGBCode:"RGBA(255,127,80,1)",ColorGroup:"Orange"},
{ColorName:"cornflowerblue",HexCode:"#6495ED",RGBCode:"RGBA(100,149,237,1)",ColorGroup:"Blue"},
{ColorName:"cornsilk",HexCode:"#FFF8DC",RGBCode:"RGBA(255,248,220,1)",ColorGroup:"Brown"},
{ColorName:"crimson",HexCode:"#DC143C",RGBCode:"RGBA(220,20,60,1)",ColorGroup:"Red"},
{ColorName:"cyan",HexCode:"#00FFFF",RGBCode:"RGBA(0,255,255,1)",ColorGroup:"Cyan"},
{ColorName:"darkblue",HexCode:"#00008B",RGBCode:"RGBA(0,0,139,1)",ColorGroup:"Blue"},
{ColorName:"darkcyan",HexCode:"#008B8B",RGBCode:"RGBA(0,139,139,1)",ColorGroup:"Cyan"},
{ColorName:"darkgray",HexCode:"#A9A9A9",RGBCode:"RGBA(169,169,169,1)",ColorGroup:"Gray"},
{ColorName:"darkgreen",HexCode:"#006400",RGBCode:"RGBA(0,100,0,1)",ColorGroup:"Green"},
{ColorName:"darkkhaki",HexCode:"#BDB76B",RGBCode:"RGBA(189,183,107,1)",ColorGroup:"Yellow"},
{ColorName:"darkmagenta",HexCode:"#8B008B",RGBCode:"RGBA(139,0,139,1)",ColorGroup:"Purple"},
{ColorName:"darkolivegreen",HexCode:"#556B2F",RGBCode:"RGBA(85,107,47,1)",ColorGroup:"Green"},
{ColorName:"darkorange",HexCode:"#FF8C00",RGBCode:"RGBA(255,140,0,1)",ColorGroup:"Orange"},
{ColorName:"darkorchid",HexCode:"#9932CC",RGBCode:"RGBA(153,50,204,1)",ColorGroup:"Purple"},
{ColorName:"darkred",HexCode:"#8B0000",RGBCode:"RGBA(139,0,0,1)",ColorGroup:"Red"},
{ColorName:"darksalmon",HexCode:"#E9967A",RGBCode:"RGBA(233,150,122,1)",ColorGroup:"Red"},
{ColorName:"darkseagreen",HexCode:"#8FBC8F",RGBCode:"RGBA(143,188,143,1)",ColorGroup:"Green"},
{ColorName:"darkslateblue",HexCode:"#483D8B",RGBCode:"RGBA(72,61,139,1)",ColorGroup:"Blue"},
{ColorName:"darkslategray",HexCode:"#2F4F4F",RGBCode:"RGBA(47,79,79,1)",ColorGroup:"Gray"},
{ColorName:"darkturquoise",HexCode:"#00CED1",RGBCode:"RGBA(0,206,209,1)",ColorGroup:"Cyan"},
{ColorName:"darkviolet",HexCode:"#9400D3",RGBCode:"RGBA(148,0,211,1)",ColorGroup:"Purple"},
{ColorName:"deeppink",HexCode:"#FF1493",RGBCode:"RGBA(255,20,147,1)",ColorGroup:"Pink"},
{ColorName:"deepskyblue",HexCode:"#00BFFF",RGBCode:"RGBA(0,191,255,1)",ColorGroup:"Blue"},
{ColorName:"dimgray",HexCode:"#696969",RGBCode:"RGBA(105,105,105,1)",ColorGroup:"Gray"},
{ColorName:"dodgerblue",HexCode:"#1E90FF",RGBCode:"RGBA(30,144,255,1)",ColorGroup:"Blue"},
{ColorName:"firebrick",HexCode:"#B22222",RGBCode:"RGBA(178,34,34,1)",ColorGroup:"Red"},
{ColorName:"floralwhite",HexCode:"#FFFAF0",RGBCode:"RGBA(255,250,240,1)",ColorGroup:"White"},
{ColorName:"forestgreen",HexCode:"#228B22",RGBCode:"RGBA(34,139,34,1)",ColorGroup:"Green"},
{ColorName:"fuchsia",HexCode:"#FF00FF",RGBCode:"RGBA(255,0,255,1)",ColorGroup:"Purple"},
{ColorName:"gainsboro",HexCode:"#DCDCDC",RGBCode:"RGBA(220,220,220,1)",ColorGroup:"Gray"},
{ColorName:"ghostwhite",HexCode:"#F8F8FF",RGBCode:"RGBA(248,248,255,1)",ColorGroup:"White"},
{ColorName:"gold",HexCode:"#FFD700",RGBCode:"RGBA(255,215,0,1)",ColorGroup:"Orange"},
{ColorName:"goldenrod",HexCode:"#DAA520",RGBCode:"RGBA(218,165,32,1)",ColorGroup:"Brown"},
{ColorName:"gray",HexCode:"#808080",RGBCode:"RGBA(128,128,128,1)",ColorGroup:"Gray"},
{ColorName:"green",HexCode:"#008000",RGBCode:"RGBA(0,128,0,1)",ColorGroup:"Green"},
{ColorName:"greenyellow",HexCode:"#ADFF2F",RGBCode:"RGBA(173,255,47,1)",ColorGroup:"Green"},
{ColorName:"honeydew",HexCode:"#F0FFF0",RGBCode:"RGBA(240,255,240,1)",ColorGroup:"White"},
{ColorName:"hotpink",HexCode:"#FF69B4",RGBCode:"RGBA(255,105,180,1)",ColorGroup:"Pink"},
{ColorName:"indianred",HexCode:"#CD5C5C",RGBCode:"RGBA(205,92,92,1)",ColorGroup:"Red"},
{ColorName:"indigo",HexCode:"#4B0082",RGBCode:"RGBA(75,0,130,1)",ColorGroup:"Purple"},
{ColorName:"ivory",HexCode:"#FFFFF0",RGBCode:"RGBA(255,255,240,1)",ColorGroup:"White"},
{ColorName:"khaki",HexCode:"#F0E68C",RGBCode:"RGBA(240,230,140,1)",ColorGroup:"Yellow"},
{ColorName:"lavender",HexCode:"#E6E6FA",RGBCode:"RGBA(230,230,250,1)",ColorGroup:"Purple"},
{ColorName:"lavenderblush",HexCode:"#FFF0F5",RGBCode:"RGBA(255,240,245,1)",ColorGroup:"White"},
{ColorName:"lawngreen",HexCode:"#7CFC00",RGBCode:"RGBA(124,252,0,1)",ColorGroup:"Green"},
{ColorName:"lemonchiffon",HexCode:"#FFFACD",RGBCode:"RGBA(255,250,205,1)",ColorGroup:"Yellow"},
{ColorName:"lightblue",HexCode:"#ADD8E6",RGBCode:"RGBA(173,216,230,1)",ColorGroup:"Blue"},
{ColorName:"lightcoral",HexCode:"#F08080",RGBCode:"RGBA(240,128,128,1)",ColorGroup:"Red"},
{ColorName:"lightcyan",HexCode:"#E0FFFF",RGBCode:"RGBA(224,255,255,1)",ColorGroup:"Cyan"},
{ColorName:"lightgoldenrodyellow",HexCode:"#FAFAD2",RGBCode:"RGBA(250,250,210,1)",ColorGroup:"Yellow"},
{ColorName:"lightgray",HexCode:"#D3D3D3",RGBCode:"RGBA(211,211,211,1)",ColorGroup:"Gray"},
{ColorName:"lightgreen",HexCode:"#90EE90",RGBCode:"RGBA(144,238,144,1)",ColorGroup:"Green"},
{ColorName:"lightpink",HexCode:"#FFB6C1",RGBCode:"RGBA(255,182,193,1)",ColorGroup:"Pink"},
{ColorName:"lightsalmon",HexCode:"#FFA07A",RGBCode:"RGBA(255,160,122,1)",ColorGroup:"Red"},
{ColorName:"lightseagreen",HexCode:"#20B2AA",RGBCode:"RGBA(32,178,170,1)",ColorGroup:"Cyan"},
{ColorName:"lightskyblue",HexCode:"#87CEFA",RGBCode:"RGBA(135,206,250,1)",ColorGroup:"Blue"},
{ColorName:"lightslategray",HexCode:"#778899",RGBCode:"RGBA(119,136,153,1)",ColorGroup:"Gray"},
{ColorName:"lightsteelblue",HexCode:"#B0C4DE",RGBCode:"RGBA(176,196,222,1)",ColorGroup:"Blue"},
{ColorName:"lightyellow",HexCode:"#FFFFE0",RGBCode:"RGBA(255,255,224,1)",ColorGroup:"Yellow"},
{ColorName:"lime",HexCode:"#00FF00",RGBCode:"RGBA(0,255,0,1)",ColorGroup:"Green"},
{ColorName:"limegreen",HexCode:"#32CD32",RGBCode:"RGBA(50,205,50,1)",ColorGroup:"Green"},
{ColorName:"linen",HexCode:"#FAF0E6",RGBCode:"RGBA(250,240,230,1)",ColorGroup:"White"},
{ColorName:"magenta",HexCode:"#FF00FF",RGBCode:"RGBA(255,0,255,1)",ColorGroup:"Purple"},
{ColorName:"maroon",HexCode:"#800000",RGBCode:"RGBA(128,0,0,1)",ColorGroup:"Brown"},
{ColorName:"mediumaquamarine",HexCode:"#66CDAA",RGBCode:"RGBA(102,205,170,1)",ColorGroup:"Cyan"},
{ColorName:"mediumblue",HexCode:"#0000CD",RGBCode:"RGBA(0,0,205,1)",ColorGroup:"Blue"},
{ColorName:"mediumorchid",HexCode:"#BA55D3",RGBCode:"RGBA(186,85,211,1)",ColorGroup:"Purple"},
{ColorName:"mediumpurple",HexCode:"#9370DB",RGBCode:"RGBA(147,112,219,1)",ColorGroup:"Purple"},
{ColorName:"mediumseagreen",HexCode:"#3CB371",RGBCode:"RGBA(60,179,113,1)",ColorGroup:"Green"},
{ColorName:"mediumslateblue",HexCode:"#7B68EE",RGBCode:"RGBA(123,104,238,1)",ColorGroup:"Blue"},
{ColorName:"mediumspringgreen",HexCode:"#00FA9A",RGBCode:"RGBA(0,250,154,1)",ColorGroup:"Green"},
{ColorName:"mediumturquoise",HexCode:"#48D1CC",RGBCode:"RGBA(72,209,204,1)",ColorGroup:"Cyan"},
{ColorName:"mediumvioletred",HexCode:"#C71585",RGBCode:"RGBA(199,21,133,1)",ColorGroup:"Pink"},
{ColorName:"midnightblue",HexCode:"#191970",RGBCode:"RGBA(25,25,112,1)",ColorGroup:"Blue"},
{ColorName:"mintcream",HexCode:"#F5FFFA",RGBCode:"RGBA(245,255,250,1)",ColorGroup:"White"},
{ColorName:"mistyrose",HexCode:"#FFE4E1",RGBCode:"RGBA(255,228,225,1)",ColorGroup:"White"},
{ColorName:"moccasin",HexCode:"#FFE4B5",RGBCode:"RGBA(255,228,181,1)",ColorGroup:"Yellow"},
{ColorName:"navajowhite",HexCode:"#FFDEAD",RGBCode:"RGBA(255,222,173,1)",ColorGroup:"Brown"},
{ColorName:"navy",HexCode:"#000080",RGBCode:"RGBA(0,0,128,1)",ColorGroup:"Blue"},
{ColorName:"oldlace",HexCode:"#FDF5E6",RGBCode:"RGBA(253,245,230,1)",ColorGroup:"White"},
{ColorName:"olive",HexCode:"#808000",RGBCode:"RGBA(128,128,0,1)",ColorGroup:"Green"},
{ColorName:"olivedrab",HexCode:"#6B8E23",RGBCode:"RGBA(107,142,35,1)",ColorGroup:"Green"},
{ColorName:"orange",HexCode:"#FFA500",RGBCode:"RGBA(255,165,0,1)",ColorGroup:"Orange"},
{ColorName:"orangered",HexCode:"#FF4500",RGBCode:"RGBA(255,69,0,1)",ColorGroup:"Orange"},
{ColorName:"orchid",HexCode:"#DA70D6",RGBCode:"RGBA(218,112,214,1)",ColorGroup:"Purple"},
{ColorName:"palegoldenrod",HexCode:"#EEE8AA",RGBCode:"RGBA(238,232,170,1)",ColorGroup:"Yellow"},
{ColorName:"palegreen",HexCode:"#98FB98",RGBCode:"RGBA(152,251,152,1)",ColorGroup:"Green"},
{ColorName:"paleturquoise",HexCode:"#AFEEEE",RGBCode:"RGBA(175,238,238,1)",ColorGroup:"Cyan"},
{ColorName:"palevioletred",HexCode:"#DB7093",RGBCode:"RGBA(219,112,147,1)",ColorGroup:"Pink"},
{ColorName:"papayawhip",HexCode:"#FFEFD5",RGBCode:"RGBA(255,239,213,1)",ColorGroup:"Yellow"},
{ColorName:"peachpuff",HexCode:"#FFDAB9",RGBCode:"RGBA(255,218,185,1)",ColorGroup:"Yellow"},
{ColorName:"peru",HexCode:"#CD853F",RGBCode:"RGBA(205,133,63,1)",ColorGroup:"Brown"},
{ColorName:"pink",HexCode:"#FFC0CB",RGBCode:"RGBA(255,192,203,1)",ColorGroup:"Pink"},
{ColorName:"plum",HexCode:"#DDA0DD",RGBCode:"RGBA(221,160,221,1)",ColorGroup:"Purple"},
{ColorName:"powderblue",HexCode:"#B0E0E6",RGBCode:"RGBA(176,224,230,1)",ColorGroup:"Blue"},
{ColorName:"purple",HexCode:"#800080",RGBCode:"RGBA(128,0,128,1)",ColorGroup:"Purple"},
{ColorName:"red",HexCode:"#FF0000",RGBCode:"RGBA(255,0,0,1)",ColorGroup:"Red"},
{ColorName:"rosybrown",HexCode:"#BC8F8F",RGBCode:"RGBA(188,143,143,1)",ColorGroup:"Brown"},
{ColorName:"royalblue",HexCode:"#4169E1",RGBCode:"RGBA(65,105,225,1)",ColorGroup:"Blue"},
{ColorName:"saddlebrown",HexCode:"#8B4513",RGBCode:"RGBA(139,69,19,1)",ColorGroup:"Brown"},
{ColorName:"salmon",HexCode:"#FA8072",RGBCode:"RGBA(250,128,114,1)",ColorGroup:"Red"},
{ColorName:"sandybrown",HexCode:"#F4A460",RGBCode:"RGBA(244,164,96,1)",ColorGroup:"Brown"},
{ColorName:"seagreen",HexCode:"#2E8B57",RGBCode:"RGBA(46,139,87,1)",ColorGroup:"Green"},
{ColorName:"seashell",HexCode:"#FFF5EE",RGBCode:"RGBA(255,245,238,1)",ColorGroup:"White"},
{ColorName:"sienna",HexCode:"#A0522D",RGBCode:"RGBA(160,82,45,1)",ColorGroup:"Brown"},
{ColorName:"silver",HexCode:"#C0C0C0",RGBCode:"RGBA(192,192,192,1)",ColorGroup:"Gray"},
{ColorName:"skyblue",HexCode:"#87CEEB",RGBCode:"RGBA(135,206,235,1)",ColorGroup:"Blue"},
{ColorName:"slateblue",HexCode:"#6A5ACD",RGBCode:"RGBA(106,90,205,1)",ColorGroup:"Blue"},
{ColorName:"slategray",HexCode:"#708090",RGBCode:"RGBA(112,128,144,1)",ColorGroup:"Gray"},
{ColorName:"snow",HexCode:"#FFFAFA",RGBCode:"RGBA(255,250,250,1)",ColorGroup:"White"},
{ColorName:"springgreen",HexCode:"#00FF7F",RGBCode:"RGBA(0,255,127,1)",ColorGroup:"Green"},
{ColorName:"steelblue",HexCode:"#4682B4",RGBCode:"RGBA(70,130,180,1)",ColorGroup:"Blue"},
{ColorName:"tan",HexCode:"#D2B48C",RGBCode:"RGBA(210,180,140,1)",ColorGroup:"Brown"},
{ColorName:"teal",HexCode:"#008080",RGBCode:"RGBA(0,128,128,1)",ColorGroup:"Cyan"},
{ColorName:"thistle",HexCode:"#D8BFD8",RGBCode:"RGBA(216,191,216,1)",ColorGroup:"Purple"},
{ColorName:"tomato",HexCode:"#FF6347",RGBCode:"RGBA(255,99,71,1)",ColorGroup:"Orange"},
{ColorName:"turquoise",HexCode:"#40E0D0",RGBCode:"RGBA(64,224,208,1)",ColorGroup:"Cyan"},
{ColorName:"violet",HexCode:"#EE82EE",RGBCode:"RGBA(238,130,238,1)",ColorGroup:"Purple"},
{ColorName:"wheat",HexCode:"#F5DEB3",RGBCode:"RGBA(245,222,179,1)",ColorGroup:"Brown"},
{ColorName:"white",HexCode:"#FFFFFF",RGBCode:"RGBA(255,255,255,1)",ColorGroup:"White"},
{ColorName:"whitesmoke",HexCode:"#F5F5F5",RGBCode:"RGBA(245,245,245,1)",ColorGroup:"White"},
{ColorName:"yellow",HexCode:"#FFFF00",RGBCode:"RGBA(255,255,0,1)",ColorGroup:"Yellow"},
{ColorName:"yellowgreen",HexCode:"#9ACD32",RGBCode:"RGBA(154,205,50,1)",ColorGroup:"Green"}
)
Properties:
ColorPickerChosenColors: =colChosenColors
Children:
- cont_CP_Wrapper:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =comp_ColorPicker.CPDropShadow
Fill: =ColorValue(comp_ColorPicker.CPBackgroundColor)
Height: =comp_ColorPicker.Height
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =comp_ColorPicker.CPGap
PaddingBottom: =comp_ColorPicker.CPPadding
PaddingLeft: =comp_ColorPicker.CPPadding
PaddingRight: =comp_ColorPicker.CPPadding
PaddingTop: =comp_ColorPicker.CPPadding
RadiusBottomLeft: =comp_ColorPicker.CPBorderRadius
RadiusBottomRight: =comp_ColorPicker.CPBorderRadius
RadiusTopLeft: =comp_ColorPicker.CPBorderRadius
RadiusTopRight: =comp_ColorPicker.CPBorderRadius
Width: =Parent.Width
Y: =0.00
Children:
- contColorPickerHeader:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
DropShadow: =comp_ColorPicker.CPDropShadow
FillPortions: =0
Height: =50
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =comp_ColorPicker.CPGap
PaddingBottom: =0.00
PaddingLeft: =comp_ColorPicker.CPPadding
PaddingRight: =comp_ColorPicker.CPPadding
RadiusBottomLeft: =comp_ColorPicker.CPBorderRadius
RadiusBottomRight: =comp_ColorPicker.CPBorderRadius
RadiusTopLeft: =comp_ColorPicker.CPBorderRadius
RadiusTopRight: =comp_ColorPicker.CPBorderRadius
Width: =Parent.Width
Y: =0.00
Children:
- lblColorPickerHeader:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Color: =ColorValue(comp_ColorPicker.CPForegroundColor)
Font: =comp_ColorPicker.CPFont
FontWeight: =comp_ColorPicker.CPFontWeight
Height: =40
PaddingBottom: =comp_ColorPicker.CPPadding
PaddingLeft: =comp_ColorPicker.CPPadding
PaddingRight: =comp_ColorPicker.CPPadding
PaddingTop: =comp_ColorPicker.CPPadding
Size: =comp_ColorPicker.CPFontSize
Text: =comp_ColorPicker.CPLabelText
Width: =165
Y: =0.00
- galChosenColors:
Control: Gallery@2.15.0
Variant: Horizontal
Properties:
AccessibleLabel: ="Chosen Colors Gallery"
BorderColor: =RGBA(0, 18, 107, 1)
Height: =323.94
Items: =colChosenColors
LayoutMinHeight: =50
LayoutMinWidth: =40
TemplateSize: =40
Width: =325
Y: =0.00
Children:
- contChosenColors:
Control: GroupContainer@1.3.0
Variant: ManualLayout
Properties:
Height: =40
PaddingBottom: =0.00
PaddingLeft: =0.00
RadiusBottomLeft: =comp_ColorPicker.CPBorderRadius
RadiusBottomRight: =comp_ColorPicker.CPBorderRadius
RadiusTopLeft: =comp_ColorPicker.CPBorderRadius
RadiusTopRight: =comp_ColorPicker.CPBorderRadius
Width: =40
Y: =0.00
Children:
- lblChosenColor:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Fill: =ColorValue(ThisItem.HexCode)
Font: =comp_ColorPicker.CPFont
FontWeight: =comp_ColorPicker.CPFontWeight
Height: =40
Size: =comp_ColorPicker.CPFontSize
Text: =
Width: =40
Y: =0.00
- icoEraseChosenColors:
Control: Classic/Icon@2.5.0
Properties:
AccessibleLabel: ="Erase Icon"
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(0, 18, 107, 1)
Color: =ColorValue(comp_ColorPicker.CPForegroundColor)
Height: =40
Icon: =Icon.Erase
OnSelect: =Clear(colChosenColors)
PaddingBottom: =0.00
PaddingLeft: =0.00
Width: =40
Y: =0.00
- icoSaveChosenColors:
Control: Classic/Icon@2.5.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Color: =ColorValue(comp_ColorPicker.CPForegroundColor)
Height: =40
Icon: =Icon.Save
PaddingBottom: =0.00
PaddingLeft: =0.00
Width: =40
Y: =0.00
- Label5:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Font: =comp_ColorPicker.CPFont
Height: =16.90
PaddingBottom: =2.82
PaddingLeft: =5.63
PaddingRight: =comp_ColorPicker.CPPadding
Size: =13
Text: ="Select a color group from the drop down menu below to filter the colors."
Width: =comp_ColorPicker.Width-(comp_ColorPicker.CPPadding*2)
Y: =0.00
- ddColorGroups:
Control: Classic/DropDown@2.3.1
Properties:
AccessibleLabel: ="Color Groups drop down menu"
AlignInContainer: =AlignInContainer.Stretch
BorderColor: =RGBA(0, 18, 107, 1)
BorderThickness: =0
ChevronBackground: =ColorValue(comp_ColorPicker.CPForegroundColor)
ChevronFill: =RGBA(255, 255, 255, 1)
ChevronHoverBackground: =ColorFade(ColorValue(comp_ColorPicker.CPForegroundColor), 20%)
ChevronHoverFill: =ColorValue(comp_ColorPicker.CPBackgroundColor)
Font: =comp_ColorPicker.CPFont
Height: =40
HoverFill: =ColorFade(ColorValue(comp_ColorPicker.CPForegroundColor),50%)
Items: =SortByColumns(Distinct(comp_ColorPicker.ColorsTable,ColorGroup),"Value")
Items.Value: =Value
PaddingBottom: =0.00
PaddingLeft: =comp_ColorPicker.CPPadding
PaddingRight: =comp_ColorPicker.CPPadding
PaddingTop: =0
PressedColor: =RGBA(255, 255, 255, 1)
PressedFill: =ColorFade(ColorValue(comp_ColorPicker.CPForegroundColor),50%)
SelectionColor: =RGBA(255, 255, 255, 1)
SelectionFill: =ColorFade(ColorValue(comp_ColorPicker.CPForegroundColor),50%)
Size: =12
Tooltip: ="Select the color group to filter the gallery"
Y: =0.00
- galColors:
Control: Gallery@2.15.0
Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
Properties:
AccessibleLabel: ="Colors Gallery"
BorderColor: =RGBA(0, 18, 107, 1)
Height: =323.94
Items: =Filter(comp_ColorPicker.ColorsTable,ColorGroup=ddColorGroups.Selected.Value)
LayoutMinHeight: =250
OnSelect: |
=//Set(chosenColor,ThisItem.HexCode);
Collect(colChosenColors,
{
ColorName: ThisItem.ColorName,
HexCode: ThisItem.HexCode
}
);
TemplatePadding: =0.00
TemplateSize: =50
WrapCount: =2
Y: =0.00
Children:
- Title1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Color: =RGBA(50, 49, 48, 1)
Font: =comp_ColorPicker.CPFont
FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
Height: =20
OnSelect: =Select(Parent)
PaddingBottom: =0.00
PaddingLeft: =0.00
PaddingRight: =0
PaddingTop: =0
Size: =12
Text: =ThisItem.ColorName
VerticalAlign: =VerticalAlign.Top
Width: =160
X: =60
Y: =5
- Subtitle1:
Control: Label@2.5.1
Properties:
BorderColor: =RGBA(0, 0, 0, 1)
Font: =comp_ColorPicker.CPFont
FontWeight: =If(ThisItem.IsSelected, FontWeight.Semibold, FontWeight.Normal)
Height: =20
OnSelect: =Select(Parent)
PaddingBottom: =0.00
PaddingLeft: =0.00
PaddingRight: =0
PaddingTop: =0
Size: =13
Text: =ThisItem.HexCode
VerticalAlign: =VerticalAlign.Top
Width: =Title1.Width
X: =60
Y: =Parent.TemplateHeight-Title1.Height
- NextArrow1:
Control: Classic/Icon@2.5.0
Properties:
AccessibleLabel: =Self.Tooltip
BorderColor: =RGBA(0, 0, 0, 1)
Color: =ColorValue(comp_ColorPicker.CPForegroundColor)
DisabledBorderColor: =RGBA(56, 56, 56, 1)
DisabledColor: =RGBA(119, 119, 119, 1)
Height: =40
Icon: =Icon.ChevronRight
OnSelect: =Select(Parent)
PaddingBottom: =5
PaddingLeft: =5
PaddingRight: =5
PaddingTop: =5
Tooltip: ="View item details"
Width: =40
X: =247
Y: =6.20
- Rectangle1:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Fill: =RGBA(0, 18, 107, 1)
Height: =42.25
OnSelect: =Select(Parent)
Visible: =ThisItem.IsSelected
Width: =4
Y: =0.00
- Rectangle2:
Control: Rectangle@2.3.0
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Fill: =ColorValue(ThisItem.HexCode)
Height: =40
OnSelect: =Select(Parent)
Width: =40
X: =10
Y: =(Parent.TemplateHeight-Self.Height)/2
3
0 comments
Color Picker Component
skool.com/learn-power-apps
A community of people who are enthusiastic about and trying to learn about Microsoft's Power Apps!
Leaderboard (30-day)
1
+25
2
+3
3
+2
4
+1
5
+1
Powered by