Modals for Power Apps
A modal is a dialog that sits on top of the screen and blocks it until the user answers: confirm a delete, acknowledge an error, type a note, decide what to do with unsaved changes. Every PowerLibs modal is three ordinary controls: a demo trigger button, a dim backdrop that closes the modal on tap, and a centred panel that is never wider than the screen minus 40 px. Reach for one when a toast is not enough because the user has to choose before going on.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Confirm Action | Paid | Classic, Modern | Are you sure? A warning badge, or a red one for a delete | Parts toggles (plus icon badge), Question, Explanation, Confirm and Cancel button, Destructive switch |
| Modal | Free | Classic, Modern | A plain dialog with a title, a text and one or two buttons; the starting point for anything custom | Parts toggles (trigger, backdrop closes, close X), Title, Text, Primary and Secondary button, Trigger button |
| Success Modal | Paid | Classic, Modern | Telling the user an action completed, with a green badge | Parts toggles, Title, Text, Button, Second button |
| Info Modal | Paid | Classic, Modern | Announcing an update with a checklist and a link | Parts toggles (plus list and link), Title, Explanation, Button, Link text and URL, List rows |
| Sign Out Modal | Paid | Classic, Modern | Confirming a sign out | Parts toggles, Question, Explanation, Sign out and Cancel button |
| Unsaved Changes Modal | Paid | Classic, Modern | Leaving a page with unsaved changes: save, discard or stay | Parts toggles (plus details box), Title, Explanation, What changed, Save, Discard and Stay button |
| Approval Request Modal | Paid | Classic, Modern | The last look before a request goes to a manager, with a summary and the approver | Parts toggles (plus summary box and approver card), Title, Explanation, Request type, Amount, Submitted, Approver name and role, Submit and Cancel button |
| Error Modal | Paid | Classic, Modern | Showing an error with a details box and Try again or Go back | Parts toggles (plus details box), Title, Explanation, Error message, Error code, Try again and Go back button |
| Input Modal | Paid | Classic, Modern | Collecting a note or a comment in a text box | Parts toggles, Title, Help text, Placeholder, Submit and Cancel button |
| Bulk Action Modal | Paid | Classic, Modern | Delete 24 selected records? with the first names and a red confirm | Parts toggles (plus list), Action word, Noun, Count, Explanation, Destructive switch, First names shown |
| Type to Confirm Modal | Paid | Classic, Modern | A delete that cannot be undone: the button stays off until the user types the word | Parts toggles, Question, Explanation, Word to type, Delete and Cancel button |
| Progress Modal | Paid | Classic, Modern | Saving or uploading, with a spinning ring and an optional percent bar | Parts toggles (spinner, percent bar, Cancel), Title, Status text, Cancel button |
| Access Denied Modal | Paid | Classic, Modern | The user is not in the right group: why, who helps, request access | Parts toggles (plus details box), Title, Explanation, Needed role, Who to ask, Request and Back button |
| Feedback Rating Modal | Paid | Classic, Modern | Five stars and a comment after something went well | Parts toggles (plus comment box), Title, Explanation, Comment placeholder, Send and Skip button |
Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Modals.
To copy a variant into Power Apps Studio, follow Getting Started. Modal is free; the other variants need a Components, Ultra, Team or Lifetime plan.
After you paste
Every modal opens when its own context variable becomes true and closes when it goes back to false. The variable is named after the modal: varShowModal, varShowConfirm, varShowError, varShowSuccess, varShowInfo, varShowInput, varShowLogout, varShowUnsaved, varShowApproval, varShowBulk, varShowTypeDelete, varShowProgress, varShowAccess, varShowFeedback. Names use your prefix settings. Because every modal has its own, several on one screen never open each other. To open one from your own button:
UpdateContext({ varShowConfirm: true })
Your own action goes on the confirm button, in front of the line that closes the modal. Every confirm button ships with a comment that says so. Orders and galOrders stand for your own table and gallery:
// btnConfirmConfirm, OnSelect
Remove(Orders, galOrders.Selected);
UpdateContext({ varShowConfirm: false })
Input Modal, Type to Confirm and Feedback Rating store what the user typed or picked in variables (varInputModalValue, varFeedbackRating, varFeedbackComment) so you can use them in a Patch. Progress Modal reads varProgressModalPercent, 0 to 100, for its bar.
Good to know
- In the Modern YAML the text input has no
Textproperty: read what was typed with.Valuewhere the formulas above say.Text. - Context variables live on one screen, so paste the modal onto the screen that opens it.
- The backdrop closes the modal on tap. Switch that part off for anything the user must answer, such as Unsaved Changes; Progress Modal ships with it off.
- The panel's height is a formula on its last button, so longer texts push the buttons down. Add your own controls inside the panel and chain their
Yoff the control above, like the generated ones do. - Keep the backdrop and the panel last in the Tree view so they draw on top of everything on the screen.
- Every modal offers Classic and Modern on the YAML tab, with the same layout and the same names.
- The primary button and the brand badge follow your brand color. Red, amber and green badges keep their meaning in both themes.
Related
Open the category at Modals. For feedback that does not block the screen, see Toast; for a panel that slides in from the side, see Drawer.