Skip to content
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create parent gallery
Add a new Horizontal Gallery, call it "week_tracker_gallery" with Items properties:
[{day: "Sun",price: 2500},{day: "Mon",price: 1500},{day: "Tue",price: 500},{day: "Wed",price: 300},{day: "Thu",price: 1800},{day: "Fri",price: 3000},{day: "Sat",price: 300}]
You can replace it by your data from SharePoint or Dataverse.
Step 2 - create item in gallery
Add a new Vertical Container PCF, call it "item_selected_gallery" with dynamic Width and Height values:
Width
If(Text(Today(),"ddd") = ThisItem.day,80,60)
Height
20 + item_value_w.Height + ellipse_item.Height + value_divider.Height + week_day_frame.Height
Step 3 - create value in item container
Add a new Vertical Container PCF, call it "item_value_w" with Visible value:
If(Text(Today(),"ddd") = ThisItem.day,true,false)
Add Label object, call it "item_value" with "Text" property:
If(ThisItem.price < 1000,Text(ThisItem.price,"$ 000"), Text(ThisItem.price,"$ 0,000"))
Step 4 - create other value in item container
Add Circle object, call it "ellipse_item" with "Visible" property:
If(Text(Today(),"ddd") = ThisItem.day,false,true)
Step 5 - create divider in item container
Add HTML TEXT object, call it "value_divider" with "HtmlText" property:
"<div style='border-radius:5px;margin-left:2px;background-color:#cbcdcf;width:1px;height:"&(110 - Value(ThisItem.price)/100) - 10&"px;'></div>"
and "Height" property:
140 - Value(ThisItem.price)/100 -20
Step 6 - create week day in item container
Add a new Vertical Container PCF, call it "week_day_frame" with default property values.
And add Label object, call it "item_value" with "Text" property:
Left(ThisItem.day,1)
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create gallery frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horgall_week_tracker_gallery" with these properties:
Step 2 - create item frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_item_selected_gallery" with these properties:
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_item_value_w" with these properties:
Add a new Text (T command), call it "lbl_item_value" with these properties:
Add a new Ellipse (O command) object, call it "ci_sunday_v" with these properties:
Add a new Rectangle (R command) object, call it "html_sunday_divider" with these properties:
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_sunday_w" with these properties:
Add a new Text (T command), call it "lbl_sunday_day_w" with these properties:
The same do it for the rest week days (6x), but WITHOUT PREFIXES.
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.