How To Create a Popup Confirmation in PowerApps

A good practice in your apps is to prevent a user from accidental deleting records and to alert the user before deleting records. The best way to achieve this is through the use of a popup to confirm the delete. In this post I will show you step by step how to create a popup confirmation in PowerApps using a reusable component. Continue reading and you too will be an office power user!

How-to-Create-a-Popup-Confirmation-in-PowerApps

First thing we will do is create the popup confirmation component and then we will set it up in the screen.

Creating the Popup Confirmation Component

  • Component
    • Name: ComponentConfirmation
    • Width: 1366
    • Height: 753
    • Fill: RGBA(0, 0, 0, 20%)
    • OnReset:
      Set(
      varShowHide,
      false
      );
      Set(
      varConfirmDelete,
      false
      )
    • WarningMessage: “Are you sure?” // Create the custom property “WarningMessage” below first.
    • ConfirmDelete: varConfirmDelete // Create the custom property “ConfirmDelete” below first.
    • ButtonReturn: varShowHide // Create the custom property “ButtonReturn” below first.
  • New Custom Property (Used to display the message for confirm.)
    • Display name: WarningMessage
    • Name: WarningMessage
    • Description: WarningMessage
    • Property type: Input
    • Data type: Text
  • New Custom Property (Used to output yes or no to delete.)
    • Display name: ConfirmDelete
    • Name: ConfirmDelete
    • Description: ConfirmDelete
    • Property type: Output
    • Data type: Boolean
  • New Custom Property (Used to show or hide the popup.)
    • Display name: ButtonReturn
    • Name: ButtonReturn
    • Description: ButtonReturn
    • Property type: Output
    • Data type: Boolean
  • Rectangle
    • X: 352
    • Y: 244
    • Width: 687
    • Height: 216
    • Fill: RGBA(0, 0, 0, 60%)
  • Label
    • Text: ComponentConfirm.WarningMessage
    • X: 416
    • Y: 268
    • Width: 607
    • Height: 58
    • Color: RGBA(255, 255, 255, 1)
  • Icon
    • Icon: Icon.Cancel
    • X: 582
    • Y: 340
    • Width: 64
    • Height: 64
    • Color: RGBA(255, 255, 255, 1)
    • OnSelect:
      Set(
      varShowHide,
      true
      );
      Set(
      varConfirmDelete,
      false
      )
  • Icon
    • Icon: Icon.Check
    • X: 766
    • Y: 340
    • Width: 64
    • Height: 64
    • Color: RGBA(255, 255, 255, 1)
    • OnSelect:
      Set(
      varShowHide,
      true
      );
      Set(
      varConfirmDelete,
      true
      )

Now to Setup the Screen and Insert Your Popup Confirmation Component

For this setup I am not going add all the menus and visuals as in the animated image above. However, we will setup a delete icon to trigger this component and a time control to get this functioning so you can add to your PowerApps.

  • Icon
    • Icon: Icon.Trash
    • X: 1027
    • Y: 378
    • Width: 44
    • Height: 44
    • Color: RGBA(105,121,126,1)
    • OnSelect:
      Reset(ComponentConfirm_1); //We will insert the component shortly.
      UpdateContext(
      {
      varWarningMessage: “Are you sure you want to remove ” & “Pass in your item user is deleting here. “& ” ?”,
      varShowWarning: true
      }
      )
  • Timer Control
    • Name: TimerDelete
    • Duration: 1
    • Repeat: false
    • Auto start: false
    • Auto pause: true
    • visible: false
    • Start: ComponentConfirm_1.ConfirmDelete
    • OnTimerEnd:
      UpdateContext({varShowSpinner: true});// Here I am showing a spinner component while processing. See link below to learn how to add this.
      RemoveIf(
      ‘[dbo].[tblYourTable]’,
      ID = varRecordID
      );
      UpdateContext({varShowSpinner: false})
  • Component – This is your newly created component. Insert from the components menu. I saved this for last so that it is layered on top.
    • Name: ComponentConfirm_1
    • X: 0
    • Y: 0
    • Width: 1366
    • Height: 753
    • Fill: RGBA(0, 0, 0, 20%)
    • WarningMessage: varWarningMessage
    • Visible: !ComponentConfirm_1.ButtonReturn && varShowWarning

Now you know how to create a popup confirmation in PowerApps! Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles are posted regularly.  

Additional Component Resources

For more step by step guides using components please see my posts on:
how-to-create-a-spinner-component-in-powerapps
how-to-build-a-menu-component-in-powerapps

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

7 Responses

  1. Jim B. says:

    This worked perfectly for me. Thank you for the thorough details I was able to follow along and actually get it working!

  2. JVojin says:

    One more thing i encountered – be careful with varShowWarning . If it stays true, next reset call of popup component( me – screen OnVisible had Reset(popup)) will make popup visible. I have had that problem.
    Very nice solution for popup – elegant.

    • Paul Rodrigues says:

      Thanks for the feedback. In this demo I only reset the component from one place. When I reset the component the ComponentConfirm_1.ButtonReturn is false and I set the visible property to !ComponentConfirm_1.ButtonReturn then from the component it set’s true which hides it.

  1. September 8, 2019

    […] For more step by step guides using components please see my posts on:how-to-create-a-popup-confirmation-in-powerappshow-to-build-a-menu-component-in-powerapps […]

  2. September 8, 2019

    […] For more step by step guides using components please see my posts on:how-to-create-a-popup-confirmation-in-powerappshow-to-create-a-spinner-component-in-powerapps […]

  3. October 24, 2019

    […] Do It For Mehow-to-create-a-spinner-component-in-powerappshow-to-create-a-popup-confirmation-in-powerapps […]

  4. November 30, 2019

    […] how-to-create-a-spinner-component-in-powerappshow-to-create-a-popup-confirmation-in-powerapps […]

Leave a Reply

Your email address will not be published. Required fields are marked *