Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Todo list

MyCondy

Last edited 11 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Vertical Gallery

2x Container

1x Checkbox PCF

1x Image

Procedure

Step 1 - create gallery

Add a new Vertical Gallery object, call it "todos_gallery" with this "Items" property:

[

{Title: "Onboard Customer",Type: "HR",Colour: "#D4DEFF",TextColour: "#36399E"},

{Title: "Send Report to Boss",Type: "Project",Colour: "#E4D4FF",TextColour: "#5D32E9"},

{Title: "Order new HW",Type: "Buyer",Colour: "#F5D7E0",TextColour: "#7F333C"}

]

You can use SharePoint list or DataVerse table instead of static items.

Step 2 - create item in gallery

Add a new Horizontal Container object, call it "todo_frame" with this "Gap" property:

Add a new CheckBox PCF object, call it "check_item" with this "Text" property:

ThisItem.Title

Add a new Horizontal Container object, call it "type_frame" with this "Height" property:

and "Color" property:

ColorValue(ThisItem.Colour)

Add a new Label object under "type_frame", call it "type_value" with this "Text" property:

ThisItem.Type

and "Color" property:

ColorValue(ThisItem.TextColour)

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

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M16.875 30C16.875 32.4162 14.9162 34.375 12.5 34.375C10.0838 34.375 8.125 32.4162 8.125 30C8.125 27.5838 10.0838 25.625 12.5 25.625C14.9162 25.625 16.875 27.5838 16.875 30ZM51.875 30C51.875 32.4162 49.9162 34.375 47.5 34.375C45.0838 34.375 43.125 32.4162 43.125 30C43.125 27.5838 45.0838 25.625 47.5 25.625C49.9162 25.625 51.875 27.5838 51.875 30ZM30 34.375C32.4163 34.375 34.375 32.4162 34.375 30C34.375 27.5838 32.4163 25.625 30 25.625C27.5837 25.625 25.625 27.5838 25.625 30C25.625 32.4162 27.5837 34.375 30 34.375Z' fill='#797979'/> </svg>")

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

4x Frame

1x CheckBox Component

1x Text

1x Vector

Procedure

Step 1 - create horizontal gallery frame

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

⁠

⁠

Step 2 - create item frame

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

⁠

⁠

Step 3 - import CheckBox component

Open DesignKit PRO 2.5 version and import CheckBox PCF component:

⁠

⁠

Step 4 - create type frame

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

⁠

⁠

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

⁠

⁠

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

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

gall_todos_gallery = Vertical Gallery

horcont_todo_frame = Horizontal Container

checkpcf_check_item = CheckBox PCF

lbl_type_value = Label

svg_action_icon = Image

YAML Output

⁠

Used Colours

Item Background - #FFFFFF

Item Stroke Colour - #C1B1A1

Type Colours - #D4DEFF , #E4D4FF , #F5D7E0

Text Colours - #36399E , #5D32E9 , #7F333C

⁠

← Timer⁠

⁠

Vertical Stepper →⁠

⁠

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.