How To Create A Popup Screen In PowerApps

Introduction

 

A Popup or Dialog box is very useful in web and mobile applications. It helps us to show information or get input from the user. We create popups like confirm dialog, alert dialog, and other custom dialogs in many applications.

 

PowerApps does not have any built-in dialog control, but using the below approach we can create our custom dialog box or popup screen as per our requirement.

 

Scenario

 

We will create a popup/dialog box, where we will take confirmation from the user to delete the record with the Yes/No buttons. In the end, our popup will be like below,

 

 

So let's start the step by step implementation.

 

Implementation

 

Create a SharePoint list as below,

• Create a list called Employees Information with the below field to show records in PowerApps and also delete an item using popup,

• PowerApps Implementation

• Open PowerApps >Click on Create >Select Canvas app from a blank > Give an app name and select format

• Add Data source - Go to the View > Select Data Source > Search SharePoint > Select Connection > Select Site > select list (Employee Information)

• Add a Blank gallery to a blank screen

• Go to the Insert > Select Gallery > Select Blank vertical

• Add labels called Name and DOB and a delete icon for open the Popup

• Now map the labels with data source as below, 

• Set the Text property of Name label and DOB label as below,
  
  
• ThisItem.'Name (Title)'
• ThisItem.DOB

•  After setting these properties gallery will be like this,

• Now we have to create a popup screen so for that:

• We will add a rectangle to cover the whole screen to blur the background while the popup is open. And then we will set the color property. So for this we will use the light gray color in custom transparency.

• Now we will add a rectancle and in this rectangle we will add 2 labels for Popup title and message, and 2 buttons for Yes and No. We'll create a group for all these controls so when we show/hide the popup controls remains the same. 

How to create a group for controls?

 

Select all popup controls > move to the Home > select group icon > select group

• Our screen with all the controls will look like below,

 

 Now we will use some actions for controls to show/hide the popup screen. So let's start to apply the formulas,

• Select delete icon in the gallery and Set OnSelect Property as below,

• Set OnSelect property of No button of the popup to set the dialog to false as below.

• Use dialog variable with Visible property of the Rectangle (which we have used to cover background) and group (which we have used for dialog group) as below,

• Now we will remove the item from the data source and will update the context on the selection of the Yes button as below,

 

Now test the PowerApps using the F5 command.

 

Source Code 

 

You can download the full source code from the zip file. After downloading the zip file you have to create the SharePoint list as mentioned above and set the data source in PowerApps.

 

Output 

 

 

Summary

 

In this article, we have seen the step by step implementation of how to create a popup screen/dialog box.

 

I hope you like this. If it is helpful to you then share it with others. Give your valuable feedback and suggestions in the comments section below.

 

Sharing is caring!!!