Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Timer

MyCondy

Last edited 11 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Timer

3x Container

1x Image

1x Button

1x Label

Procedure

Step 1 - create hidden timer

Add a new Timer, call it "OriginalTimer" with this "Visible" property:

false

And "Start" property:

TimerGo

Step 2 - create designed timer

Add a new Manual Container PCF, call it "timer_frame" with default property values.

Add a new Vertical Container PCF, call it "inner_frame" with "Border Radius" property:

105

Add a new Vertical Container PCF, call it "content_frame" with "DropShadow" property:

DropShadow.Regular

and "LayoutAlignItems" property:

LayoutAlignItems.Center

Add a new Button PCF object under "content_frame", call it "timer_value" with this "Appearance" property:

'ButtonCanvas.Appearance'.Transparent

and "Text" property:

Text(Time(0, 0, OriginalTimer.Value/1000), "hh:mm:ss")

Add Label object under "content_frame", call it "total_value" with Text property:

Concatenate(OriginalTimer.Duration/1000," sec")

And Image object under "timer_frame", call it "circle_icon" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='181' height='184' viewBox='0 0 181 184' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_3604_8924)'> <path d='M0.00311279 91.255C0.168095 71.6445 6.49313 52.5978 18.0554 36.8939C29.6177 21.19 45.8121 9.65063 64.276 3.95942C82.7398 -1.73178 102.507 -1.27702 120.693 5.25737C138.879 11.7918 154.533 24.0638 165.37 40.2831C176.208 56.5023 181.662 75.8199 180.936 95.4176C180.211 115.015 173.344 133.867 161.338 149.223C149.332 164.579 132.815 175.636 114.197 180.779C95.5781 185.923 75.8326 184.884 57.8411 177.815L90.5 92.0001L0.00311279 91.255Z' fill='#FF4980'/> </g> <defs> <clipPath id='clip0_3604_8924'> <rect width='181' height='184' fill='white'/> </clipPath> </defs> </svg>")

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

5x Frame

2x Text

1x Vector

Procedure

Step 1 - create a timer frame

Add a new Frame (F command) object, call it "cont_timer_frame" with these properties:

⁠

⁠

Step 2 - create a content for timer frame

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

Step 3 - create a SVG for timer frame

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

</mask>

</svg>

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

cont_timer_frame = Manual Container

vercont_innner_frame = Vertical Container

btnpcf_timer_value = Button PCF

lbl_total_value = Label

svg_circle_icon = Image

YAML Output

⁠

Used Colours

SVG Colour - #FF4980

Inner Frame Background - #FFFFFF

Button Text Colour - #2C4C72

Label Text Colour - #A0B8DB

⁠

← Time Picker⁠

⁠

Todo list →⁠

⁠

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.