Create a Power Apps dialog box or Popup message box

This Power Apps tutorial will go over how to create a dialog box or a pop-up message within the Power Apps.

We recently received a request to create a dialog box in PowerApps while working on the Power Apps canvas app.

There is a Power Apps employee registration form with a save icon. When the icon is clicked a dialog box will appear.

For this, we need to build a dialog box within the Power Apps. To fulfill this requirement, the following steps are:

Create a dialog box in Power Apps

Let us understand the requirement. There is an employee registration form where the user will insert the data for the employee registration. Also, there is a Save icon to save the data.

Requirement:

As per the requirement, when the user clicks on the Save icon, a dialog box will appear with two buttons such as Save and Cancel. As per the user’s selection, the form will proceed forward to save the data or cancel the process.

PowerApps dialog box
PowerApps dialog box
  • Here, we have a SharePoint list named Employee Details having different types of columns such as:
    1. Employee ID: Single line of text
    2. Employee Name: Person or Group
    3. Department: Choice
    4. Join Date: Date and Time
    5. Contact: Number
    6. Date of Birth: Date and Time
    7. Address: Multiline text
Create a dialog box within the Power Apps
Create a dialog box within the Power Apps
  • Build a blank canvas app within the Power Apps and add the above SharePoint list i.e., Employee Details as data.
  • Add a Power Apps edit form to the canvas app and connect the SharePoint list as the data source. We can see all the SharePoint list columns will be retrieved to the Power Apps edit form.
  • Also, add a save icon to the edit form and place it top of the form as shown below:
Create dialog box in Power Apps
Create a dialog box in Power Apps
  • As there is no specific control available to create a dialog box, we will add the below components to the app to create it such as:
    1. A Rectangle (Navigate Inserts > Popular > Rectangle)
    2. A label control (Navigate Inserts > Popualr > Text label). Give a text to the label. Ex: Select Save to submit or Cancel the process
    3. Two buttons (Navigate Inserts > Popular > Buttons). Rename the buttons such as Save and Cancel.
  • Once you added all the components, let’s group them. For this, Ctrl+ Select the above-mentioned components > right-click > Group.
  • Give a name to the group i.e., Group_DialogBox.
Create a dialog box in PowerApps
Create a dialog box in PowerApps
  • Select the Save icon and insert the below expression to create a variable.
OnSelect = Set(VarVisible, true)

Where VarVisible is the name of the variable and true is the variable’s value.

Create a popup message in Power Apps
Create a popup message in Power Apps
  • Set the variable name VarVisible on the visible property of the Grouped_DialogBox.
Visible = VarVisible 
Power Apps create a dialog box
Power Apps create a dialog box
  • Select the Save button and insert the below expression on the button’s OnSelect property.
OnSelect = Notify("Registration Submitted Successfully!!!", NotificationType.Success, 5000); Set(VarVisible, false); SubmitForm(Form1); NewForm(Form1);

Where Form1 is the name of the Power Apps edit form.

Build a Power Apps dialog box
Build a Power Apps dialog box
  • Similarly, select the Cancel button and enter the following expression into the OnSelect property of the button to cancel the process and return to the edit form with the fields reset.
OnSelect = Notify("Registration canceled Successfully!!!",NotificationType.Information,5000); Set(VarVisible,false); ResetForm(Form1) 
How to create a dialog in Power Apps Canvas apps
How to create a dialog in Power Apps Canvas apps

That’s it! Let’s save the app and publish it. Preview the app and fill in the employee registration field. While clicking on the Save icon, it will display the dialog box.

Note: Make sure to set the default mode of the edit form as New.

Create a dialog box within the Power Apps
Create a dialog box within the Power Apps

If we click on the Save button, it will save the inserted data to the specified SharePoint list.

Creating a dialog in PowerApps
Creating a dialog in PowerApps

Similarly, if we click on the Cancel button, it will redirect to the form with an informative notification as shown below:

PowerApps Popup message Box
PowerApps Popup Message Box

This is how to create a dialog in Power Apps Canvas apps.

Conclusion

From this Power Apps tutorial, we learned how to create a dialog box within the Power Apps canvas apps.

You may also like the following Power Apps tutorials:

>