How To Create A Pop-up Menu In Power Apps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/how-to-create-a-pop-up-menu-in-power-apps/. Author: Matthew Devaney.

How To Create A Pop-up Menu In Power Apps Posted by - Matthew Devaney on - July 27, 2020 23 Comments

A pop-up menu brings a question to the user’s attention and asks them to make a decision. Though it is a common element in many app designs you must create a pop-up in Power Apps for yourself. It does not come as a standard feature.

This tutorial will show you how to make 2 different types of pop-up menus: a form to add new/edit items in a gallery and another pop-up to confirm removal of an item.

Confirmation Pop-up Menu : Delete An Item

The ‘Car Repair Work Order’ app is used by an auto-service business to record work being done on customer’s cars. Each work order item in the gallery can be edited by clicking the pencil icon or deleted by clicking the trash can icon.

We will start by building a pop-up menu to confirm deletion of a work order item. Preventing the user from accidentally deleting an item is good app design.

Place a new label with no text and a white fill on the screen called lbl_PopUpDelete_Window .

Add this code to the Visible property of lbl_PopUpDelete_Window .

locShowPopupDelete // variable to open the popup Code language: JavaScript ( javascript )

Directly underneath create another label called lbl_PopUpDelete_Overlay with the following properties. This will serve as an overlay to prevent a user from clicking elsewhere in the app when the popup is open.

Fill : RGBA(128, 128, 128, 0.2) // transparent gray color Height : App.Height

Visible : locShowPopupDelete // variable to open the popup Width : App.Width Code language: HTTP ( http )

The popup menu should appear when the the user clicks the delete icon. Put this code in the OnSelect property of the delete icon. UpdateContext ({ locShowPopupDelete : true,

// stores which record was selected for deletion locRecordPopupDelete: ThisItem }) Code language: CSS ( css )

Click the trash can icon to make the pop-up appear. Then we will add four new controls to make the menu shown below. Label: lbl_PopUpDelete_Title Text: "Delete Work Order Item" Code language: JavaScript ( javascript ) Label: lbl_PopUpDelete_Question

Text: "Are you sure you want to delete '" &locRecordPopupDelete.Description& "' from the work order?" Code language: JavaScript ( javascript ) Button: lbl_PopUpDelete_OK OnSelect: //deletes the item from the datasource

Remove( 'Car Repair Work Orders' , LookUp( 'Car Repair Work Orders' , ID=locRecordPopupDelete.ID)); // hides the popup menu

UpdateContext({ locShowPopupDelete : false }) Code language: JavaScript ( javascript ) Button: lbl_PopUpDelete_Cancel OnSelect :

UpdateContext ({ locShowPopupDelete : false}) Code language: CSS ( css )

Now you should have 6 controls included in your pop-up menu. They can be grouped together to achieve better organization.

Click the OK button on the confirmation popup to delete the item. It will be removed from the datasource and the gallery. You have now created your first pop-up menu in Power Apps. Data Entry Pop-up Form : Add An Item

We will now create another pop-up: a data entry form used to add new items to the work order. Once again, insert a new label with no text and a white fill on the screen and call it lbl_PopUpForm_Window this time.

Put this code inside the Visible property of lbl_PopUpForm_Window .

locShowPopupForm // variable to open the popup Code language: JavaScript ( javascript )

Then make another label to act as the overlay called lbl_PopUpForm_Overlay with these properties:

Fill : RGBA(128, 128, 128, 0.2) // transparent gray color Height : App.Height

Visible : locShowPopupForm // variable to open the popup Width : App.Width Code language: HTTP ( http )

Create the following 3 controls and place them within the pop-up. Label: lbl_PopUpForm_Title Text: "New Work Order Item" Code language: JavaScript ( javascript ) Button: lbl_PopUpDelete_OK OnSelect: // code to submit the form will go here Code language: JavaScript ( javascript ) Icon: ico_PopUpDelete_Close OnSelect: //deletes the item from the datasource

Remove( 'Car Repair Work Orders' , LookUp( 'Car Repair Work Orders' , ID=locRecordPopupDelete.ID)); // hides the popup menu

UpdateContext({ locShowPopupDelete : false }) Code language: JavaScript ( javascript )

Next, create an Edit Form called frm_PopUpForm_Form and place it inside the popup. Change the layout of the Edit Form to 1 row and 2 columns. Resize the fields as shown below.

Write this code in each respective property of the form. Datasource : 'Car Repair Work Orders' Item : locRecordPopupForm Visible : locShowPopupForm Code language: HTTP ( http )

Then go back and write this code in the OnSelect property of the OK button. It will submit the form and hide the pop-up. SubmitForm ( frm_PopUpForm_Form );

UpdateContext ({ locShowPopupForm : false}); Code language: CSS ( css )

The user opens the pop-up form by clicking the New Item icon.

Put this code in the OnSelect property of the icon. // change the form to new mode NewForm(frm_PopUpForm_Form); UpdateContext({ locShowPopupForm : true ,

// use a blank record to fill-in the form locRecordPopUpForm : Blank() }); Code language: JavaScript ( javascript )

Now test the pop-up form by entering a new item ‘Windshield Wipers’ with an amount of $25.00.

Once you click OK the New Item is inserted into the datasource and appears inside the gallery. Data Entry Pop-up Form : Edit An Item

With only a few lines of code we can use the same pop-up to edit an item as well.

Write this code in the OnSelect property of the edit icon.

UpdateContext ({ locRecordPopupForm : ThisItem}); EditForm ( frm_PopUpForm_Form );

UpdateContext ({ locShowPopupForm : true}); Code language: CSS ( css )

Click on the edit icon to open the pop-up form. Change the Text property of lbl_PopUpForm_Title to this code.

If (frm_PopUpForm_Form.Mode=FormMode. New , "New Work Order Item" , "Edit Work Order Item" ) Code language: PHP ( php )

Write-in a new amount for the ‘Replace Spark Plugs’ item: $250.00

Click the OK button. The amount is now changed to $250.00. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about how to create a pop-up menu please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Forms Menus Modals Pop-up UI UX Visible Property Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps