Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Colour Picker

MyCondy

Last edited 21 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

2x Container

1x Rectangle

1x Image

9x Circle

Procedure

Step 1 - create boolean variable on Screen

When you create a new screen(or use already created) you should create a variable on "OnVisible" property:

Set(collapsed,true);Set(default_colour,RGBA(35, 37, 41, 1))

Step 2 - create picker box

Add a new Horizontal Container PCF object, call it "text_exp_colour_picker" with this "DropShadow" property:

DropShadow.Light

with CENTER vertical and START horizontal alignment.

Step 3 - create selected circle with divider

Add a new Circle object, call it "selected_colour_exp" with this "Fill" property:

default_colour

Add a new Image object, call it "expand_icon_exp" with this "Image" property:

If(collapsed || IsBlank(collapsed), "data:image/svg+xml;utf8, " &EncodeUrl("<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M18.386 18.498C18.652 18.2023 19.0246 18.0245 19.4218 18.0035C19.819 17.9825 20.2083 18.1201 20.504 18.386L25.504 22.886C25.66 23.0266 25.7847 23.1985 25.87 23.3904C25.9554 23.5823 25.9995 23.79 25.9995 24C25.9995 24.21 25.9554 24.4177 25.87 24.6096C25.7847 24.8015 25.66 24.9734 25.504 25.114L20.504 29.614C20.2083 29.8803 19.8189 30.0182 19.4215 29.9974C19.0241 29.9765 18.6513 29.7987 18.385 29.503C18.1187 29.2073 17.9808 28.8179 18.0016 28.4205C18.0225 28.0231 18.2003 27.6503 18.496 27.384L20.592 25.5H13.5C13.303 25.5 13.108 25.4612 12.926 25.3858C12.744 25.3104 12.5786 25.1999 12.4393 25.0607C12.3001 24.9214 12.1896 24.756 12.1142 24.574C12.0388 24.392 12 24.197 12 24C12 23.803 12.0388 23.608 12.1142 23.426C12.1896 23.244 12.3001 23.0786 12.4393 22.9393C12.5786 22.8001 12.744 22.6896 12.926 22.6142C13.108 22.5388 13.303 22.5 13.5 22.5H20.592L18.496 20.616C18.3495 20.4841 18.2303 20.3246 18.1455 20.1466C18.0606 19.9687 18.0117 19.7757 18.0015 19.5788C17.9913 19.3819 18.02 19.1849 18.0859 18.9991C18.1519 18.8133 18.2539 18.6444 18.386 18.498ZM44 34.5C44 35.2223 43.8577 35.9375 43.5813 36.6048C43.3049 37.272 42.8998 37.8784 42.3891 38.3891C41.8784 38.8998 41.272 39.3049 40.6048 39.5813C39.9375 39.8577 39.2223 40 38.5 40H9.5C8.77773 40 8.06253 39.8577 7.39524 39.5813C6.72795 39.3049 6.12164 38.8998 5.61091 38.3891C5.10019 37.8784 4.69506 37.272 4.41866 36.6048C4.14226 35.9375 4 35.2223 4 34.5V13.5C4 12.0413 4.57946 10.6424 5.61091 9.61091C6.64236 8.57946 8.04131 8 9.5 8H38.5C39.9587 8 41.3576 8.57946 42.3891 9.61091C43.4205 10.6424 44 12.0413 44 13.5V34.5ZM38.5 37C39.88 37 41 35.88 41 34.5V13.498C41 12.118 39.88 10.998 38.5 10.998H31.992V37H38.5ZM28.992 37V11H9.5C8.12 11 7 12.12 7 13.5V34.5C7 35.88 8.12 37 9.5 37H28.992Z' fill='#3E4666'/> </svg>"),"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M29.614 18.498C29.348 18.2023 28.9754 18.0245 28.5782 18.0035C28.181 17.9825 27.7917 18.1201 27.496 18.386L22.496 22.886C22.34 23.0266 22.2153 23.1985 22.13 23.3904C22.0446 23.5823 22.0005 23.79 22.0005 24C22.0005 24.21 22.0446 24.4177 22.13 24.6096C22.2153 24.8015 22.34 24.9734 22.496 25.114L27.496 29.614C27.7917 29.8803 28.1811 30.0182 28.5785 29.9974C28.9759 29.9765 29.3487 29.7987 29.615 29.503C29.8813 29.2073 30.0192 28.8179 29.9984 28.4205C29.9775 28.0231 29.7997 27.6503 29.504 27.384L27.408 25.5H34.5C34.697 25.5 34.892 25.4612 35.074 25.3858C35.256 25.3104 35.4214 25.1999 35.5607 25.0607C35.6999 24.9214 35.8104 24.756 35.8858 24.574C35.9612 24.392 36 24.197 36 24C36 23.803 35.9612 23.608 35.8858 23.426C35.8104 23.244 35.6999 23.0786 35.5607 22.9393C35.4214 22.8001 35.256 22.6896 35.074 22.6142C34.892 22.5388 34.697 22.5 34.5 22.5H27.408L29.504 20.616C29.7994 20.3497 29.9769 19.9769 29.9975 19.5798C30.0181 19.1826 29.8802 18.7935 29.614 18.498ZM4 34.502C4.00053 35.9603 4.58023 37.3588 5.61162 38.3898C6.64301 39.4208 8.04166 40 9.5 40H38.5C39.2223 40 39.9375 39.8577 40.6048 39.5813C41.272 39.3049 41.8784 38.8998 42.3891 38.3891C42.8998 37.8784 43.3049 37.2721 43.5813 36.6048C43.8577 35.9375 44 35.2223 44 34.5V13.5C44 12.0413 43.4205 10.6424 42.3891 9.61091C41.3576 8.57946 39.9587 8 38.5 8H9.5C8.04131 8 6.64236 8.57946 5.61091 9.61091C4.57946 10.6424 4 12.0413 4 13.5V34.502ZM9.5 37.002C8.12 37.002 7 35.882 7 34.502V13.498C7 12.118 8.12 10.998 9.5 10.998H16.008V37L9.5 37.002ZM19.008 37.002V11H38.5C39.88 11 41 12.12 41 13.5V34.5C41 35.88 39.88 37 38.5 37L19.008 37.002Z' fill='#3E4666'/> </svg>"))

Add a new Rectangle object, call it "divider_exp" with this "Fill" property:

RGBA(217, 217, 217, 1)

Step 4 - create colours

Add a new Horizontal Container PCF object, call it "colours_frame_exp" with this "OnVisible" property:

If(collapsed || IsBlank(collapsed),false,true)

Add 8 Circle objects, call them "col1/2/3/4/5/6/7/8_exp" with this "Height/Width" properties:

and use Fill according to mentioned colours in USED COLOURS section below.

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

3x Frame

1x Vector

9x Ellipse

1x Rectangle

Procedure

Step 1 - create a picker frame with auto layout

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "horcont_text_col_colour_picker" with these properties:

⁠

⁠

Step 2 - create a selected colour with divider

Add a new Ellipse (O command) object, call it "ci_selected_colour_col" with these properties:

⁠

⁠

Import a new SVG file call it "svg_collapse_icon_col" with this XML code:

Add a new Rectangle (R command) object, call it "rect_divider_col" with these properties:

⁠

⁠

Step 3 - create colour values in frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "horcont_colours_frame_col" with these properties:

⁠

⁠

Add 8 new Ellipse (O command) objects, call them "ci_col1/2/3/4/5/6/7/8_col" with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

horcont_text_col_colour_picker = Horizontal Container

ci_selected_colour_col = Circle

svg_collapse_icon_col = Image

rect_divider_col = Rectangle

YAML Output

⁠

Used Colours

Background - #FFFFFF

Selected Circle Colour, Colour 1 - #232529

Colour 2 - #5C6169

Colour 3 - #FF5A59

Colour 4 - #E8657E

Colour 5 - #EC973B

Colour 6 - #41C262

Colour 7 - #627BE3

Colour 8 - #8C61E5

⁠

← Card Box⁠

⁠

Counter →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.