Power Apps Popup Dialogs: Two Essential Patterns for User Interaction

In Power Apps, many common user interface elements require custom construction. One such element is the popup dialog – a modal overlay that demands a user’s attention before they can continue. While the platform does not include a native popup control, you can easily build one using labels, buttons, and context variables. This article walks through two practical patterns: a confirmation dialog for deletions and a data entry form for adding or editing records. By the end, you’ll have reusable techniques to integrate popups into any canvas app.

Our Example Scenario: A Project Task Manager

We’ll build a small Project Task Manager app. The main screen contains a gallery showing tasks from a SharePoint list or Dataverse table named Tasks. Each task has the following columns:

• TaskID (number, primary key)
• Title (text)
• Priority (choice: High, Medium, Low)
• AssignedTo (person or text)
• DueDate (date only)
• Status (choice: Not Started, In Progress, Completed)

The gallery displays the Title, Priority, and DueDate of each task. Two icons next to each item allow the user to delete or edit the task. A “+” button outside the gallery opens a form to add a new task.

Rather than navigating to another screen, we will use popup dialogs for both the delete confirmation and the add/edit form.

The Overlay Pattern

Every popup dialog in this article follows the same foundation: an overlay label that prevents interaction with the rest of the app and a front label (or container) that holds the dialog content. Both are made visible or hidden with a boolean context variable.

Create two labels on your screen (outside the gallery) with these properties:

Label for the overlay

• Name: lbl_Overlay
• Fill: RGBA(128, 128, 128, 0.25) (semi‑transparent gray)
• Width: App.Width
• Height: App.Height
• Visible: varShowDeleteConfirm Or varShowTaskForm

Label for the dialog backplate

• Name: lbl_DialogBackplate
• Fill: Color.White
• Width: 420 (adjust to taste)
• Height: 260 (will change when we add controls)
• X: (App.Width – Self.Width) / 2
• Y: (App.Height – Self.Height) / 2
• Visible: varShowDeleteConfirm Or varShowTaskForm

Throughout this article we will place additional controls on top of lbl_DialogBackplate. Grouping all the dialog controls together makes the app easier to maintain.

/* TODO: Insert screenshot showing overlay and white dialog placeholder on top of the gallery. */

Pattern 1: Delete Confirmation Dialog

When a user clicks the trash icon on a task, we want to ask “Are you sure?” before removing the record permanently.

1. Variables and Trigger

Set the OnSelect of the delete icon to:

UpdateContext({
  varShowDeleteConfirm: true,
  varRecordToDelete: ThisItem
})

varShowDeleteConfirm controls the visibility of the dialog elements. varRecordToDelete stores the task object that will be removed.

2. Controls Inside the Dialog

Add the following controls to lbl_DialogBackplate:

Label: title of the dialog

• Text: "Confirm Deletion"
• FontWeight: Semibold
• FontSize: 18
• X: 20, Y: 20, Width: 380

Label: the question

• Name: lbl_DeleteQuestion
• Text: "Are you sure you want to delete \"" & varRecordToDelete.Title & "\"?"
• Y: 60

Button: OK

• Text: "Delete"
• Fill: RGBA(200, 0, 0, 1) (red to indicate destructive action)
• OnSelect:

Remove(Tasks, LookUp(Tasks, TaskID = varRecordToDelete.TaskID));
UpdateContext({varShowDeleteConfirm: false})

Button: Cancel

• Text: "Cancel"
• OnSelect:

UpdateContext({varShowDeleteConfirm: false})

Position the buttons side by side near the bottom of the dialog.

When the user clicks OK, the record is found by its TaskID and removed from the data source. Both buttons hide the dialog after the action.

/* TODO: Insert screenshot of the delete confirmation popup with a task title. */

Pattern 2: Data Entry Popup (Add / Edit)

This pattern reuses a single popup for both creating and updating tasks, switching between NewForm and EditForm mode.

1. Variables and Trigger

We need two variables:

• varShowTaskForm (boolean) – shows/hides the popup.
• varFormRecord (record) – the task being edited, or Blank() when adding.

New task button (outside the gallery):

NewForm(frm_TaskForm);
UpdateContext({
  varFormRecord: Blank(),
  varShowTaskForm: true
})

Edit icon (inside the gallery):

UpdateContext({varFormRecord: ThisItem});
EditForm(frm_TaskForm);
UpdateContext({varShowTaskForm: true})

2. The Edit Form Control

Place an Edit form control (name: frm_TaskForm) inside the dialog backplate. Configure its key properties:

• DataSource: Tasks
• Item: varFormRecord
• Visible: varShowTaskForm

Inside the form, add DataCard fields for Title, Priority, AssignedTo, DueDate, and Status. Arrange them in a single‑column layout with a comfortable width.

3. Dialog Title and Buttons

Add a label at the top of the dialog that changes its text based on the form mode:

If(frm_TaskForm.Mode = FormMode.New, "Add New Task", "Edit Task")

Add two buttons at the bottom:

OK button:

SubmitForm(frm_TaskForm)

Cancel button:

UpdateContext({varShowTaskForm: false})

4. After Successful Submission

On the form’s OnSuccess property, hide the popup so the user returns to the gallery:

UpdateContext({varShowTaskForm: false})

The gallery automatically reflects the new or changed record because the data source binding refreshes.

/* TODO: Insert screenshot of the data entry popup showing fields for a new task. */

Common Mistakes and Troubleshooting

• Overlay not covering the whole screen: Ensure Width = App.Width and Height = App.Height. If you have a header or navigation bar, you can adjust the Y position, but generally covering everything is fine.
• Form does not switch modes correctly: Always call NewForm or EditForm before setting varShowTaskForm = true. This ensures the form is in the proper mode when it becomes visible.
• Record not found when deleting: Double‑check that you are using the correct column name for the lookup (e.g., TaskID not ID). The column must be unique.
• Popup appears behind other controls: Make sure the dialog labels are placed at the top of the screen’s z‑order (use “Bring to Front”).
• Variable not persisting across screen navigation: If you navigate away and come back, context variables reset. Consider using a global Set variable if you need the popup state to survive, though staying on the same screen is simpler.

Performance and Delegation Considerations

• The overlay and dialog labels are low‑weight controls; they have minimal impact on performance.
• Remove with LookUp delegates well when the lookup is based on a key column. For extremely large data sources ( > 500 items), test the delegation warning. You might switch to Remove(Tasks, varRecordToDelete) if you already have the full record from the gallery, avoiding a second lookup.
• For the form, always use the built‑in Edit form with a data source; it handles patching and delegation automatically.

Final Recommendation

The popup dialog pattern described here is lightweight, requires no custom components or third‑party libraries, and can be adapted for any modal interaction – from simple confirmations to multi‑field data entry. By keeping the overlay and dialog controls well organized, you can add multiple popups to a screen without confusion. Start with delete confirmation (it is the simplest) and then extend to data entry forms; reuse the same overlay technique for both.

/* TODO: Insert a final screenshot of the app with a popup open and the gallery in the background. */

References

• Original inspiration for this article: How To Create A Pop-up Menu In Power Apps – Matthew Devaney
• Microsoft Learn – Create a canvas app from scratch
• Microsoft Learn – Work with forms in canvas apps
• Microsoft Learn – Remove records from a data source