Creating Pop-Up New/Edit Forms in PowerApps

Introduction

Creating a popup with new or edit form was a most suitable solution to my recent requirement. In this post, we'll look at how to make a pop-up with new or edit form which navigates from parent form. This could also be implemented/navigated to open popup form through gallery. For now, let's take the example of a creating the popup form.

I have implemented this feature on complex problem, However implementing this on a simple form for demo and learning purpose.

Scenario

In this article, we shall see how to make PowerApps forms as PopUp.

Objective

I have a parent form with textbox, multiline textbox, drop down, lookup columns and hyperlink etc.

A form should appear after user clicks the hyperlink, projecting the popup form. User should click on button to perform the actions from PopUp form. Submit to save the data, Cancel to decline the change. Here is my parent form where the hyperlink is available and from where the popup form will open.

For creating Parent form from scratch Kindly refer my previous article.

Step 1. Add a hyperlink to the form

Unlock the datacard inside which the hyperlink has to be added and add the HTML Text control to add the hyperlink.

Step 2. Set a variable named varFormPopUp on click on hyperlink

Modify the text on html text control and align the html control to appropriate position.

Step 3. Set a variable named varFormPopUp on click/select of hyperlink

Set(varFormPopUp, true); to be set on OnSelect event.

We'll use a collection of controls, including rectangles,Icons, labels, and buttons to make a popup in PowerApps. One variable will be used to change a visible property of this group. As a result, we will be able to display and hide the popup based on a variable value.

We need to bring the controls in forward to make it appear as desired.

If we need to add another control after making the group then again we need to click group menu after selecting the group and those particular controls or the groups can be ungrouped and grouped again.

Note. After grouping the controls ensure to verify the formula on visible property. Sometimes it gets overridden and disappears.

Step 4. Add different controls to create a popup on the screen

1. As seen below, include a full-screen rectangle and adjust the Fill property opacity to 0.5. The rectangle will become transparent as a result.
2. Add a form, attach the data source, submit button, cancel icon and make a group of these controls as shown below. We need to bring the control to forward to make it appear as desired ( this step is dependent on sequence of the controls added).
   

Step 5. Connect the data source to the form so that the values could be stored in the list

Click on data source and add the datasource.

After adding the datasource I have realigned the popup like below.

Step 6. Set visible property for the group

This group's visible attribute should be set to "varFormPopUp". The initialization of this variable was done in Step 3. When we set property for group, it automatically assigns the variable to all controls inside group.

Step 7. Set visible property for submit and cancel buttons

Set the variable to false, a popup will not be visible when the Submit button is clicked.

Set(varFormPopUp,false)

Do the same for cancel icon too to disappear the popup.

Step 8. Set form mode to new for the popup form

Final Step

Conclusion

In the above article we saw how to make a form as popup, we tried adding a value in the list and show that value in drop down in the parent form.