Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Release Notes
Custom Functions
Custom Components
Share
Explore
Custom Components

icon picker
Message Dialog

MyCondy
Last edited 80 days ago by MyCondy

How to design it in Power Apps

Preview

⁠
Screenshot 2024-09-10 at 18.17.40.png
⁠
⁠

What does it consist of?

3x Container
1x Image
2x Label
2x Button PCF

Procedure

Step 1 - create dialog container
Add a new Vertical Container PCF object, call it "delete_dialog" with this "LayoutAlignItems" property:
LayoutAlignItems.End

Add a new Image object, call it "close_icon" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.2121 11.2121C11.5782 10.846 12.1718 10.846 12.5379 11.2121L15 13.6742L17.462 11.2121C17.8281 10.846 18.4218 10.846 18.7879 11.2121C19.154 11.5782 19.154 12.1718 18.7879 12.5379L16.3258 15L18.7879 17.4621C19.154 17.8281 19.154 18.4218 18.7879 18.7879C18.4218 19.154 17.8281 19.154 17.462 18.7879L15 16.3259L12.5379 18.7879C12.1718 19.154 11.5782 19.154 11.2121 18.7879C10.846 18.4218 10.846 17.8282 11.2121 17.4621L13.6741 15L11.2121 12.5379C10.846 12.1718 10.846 11.5782 11.2121 11.2121Z' fill='#53596C'/> </svg>")
Step 2 - create content container
Add a new Vertical Container PCF object under "delete_dialog", call it "content_dialog" with this "Gap" property:
10

Add a new Label object under "content_dialog", call it "title_dialog" with this "text" property:
"You are in the delete process"
Add a new Label object under "content_dialog", call it "description_dialog" with this "text" property:
"Are you sure to delete this stuff? This action cannot be undone."
Step 3 - create action menu
Add a new Horizontal Container PCF object under "delete_dialog", call it "action_menu" with this "Gap" property:
15
Add a new Button PCF object under "action_menu", call it "cancel" with this "Appearance" property:
'ButtonCanvas.Appearance'.Outline
Add a new Button PCF object under "action_menu", call it "delete" with this "BasePaletteColor" property:
RGBA(193, 78, 73, 1)
This is an output:
⁠
Screenshot 2024-09-10 at 18.14.30.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2024-09-10 at 18.16.58.png
⁠
⁠

What does it consist of?

7x Frame
3x Vector
4x Text

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_delete_dialog" with these properties:
⁠
Screenshot 2024-09-11 at 7.13.55.png
⁠
⁠
⁠
Screenshot 2024-09-11 at 7.14.13.png
⁠
⁠
Import a new SVG file under a "vercont_delete_dialog" frame, call it "svg_close_icon" with this XML code:
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2121 11.2121C11.5782 10.846 12.1718 10.846 12.5379 11.2121L15 13.6742L17.462 11.2121C17.8281 10.846 18.4218 10.846 18.7879 11.2121C19.154 11.5782 19.154 12.1718 18.7879 12.5379L16.3258 15L18.7879 17.4621C19.154 17.8281 19.154 18.4218 18.7879 18.7879C18.4218 19.154 17.8281 19.154 17.462 18.7879L15 16.3259L12.5379 18.7879C12.1718 19.154 11.5782 19.154 11.2121 18.7879C10.846 18.4218 10.846 17.8282 11.2121 17.4621L13.6741 15L11.2121 12.5379C10.846 12.1718 10.846 11.5782 11.2121 11.2121Z" fill="#53596C"/>
</svg>
Step 2- create content frames with auto layouts
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_content_dialog" with these properties:
⁠
Screenshot 2024-09-11 at 7.17.20.png
⁠
⁠
Add a new Text (T command) object under a "vercont_content_dialog" frame, call it "lbl_title_dialog" with these properties:
⁠
Screenshot 2024-09-11 at 7.18.21.png
⁠
⁠
Add a new Text (T command) object under a "vercont_content_dialog" frame, call it "lbl_description_dialog" with these properties:
⁠
Screenshot 2024-09-11 at 7.18.56.png
⁠
⁠
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_action_menu" with these properties:
⁠
Screenshot 2024-09-11 at 7.19.52.png
⁠
⁠
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "btnpcf_cancel" with these properties:
⁠
Screenshot 2024-09-11 at 7.24.09.png
⁠
⁠
Import a new SVG file under a "btnpcf_cancel" frame, call it "close_svgrepo.com" with this XML code:
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4661 2.08028C13.222 1.8362 12.8263 1.8362 12.5822 2.08028L8.02319 6.63927L3.46422 2.08028C3.22015 1.8362 2.82441 1.8362 2.58034 2.08028C2.33626 2.32435 2.33626 2.72008 2.58034 2.96416L7.13931 7.52315L2.58035 12.0821C2.33627 12.3262 2.33627 12.7219 2.58035 12.966C2.82443 13.2101 3.22016 13.2101 3.46423 12.966L8.02319 8.40702L12.5822 12.966C12.8263 13.2101 13.222 13.2101 13.4661 12.966C13.7101 12.7219 13.7101 12.3262 13.4661 12.0821L8.90706 7.52315L13.4661 2.96416C13.7101 2.72008 13.7101 2.32435 13.4661 2.08028Z" fill="#505669"/>
</svg>
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "btnpcf_delete" with these properties:
⁠
Screenshot 2024-09-11 at 7.24.27.png
⁠
⁠
Import a new SVG file under a "btnpcf_delete" frame, call it "trash-alt_svgrepo.com" with this XML code:
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 5.5L14.8326 15.5107C14.7742 16.3875 14.7449 16.8259 14.5556 17.1583C14.3888 17.451 14.1373 17.6863 13.8342 17.8332C13.49 18 13.0506 18 12.1718 18H8.82814C7.94939 18 7.51001 18 7.16574 17.8332C6.86264 17.6863 6.61115 17.451 6.44443 17.1583C6.25505 16.8259 6.22583 16.3875 6.16738 15.5107L5.49999 5.5M3.83333 5.5H17.1667M13.8333 5.5L13.6078 4.82339C13.3892 4.16771 13.2799 3.83987 13.0772 3.59748C12.8982 3.38344 12.6684 3.21777 12.4087 3.11565C12.1147 3 11.7692 3 11.078 3H9.922C9.23083 3 8.88533 3 8.59125 3.11565C8.3316 3.21777 8.10173 3.38344 7.92274 3.59748C7.72004 3.83987 7.61076 4.16771 7.3922 4.82339L7.16666 5.5M12.1667 8.83333V14.6667M8.83333 8.83333V14.6667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
This is an output:
⁠
Screenshot 2024-09-10 at 18.16.49.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_delete_dialog , vercont_content_dialog = Vertical Container
horcont_action_menu = Horizontal Container
svg_close_icon = Image
lbl_title_dialog, lbl_description_dialog = Label
btnpcf_cancel , btnpcf_delete = Button PCF

YAML Output

⁠
Dialog.png
⁠
⁠

Used Colours

Dialog Background - #FFFFFF
Dialog Font Colour - #494F5F
Dialog Bottom Container Background - #F7F7F7
Delete Button Background - #C14E49

⁠
← Menu
⁠
⁠
⁠
Password Input →
⁠
⁠

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.