New Sample: Confirmation Dialog Component

samples/confirmation-dialog-component/READEME.md

@@ -0,0 +1,99 @@
+# Confirmation Dialog Component
+
+## Summary
+
+The Confirmation Dialog is a reusable Canvas Component that provides a modal, app-wide confirmation experience for Power Apps. It displays a centered dialog with a customizable title, message, and configurable Confirm and Cancel buttons. The component supports destructive‑action styling (highlighting the confirm button in red), optional button icons, and exposes OnConfirm and OnCancel events for app logic integration. This makes it ideal for consistent, accessible confirmation prompts across your app without rewriting the UI each time.
+#### Key features:
+
+- Customizable Title, Message, Confirm Button Text, and Cancel Button Text
+- Optional destructive mode for high‑risk actions
+- Optional button icons
+- Modal overlay with built‑in close/dismiss behavior
+- Event properties (OnConfirm, OnCancel) for clean app integration
+
+Use this component to standardize confirmation UI patterns throughout your Canvas Apps.
+
+![Component in edit](assets/component-canvas.png)
+
+![Component in use](assets/component-configured.png)
+
+## Applies to
+
+![Power Apps](https://img.shields.io/badge/Power%20Apps-Yes-green "Yes")
+![Power Automate](https://img.shields.io/badge/Power%20Automate-No-red "No")
+![Power BI](https://img.shields.io/badge/Power%20BI-No-red "No")
+![Power Pages](https://img.shields.io/badge/Power%20Pages-No-red "No")
+![Power Virtual Agents](https://img.shields.io/badge/Power%20Virtual%20Agents-No-red "No")
+![Dataverse](https://img.shields.io/badge/Dataverse-No-red "No")
+![AI Builder](https://img.shields.io/badge/AI%20Builder-No-red "No")
+![Custom Connectors](https://img.shields.io/badge/Custom%20Connectors-No-red "No")
+![Power Fx](https://img.shields.io/badge/Power%20Fx-No-red "No")
+
+## Compatibility
+
+![Premium License](https://img.shields.io/badge/Premium%20License-Not%20Required-red.svg "Premium license not required")
+![Experimental Features](https://img.shields.io/badge/Experimental%20Features-No-red.svg "Does not rely on experimental features")
+
+## Contributors
+
+* [Jim Duncan](https://github.com/sparkitect)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|December 30, 2025|Initial release
+
+## Prerequisites
+None
+
+## Minimal path to awesome
+
+### Using the solution zip
+N/A
+
+### Using the source code
+1. Copy the [source code](sourcecode/confirmation-dialog-component.yaml) to your clipboard.
+2. Navigate to the Components area of your Canvas App in the editor.
+3. Paste the code from your clipboard.
+4. Navigate to the Screens area of your Canvas App in the editor.
+5. Add the component (highest z-index) and configure it to your liking.
+
+## Features
+
+This solution illustrates the following concepts on top of the Power Platform:
+
+* Custom Components
+* Component Properties (Data + Event)
+
+<!--
+Note that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions in advance! You rock ❤.
+-->
+
+<!--
+RESERVED FOR REPO MAINTAINERS
+
+We'll add the video from the community call recording here
+
+## Video
+
+[![YouTube video title](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=XXXXX "YouTube video title")
+-->
+
+## Help
+
+> Note: don't worry about this section, we'll update the links.
+
+We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+If you encounter any issues while using this sample, you can [create a new issue](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=confirmation-dialog-component&authors=@sparkitect&title=confirmation-dialog-component%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=confirmation-dialog-component&authors=@sparkitect&title=confirmation-dialog-component%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=confirmation-dialog-component&authors=@sparkitect&title=confirmation-dialog-component%20-%20).
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-samples/samples/confirmation-dialog-component"  aria-hidden="true" />

samples/confirmation-dialog-component/assets/sample.json

@@ -0,0 +1,72 @@
+[
+  {
+    "name": "pnp-powerplatform-samples-confirmation-dialog-component",
+    "source": "pnp",
+    "title": "Confirmation Dialog Component",
+    "shortDescription": "The Confirmation Dialog is a reusable Canvas Component that provides a modal, app-wide confirmation experience for Power Apps.",
+    "url": "https://github.com/pnp/powerplatform-samples/tree/main/samples/confirmation-dialog-component",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/powerplatform-samples/tree/main/samples/confirmation-dialog-component",
+    "longDescription": [
+      "The Confirmation Dialog is a reusable Canvas Component that displays a centered dialog with a customizable title, message, and configurable Confirm and Cancel buttons. The component supports destructive‑action styling (highlighting the confirm button in red), optional button icons, and exposes OnConfirm and OnCancel events for app logic integration. This makes it ideal for consistent, accessible confirmation prompts across your app without rewriting the UI each time."
+    ],
+    "creationDateTime": "2025-12-30",
+    "updateDateTime": "2025-12-30",
+    "products": [
+      "Power Apps",
+      "Power Platform"
+    ],
+    "tags": [
+      "Component",
+      "Dialog"
+    ],
+    "categories": [
+      "CANVAS"
+    ],
+    "metadata": [
+      {
+        "key": "POWERAPPS-EXPERIMENTAL",
+        "value": "No"
+      },
+      {
+        "key": "POWERAPPS-PREMIUM",
+        "value": "No"
+      },
+      {
+        "key": "POWERAPPS-ONPREM",
+        "value": "No"
+      },
+      {
+        "key": "POWERAPPS-CUSTOMCONNECTOR",
+        "value": "No"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/powerplatform-samples/raw/main/samples/confirmation-dialog-component/assets/component-canvas.png",
+        "alt": "Component in design canvas"
+      },
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/powerplatform-samples/raw/main/samples/confirmation-dialog-component/assets/component-configured.png",
+        "alt": "Component in use"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "sparkitect",
+        "pictureUrl": "https://github.com/sparkitect.png",
+        "name": "Jim Duncan"
+      }
+    ],
+    "references": [
+      {
+        "name": "Microsoft Power Platform documentation",
+        "description": "Discover how to make the most of Microsoft Power Platform products with online training courses, docs, and videos covering product capabilities and how-to guides.",
+        "url": "https://learn.microsoft.com/power-platform/"
+      }
+    ]
+  }
+]

samples/confirmation-dialog-component/sourcecode/confirmation-dialog-component.yaml

@@ -0,0 +1,189 @@
+ComponentDefinitions:
+  Confirmation Dialog:
+    DefinitionType: CanvasComponent
+    Description: The Confirmation Dialog is a reusable Canvas Component that provides a modal, app-wide confirmation experience for Power Apps.
+    CustomProperties:
+      CancelButtonText:
+        PropertyKind: Input
+        DisplayName: Cancel Button Text
+        Description: Text to display on the Cancel button
+        DataType: Text
+        Default: ="No"
+      ConfirmButtonText:
+        PropertyKind: Input
+        DisplayName: Confirm Button Text
+        Description: Text to display on the Confirm button
+        DataType: Text
+        Default: ="Yes"
+      Desctuctive:
+        PropertyKind: Input
+        DisplayName: Desctuctive
+        Description: True if the action is destructive (Confirm button will be red)
+        DataType: Boolean
+        Default: =false
+      Message:
+        PropertyKind: Input
+        DisplayName: Message
+        Description: Message text of the dialog
+        DataType: Text
+        Default: ="Click " & Coalesce('Confirmation Dialog'.ConfirmButtonText,"Yes") & " to confirm or " & Coalesce('Confirmation Dialog'.CancelButtonText,"No") & " to dismiss."
+      OnCancel:
+        PropertyKind: Event
+        DisplayName: OnCancel
+        Description: fired when user clicks Cancel button or closes the dialog
+        ReturnType: None
+        Default: =
+      OnConfirm:
+        PropertyKind: Event
+        DisplayName: OnConfirm
+        Description: fired when user clicks Confirm button
+        ReturnType: None
+        Default: =
+      ShowButtonIcons:
+        PropertyKind: Input
+        DisplayName: Show Button Icons
+        Description: True to show icons on the buttons
+        DataType: Boolean
+        Default: =true
+      Title:
+        PropertyKind: Input
+        DisplayName: Title
+        Description: Title of the dialog
+        DataType: Text
+        Default: ="Confirm?"
+    Children:
+      - ContainerMain_Confirm:
+          Control: GroupContainer@1.3.0
+          Variant: ManualLayout
+          Properties:
+            BorderColor: =RGBA(214, 221, 224, 1)
+            DropShadow: =DropShadow.None
+            Fill: =RGBA(0, 0, 0, 0.45)
+            Height: =Parent.Height
+            Width: =Parent.Width
+          Children:
+            - Container_Dialog_Confirm:
+                Control: GroupContainer@1.3.0
+                Variant: AutoLayout
+                Properties:
+                  Fill: =RGBA(255, 255, 255, 1)
+                  LayoutAlignItems: =LayoutAlignItems.Center
+                  LayoutDirection: =LayoutDirection.Vertical
+                  X: =(Parent.Width - Self.Width) / 2
+                  Y: =(Parent.Height - Self.Height) / 2
+                Children:
+                  - Dialog_Confirm_HeaderContainer:
+                      Control: GroupContainer@1.3.0
+                      Variant: AutoLayout
+                      Properties:
+                        DropShadow: =DropShadow.None
+                        Fill: =RGBA(15, 108, 189, 1)
+                        LayoutAlignItems: =LayoutAlignItems.Center
+                        LayoutDirection: =LayoutDirection.Horizontal
+                        LayoutMaxHeight: =0
+                        LayoutMaxWidth: =0
+                        LayoutMinHeight: =16
+                        LayoutMinWidth: =16
+                        RadiusBottomLeft: =0
+                        RadiusBottomRight: =0
+                        RadiusTopLeft: =0
+                        RadiusTopRight: =0
+                      Children:
+                        - Dialog_Confirm_Title:
+                            Control: Text@0.0.51
+                            Properties:
+                              Fill: =RGBA(15, 108, 189, 1)
+                              FillPortions: =1
+                              FontColor: =RGBA(255, 255, 255, 1)
+                              Height: =40
+                              LayoutMaxHeight: =0
+                              LayoutMaxWidth: =0
+                              LayoutMinHeight: =16
+                              LayoutMinWidth: =16
+                              PaddingLeft: =10
+                              Size: =24
+                              Text: =Coalesce('Confirmation Dialog'.Title,"Confirm?")
+                              VerticalAlign: =VerticalAlign.Middle
+                              Weight: ='TextCanvas.Weight'.Bold
+                              Width: =Parent.Width
+                        - Button_Confirm_Dialog_Dismiss:
+                            Control: Button@0.0.45
+                            Properties:
+                              AccessibleLabel: ="Dismiss dialog"
+                              FontSize: =24
+                              Height: =40
+                              Icon: ="DismissCircle"
+                              Layout: ='ButtonCanvas.Layout'.IconOnly
+                              LayoutMaxHeight: =0
+                              LayoutMaxWidth: =0
+                              LayoutMinHeight: =16
+                              LayoutMinWidth: =16
+                              OnSelect: ='Confirmation Dialog'.OnCancel()
+                              Text: ="Dismiss"
+                              Width: =40
+                              X: =40
+                              Y: =40
+                  - Dialog_Confirm_Message:
+                      Control: Text@0.0.51
+                      Properties:
+                        FillPortions: =3
+                        LayoutMaxHeight: =0
+                        LayoutMaxWidth: =0
+                        LayoutMinHeight: =16
+                        LayoutMinWidth: =16
+                        PaddingBottom: =10
+                        PaddingLeft: =10
+                        PaddingRight: =10
+                        PaddingTop: =10
+                        Size: =18
+                        Text: |-
+                          =Coalesce(
+                              'Confirmation Dialog'.Message,
+                              "Click " & Coalesce('Confirmation Dialog'.ConfirmButtonText,"Yes") & " to confirm or " & Coalesce('Confirmation Dialog'.CancelButtonText,"No") & " to dismiss."
+                          )
+                        VerticalAlign: =VerticalAlign.Middle
+                        Width: =Parent.Width
+                  - Dialog_Confirm_ButtonContainer:
+                      Control: GroupContainer@1.3.0
+                      Variant: AutoLayout
+                      Properties:
+                        DropShadow: =DropShadow.None
+                        LayoutAlignItems: =LayoutAlignItems.Center
+                        LayoutDirection: =LayoutDirection.Horizontal
+                        LayoutGap: =10
+                        LayoutJustifyContent: =LayoutJustifyContent.End
+                        LayoutMaxHeight: =0
+                        LayoutMaxWidth: =0
+                        LayoutMinHeight: =16
+                        LayoutMinWidth: =16
+                        PaddingBottom: =16
+                        PaddingLeft: =8
+                        PaddingRight: =12
+                        PaddingTop: =8
+                      Children:
+                        - Button_Confirm_Confirm:
+                            Control: Button@0.0.45
+                            Properties:
+                              AccessibleLabel: ="Confirm action"
+                              Appearance: ='ButtonCanvas.Appearance'.Primary
+                              BasePaletteColor: =If('Confirmation Dialog'.Desctuctive,RGBA(249, 83, 109, 1),Blank())
+                              Icon: ="Checkmark"
+                              Layout: =If('Confirmation Dialog'.ShowButtonIcons,'ButtonCanvas.Layout'.IconBefore,'ButtonCanvas.Layout'.TextOnly)
+                              LayoutMaxHeight: =0
+                              LayoutMaxWidth: =0
+                              LayoutMinHeight: =16
+                              LayoutMinWidth: =16
+                              OnSelect: ='Confirmation Dialog'.OnConfirm()
+                              Text: =Coalesce('Confirmation Dialog'.ConfirmButtonText,"Yes")
+                        - Button_Confirm_Cancel:
+                            Control: Button@0.0.45
+                            Properties:
+                              AccessibleLabel: ="Cancel action"
+                              Icon: ="Dismiss"
+                              Layout: =If('Confirmation Dialog'.ShowButtonIcons,'ButtonCanvas.Layout'.IconBefore,'ButtonCanvas.Layout'.TextOnly)
+                              LayoutMaxHeight: =0
+                              LayoutMaxWidth: =0
+                              LayoutMinHeight: =16
+                              LayoutMinWidth: =16
+                              OnSelect: ='Confirmation Dialog'.OnCancel()
+                              Text: =Coalesce('Confirmation Dialog'.CancelButtonText, "No")