Skip to content
Canvas Components
Index Bar
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create vertical container
Add a new Vertical Container PCF object, call it "index_slider" with this "DropShadow" property:
DropShadow.Semilight
Step 2 - create content container
Add a new Manual Container PCF object, call it "slider_frame" with this "Height" property:
30
Add a new Circle object under "slider_frame", call it "slider_value" with X property:
151
This value you can replace by your data input from SharePoint or Dataverse.
Add a new Image object under "slider_frame", call it "index_icon" with Image property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='325' height='17' viewBox='0 0 325 17' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 8.5C0 3.80558 3.80558 0 8.5 0H65V17H8.5C3.80558 17 0 13.1944 0 8.5Z' fill='#D84949'/> <path d='M65 0H130V17H65V0Z' fill='#DC9233'/> <path d='M130 0H195V17H130V0Z' fill='#EAD453'/> <path d='M195 0H260V17H195V0Z' fill='#A2D742'/> <path d='M260 0H316.5C321.194 0 325 3.80558 325 8.5C325 13.1944 321.194 17 316.5 17H260V0Z' fill='#5CC488'/> </svg>")
Step 3 - create label container
Add a new Horizontal Container PCF object, call it "labels_frame" with this "AlignInContainer" property:
AlignInContainer.Stretch
Add a new Label object under "labels_frame", call it "low_label" with Text property:
"Index - 0%"
Add a new Label object under "labels_frame", call it "max_label" with Text property:
"Index - 100%"
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a vertical frame with auto layout
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_index_bar" with these properties:
Step 2 - create a content frame
Add a new Frame (F command) object, call it "cont_slider_frame" with these properties:
Add a new Oval (O command) under "cont_slider_frame", call it "ci_slider_value" with these properties:
Import a new SVG file, call it "svg_index_icon" with this XML code:
<svg width='325' height='17' viewBox='0 0 325 17' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M0 8.5C0 3.80558 3.80558 0 8.5 0H65V17H8.5C3.80558 17 0 13.1944 0 8.5Z' fill='#D84949'/> <path d='M65 0H130V17H65V0Z' fill='#DC9233'/> <path d='M130 0H195V17H130V0Z' fill='#EAD453'/> <path d='M195 0H260V17H195V0Z' fill='#A2D742'/> <path d='M260 0H316.5C321.194 0 325 3.80558 325 8.5C325 13.1944 321.194 17 316.5 17H260V0Z' fill='#5CC488'/> </svg>
Step 3 - create labels frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_labels_frame" with these properties:
Add a new Text (T command) object under a "horcont_labels_frame" frame, call it "lbl_low_title" with these properties:
Add a new Text (T command) object under a "horcont_labels_frame" frame, call it "lbl_max_title" 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.