Overlay Forms in Canvas Apps: A Container-Based Modal Approach

Modals draw the user’s focus to a specific action before they can proceed. In canvas apps, containers make it easy to build an overlay panel that sits above the screen, collects a quick decision, and patches a data source immediately—all without navigating to a separate form. This article shows you how to create such a modal using a container‑based design.

Scenario: Equipment Audit Checklist

Maintenance operators on a factory floor use a canvas app to record the status of each safety check item. The main screen shows a gallery of equipment checks. When an operator taps an item, an overlay appears with the item name and three radio options: Approved, Rejected, or Not Applicable. After pressing OK, the choice is written to SharePoint and the gallery updates with a relevant icon.

SharePoint List Setup

Create a new list named EquipmentChecks with the following columns:

Populate the list with sample items:

• Emergency stop buttons functional
• Safety guards in place
• Lubrication levels adequate
• Exhaust ventilation operational
• Electrical panels sealed

Building the Main Gallery

1. Open Power Apps Studio and create a new app from blank.
2. Add a screen with a title label and a gallery below it.
3. Set the gallery’s Items property to the SharePoint list:

'EquipmentChecks'

1. Adjust the gallery’s TemplatePadding to 20 and TemplateSize to 100 so each row has room.
2. Inside the gallery template, insert a Container and stretch it to fill the row. Give it a light drop shadow and a slight border radius:

BorderRadius: 5
DropShadow: DropShadow.Semilight

1. Add a Label inside the container to display the check title:

ThisItem.Title

1. Over the entire container, place a Button that will act as the hit target. Make it fully transparent:

AutoDisableOnSelect: false
BorderStyle: BorderStyle.None
Color: Color.Transparent
DisabledColor: Color.Transparent
DisabledFill: Color.Transparent
Fill: Color.Transparent
HoverColor: Color.Transparent
HoverFill: Color.Transparent
PressedColor: Color.Transparent
PressedFill: Color.Transparent

1. In the button’s OnSelect, store the selected item and show the modal:

Set(varSelectedItem, ThisItem);
Set(varShowModal, true);

Designing the Modal Overlay with Containers

The overlay uses two nested containers: an outer one that darkens the screen (blocking interaction) and an inner one that holds the content.

1. Insert a Container and resize it to fill the entire screen. Set its Fill to a semi‑transparent black:

RGBA(0, 0, 0, 50%)

1. Inside that container, place a second Container to serve as the white modal card. Position it in the center of the screen and set its fill:

Color.White

1. Add a Label at the top of the card to show the selected item’s title:

varSelectedItem.Title

1. Add a Radio control below the label with the three choices. Set its Items property to the choices of the SharePoint column:

Choices('EquipmentChecks'.ApprovalStatus)

1. Set the Default property of the radio to the currently saved value so the user sees the previous selection when reopening:

varSelectedItem.ApprovalStatus.Value

1. At the bottom of the card, add a Button with the text OK. In its OnSelect, patch the list, close the modal, and reset the radio:

Patch(
  'EquipmentChecks',
  varSelectedItem,
  {ApprovalStatus: rdoApprovalStatus.Selected}
);
Set(varShowModal, false);
Set(varSelectedItem, Blank());
Reset(rdoApprovalStatus);

1. Finally, tie the visibility of the entire overlay (the outer container) to the variable:

varShowModal

Showing Status Icons in the Gallery

After the modal closes, the user needs to see at a glance what was selected. Add an Icon control inside the gallery container, to the right of the title.

Set the Icon property to conditionally show a badge:

Switch(
  ThisItem.ApprovalStatus.Value,
  "Approved",
  Icon.CheckBadge,
  "Rejected",
  Icon.CancelBadge,
  "NotApplicable",
  Icon.Blocked,
  Icon.Help
)

Give each icon a matching color:

Switch(
  ThisItem.ApprovalStatus.Value,
  "Approved",
  RGBA(54, 176, 75, 1),
  "Rejected",
  RGBA(184, 0, 0, 1),
  "NotApplicable",
  RGBA(0, 134, 208, 1),
  RGBA(116, 116, 116, 1)
)

Performance & Delegation Notes

• The Patch operation in the OK button works on a single record, so it does not face delegation limits. If you ever need to patch multiple records, use ForAll with caution—it may exceed the delegation limit on large lists.
• The Choices function returns a limited set (typically 250 items). For a choice column with only three values this is never a problem.
• Using a transparent button over the gallery item is a lightweight way to capture taps; do not nest too many controls inside the gallery that could affect scrolling performance.

Common Mistakes and Troubleshooting

• Modal not showing after tap – Verify the outer container’s Visible property is set to varShowModal and that the variable is set to true in the transparent button’s OnSelect.
• Radio button shows outdated selection – Always call Reset(rdoApprovalStatus) when closing the modal; otherwise the radio keeps the last selection instead of reflecting the stored value.
• Patched value not saved – Double‑check that the column name in Patch matches the SharePoint internal name exactly. For choice columns, use the .Value property of the radio’s Selected result.
• Gallery does not refresh – By default, the gallery automatically refreshes when the underlying data changes. If not, call Refresh('EquipmentChecks') after patching.

Final Recommendation

Using containers for a modal overlay keeps the UI self‑contained and avoids switching screens. Always reset your input controls when closing the modal to prevent stale data from appearing. This pattern works well for confirmation dialogs, quick forms, and any scenario where you need a focused interaction without leaving the current view.

References

• Original article by Matthew Devaney: Power Apps Modal Dialog For Canvas Apps Using Containers
• Microsoft Learn: Using containers in Power Apps (placeholder – exact URL not verified)