Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Time Picker

MyCondy

Last edited 15 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

6x Container

6x Image

4x Label

Procedure

Step 0 - create boolean variable on Screen

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

Set(_hour_value,8);Set(_minute_value,10);Set(_day_value,"PM")

Step 1 - create cover container

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

DropShadow.Semibold

Step 2 - create time content container

Add a new Horizontal Container PCF object, call it "time_frame" with this "Gap" property:

Step 3 - create hour content container

Add a new Vertical Container PCF object, call it "hour_frame" with this "Gap" property:

Add a new Image object under "hour_frame", call it "hour_up_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.22001 15.5303C4.36064 15.6708 4.55126 15.7497 4.75001 15.7497C4.94876 15.7497 5.13939 15.6708 5.28001 15.5303L12 8.81032L18.72 15.5303C18.7887 15.604 18.8715 15.6631 18.9635 15.7041C19.0555 15.7451 19.1548 15.7671 19.2555 15.7689C19.3562 15.7707 19.4562 15.7522 19.5496 15.7144C19.643 15.6767 19.7278 15.6206 19.799 15.5494C19.8703 15.4781 19.9264 15.3933 19.9641 15.2999C20.0019 15.2065 20.0204 15.1065 20.0186 15.0058C20.0168 14.9051 19.9948 14.8058 19.9538 14.7138C19.9128 14.6218 19.8537 14.539 19.78 14.4703L12.53 7.22032C12.3894 7.07987 12.1988 7.00098 12 7.00098C11.8013 7.00098 11.6106 7.07987 11.47 7.22032L4.22001 14.4703C4.07956 14.6109 4.00067 14.8016 4.00067 15.0003C4.00067 15.1991 4.07956 15.3897 4.22001 15.5303Z' fill='#C9C9C9'/> </svg>")

And "OnSelect" property:

Set(_hour_value,Value(hour_value.Text)+1)

And a new Label object under "hour_frame", call it "hour_value" with Text property:

Text(_hour_value,"00")

And a new Image object under "hour_frame", call it "hour_down_icon" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.22001 8.47015C4.36064 8.3297 4.55126 8.25081 4.75001 8.25081C4.94876 8.25081 5.13939 8.3297 5.28001 8.47015L12 15.1902L18.72 8.47015C18.7887 8.39647 18.8715 8.33736 18.9635 8.29637C19.0555 8.25538 19.1548 8.23334 19.2555 8.23156C19.3562 8.22979 19.4562 8.24831 19.5496 8.28603C19.643 8.32375 19.7278 8.3799 19.799 8.45112C19.8703 8.52233 19.9264 8.60717 19.9641 8.70056C20.0019 8.79394 20.0204 8.89397 20.0186 8.99468C20.0168 9.09538 19.9948 9.19469 19.9538 9.28669C19.9128 9.37869 19.8537 9.46149 19.78 9.53015L12.53 16.7802C12.3894 16.9206 12.1988 16.9995 12 16.9995C11.8013 16.9995 11.6106 16.9206 11.47 16.7802L4.22001 9.53015C4.07956 9.38953 4.00067 9.1989 4.00067 9.00015C4.00067 8.8014 4.07956 8.61078 4.22001 8.47015Z' fill='#C9C9C9'/> </svg>")

And "OnSelect" property:

Set(_hour_value,Value(hour_value.Text)-1)

Step 4 - create separator content container

Add a new Vertical Container PCF object, call it "sep_frame" with this "Gap" property:

And a new Label object under "sep_frame", call it "separator" with Text property:

":"

Step 5 - create minute content container

Add a new Vertical Container PCF object, call it "minute_frame" with this "Gap" property:

Add a new Image object under "minute_frame", call it "minute_up_icon" with this "Image" property:

And "OnSelect" property:

Set(_minute_value,Value(minute_value.Text)+1)

And a new Label object under "minute_frame", call it "minute_value" with Text property:

Text(_minute_value,"00")

And a new Image object under "minute_frame", call it "minute_down_icon" with this "Image" property:

And "OnSelect" property:

Set(_minute_value,Value(minute_value.Text)-1)

Step 6 - create am/fm content container

Add a new Vertical Container PCF object, call it "am_pm_frame" with this "Gap" property:

Add a new Image object under "am_fm_frame", call it "amfm_up_icon" with this "Image" property:

And "OnSelect" property:

If(_day_value = "AM",Set(_day_value,"PM"),Set(_day_value,"AM"))

And a new Label object under "am_fm_frame", call it "amfm_value" with Text property:

_day_value

And a new Image object under "am_fm_frame", call it "amfm_down_icon" with this "Image" property:

And "OnSelect" property:

If(_day_value = "PM",Set(_day_value,"AM"),Set(_day_value,"PM"))

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

12x Frame

6x Vector

4x Text

Procedure

Step 1 - create a time frame

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

⁠

⁠

⁠

Step 2 - create a time content frame

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

⁠

⁠

Step 3 - create an hour content frame

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

⁠

⁠

Import a new SVG file under a "vercont_hour_frame" frame, call it "svg_hour_up_icon" with this XML code:

Add a new Text (T command) object under a "vercont_hour_frame" frame, call it "lbl_hour_value" with these properties:

⁠

⁠

Import a new SVG file under a "vercont_hour_frame" frame, call it "svg_hour_down_icon" with this XML code:

Step 4 - create a separator content frame

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

⁠

⁠

Add a new Text (T command) object under a "vercont_sep_frame" frame, call it "lbl_separator" with these properties:

⁠

Step 5 - create a minute content frame

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

⁠

Import a new SVG file under a "vercont_minute_frame" frame, call it "svg_minute_up_icon" with this XML code:

Add a new Text (T command) object under a "vercont_minute_frame" frame, call it "lbl_minute_value" with these properties:

⁠

Import a new SVG file under a "vercont_minute_frame" frame, call it "svg_minute_down_icon" with this XML code:

Step 6 - create a am/fm content frame

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

⁠

Import a new SVG file under a "vercont_am_fm_frame" frame, call it "svg_amfm_up_icon" with this XML code:

Add a new Text (T command) object under a "vercont_am_fm_frame" frame, call it "lbl_amfm_value" with these properties:

⁠

Import a new SVG file under a "vercont_am_fm_frame" frame, call it "svg_amfm_down_icon" with this XML code:

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_time_picker, horcont_time_frame = Horizontal Container

vercont_hour_frame, vercont_sep_frame, vercont_minute_frame = Vertical Container

svg_hour_up_icon , svg_hour_down_icon = Image

lbl_hour_value , lbl_minute_value = Label

YAML Output

⁠

Used Colours

Time Background - #FFFFFF

Stroke Colour - #4F89FB

Icons Colour - #C9C9C9

Text Colour - #000000

⁠

← Tabs⁠

⁠

Timer →⁠

⁠

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.