Skip to content
Canvas Components
Volume
How to design it in Power Apps
Preview
What does it consist of?
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(selected,1)
Step 2 - create parent container
Add a new Vertical Container PCF, call it "volume_frame" with default property values.
Step 3 - create values container
Add a new Horizontal Container PCF, call it "values_volume" with "AlignInContainer" property:
AlignInContainer.Stretch
Add Circle object, call it "start_volume" with "Color" property:
RGBA(196, 212, 249, 1)
Add HTML TEXT object, call it "step_1_volume" with "HtmlText" property:
" <div style='border-radius:10px;background:"&If(selected <2,"#F4F5F5","linear-gradient(to right,#cdf,#36d)")&";width:75px;height:10px;'></div>"
Add Circle object, call it "low_volume" with "Color" property:
If(selected < 2,RGBA(245,245,245,1), RGBA(48, 105, 225, 1))
Add HTML TEXT object, call it "step_2_volume" with "HtmlText" property:
" <div style='border-radius:10px;background:"&If(selected <3,"#F4F5F5","linear-gradient(to right,#36d,#73e)")&";width:75px;height:10px;'></div>"
Add Circle object, call it "high_volume" with "Color" property:
If(selected < 3,RGBA(245,245,245,1), RGBA(118, 48, 242, 1))
Add HTML TEXT object, call it "step_3_volume" with "HtmlText" property:
" <div style='border-radius:10px;background:"&If(selected <>4,"#F4F5F5","linear-gradient(to right,#73e,#e77)")&";width:75px;height:10px;'></div>"
Add Circle object, call it "end_volume" with "Color" property:
If(selected <>4,RGBA(245,245,245,1), RGBA(236, 119, 114, 1))
Step 4 - create titles container
Add a new Horizontal Container PCF, call it "titles_volume" with "AlignInContainer" property:
AlignInContainer.Stretch
Add Label object, call it "start_value" with "Text" property:
"$100"
and "OnSelect" property:
Set(selected,1)
Add Label object, call it "low_value" with "Text" property:
"$1k"
and "OnSelect" property:
Set(selected,1)
Add Label object, call it "high_value" with "Text" property:
"$10k"
and "OnSelect" property:
Set(selected,1)
Add Label object, call it "end_value" with "Text" property:
"$100k"
and "OnSelect" property:
Set(selected,1)
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create volume frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_volume_frame" with these properties:
Step 2 - create values frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_values_volume" with these properties:
Add a new Ellipse (O command) object, call it "ci_start_volume" with these properties:
Add a new Rectangle (R command) object, call it "html_step_1_volume" with these properties:
Add a new Ellipse (O command) object, call it "ci_low_volume" with these properties:
Add a new Rectangle (R command) object, call it "html_step_2_volume" with these properties:
Add a new Ellipse (O command) object, call it "ci_high_volume" with these properties:
Add a new Rectangle (R command) object, call it "html_step_3_volume" with these properties:
Add a new Ellipse (O command) object, call it "ci_end_volume" with these properties:
Step 3 - create titles frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_titles_volume" with these properties:
Add a new Text (T command), call it "lbl_start_value" with these properties:
Add a new Text (T command), call it "lbl_low_value" with these properties:
Add a new Text (T command), call it "lbl_high_value" with these properties:
Add a new Text (T command), call it "lbl_end_value" with these properties:
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.