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.

• 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

• 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:

• 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.

• 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.

• Set the variable name VarVisible on the visible property of the Grouped_DialogBox.

Visible = VarVisible 

• 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.

• 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) 

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.

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

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

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:

• How to use PowerApps search() function SharePoint list?
• How to use Power Apps label control?
• HTML text control in Power Apps