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 be 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 PowerApps, Power BI and Power Automate. #PowerAddict

You may also like...

4 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!

  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 […]

Leave a Reply

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