Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Counter

MyCondy

Last edited 21 days ago by MyCondy

The component helps you to increase and decrease your value.

How to design it in Power Apps

Preview

⁠

⁠

⁠

What does it consist of?

1x Horizontal Container

2x Image

1x Label

Procedure

Step 1 - create counter container

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

DropShadow.Semibold

Step 2 - add content for the container

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

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='20' height='3' viewBox='0 0 20 3' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0.718307 1.35205H19.7324' stroke='"&If(count_val = 1,"#DBDBDB","#316BB7")&"' stroke-width='2.53521'/> </svg>")

and "OnSelect" property:

If(count_val = 1,Set(count_val,1), Set(count_val,count_val-1))

And a new Label object, call it "value_count" with Text property:

If(IsBlank(count_val),1, count_val)

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

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='23' height='21' viewBox='0 0 23 21' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M2.05634 10.352H21.0704M11.5634 0.211182V20.4929' stroke='"&If(count_val = 99,"#DBDBDB","#316BB7")&"' stroke-width='2.53521'/> </svg>")

and "OnSelect" property:

If(count_val < 99,Set(count_val,count_val+1))

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

3x Frame

1x Text

2x Vector

Procedure

Step 1 - create a horizontal frame with auto layout

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

⁠

⁠

⁠

Step 2 - create a content for the parent frame

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

</svg>

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

⁠

⁠

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

</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

horcont_counter = Horizontal Container

svg_rem_count, svg_add_count = Image

lbl_value_count = Label

YAML Output

⁠

⁠

Used Colours

Frame Stroke - #DBDBDB

Frame Background - #FFFFFF

Label Colour - #232323

Remove Counter Colour - #DBDBDB

Add Counter Colour - #316BB7

⁠

← Colour Picker⁠

⁠

Feedback Box →⁠

⁠

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.