Skip to content
Canvas Components
Timeline
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create gallery
Add a new Vertical Gallery object, call it "timeline_gallery" with this "Items" property:
[{time: "9:00",title:"Taxes Training",dscr:"Internal training for setting taxes in MyTax tool"},
{time: "10:00",title:"One 2 one",dscr:"Meeting with my Line Manager"},
{time: "12:00",title:"Lunch",dscr:"Time to eat"}]
you can put your SharePoint list or Dataverse table instead of this sample data.
Step 2 - create cover frame
Add a new Container object, call it "timeline_item" with general properties.
Step 3 - create content
Add a new Circle object under "timeline_item", call it "start_point" with this "Color" property:
RGBA(67, 111, 246, 1)
Add a new Rectangle object under "timeline_item", call it "line_sep" with this "Color" property:
RGBA(217, 217, 217, 1)
Add a new Label object under "timeline_item", call it "title_task" with this "text" property:
ThisItem.title
Add a new Label object under "timeline_item", call it "dscr_task" with this "Color" property:
ThisItem.dscr
Step 4 - create time value frame
Add a new Horizontal Container object, call it "time_frame" with "Gap" property:
14
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a timeline gallery frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "gall_timeline_gallery" with these properties:
Step 2- create an item frame
Add a new Frame (F command) object, call it "cont_timeline_item" with these properties:
Step 3- create content
Add a new Ellipse (O command) object under "cont_timeline_item", call it "ci_start_point" with these properties:
Add a new Rectangle (R command) object under "cont_timeline_item", call it "ci_start_point" with these properties:
Add a new Text (T command) object under "cont_timeline_item", call it "lbl_title_task" with these properties:
Add a new Text (T command) object under "cont_timeline_item", call it "lbl_dscr_task" with these properties:
Step 4- create time value frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_time_frame" with these properties:
Add a new Text (T command) object under "horcont_time_frame", call it "lbl_time_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.