Drawer for Power Apps
A drawer is a panel that slides in over the current screen, with a dimmed area behind it, so the user can act on a record without leaving the list. Every PowerLibs drawer pastes as three controls: a demo trigger button, a scrim over the whole screen that closes the drawer when tapped, and the panel, declared last so it draws on top. One context variable per drawer decides whether the scrim and the panel are visible. Form Drawer and Bottom Sheet are free; the other four need a Components, Ultra, Team or Lifetime plan.
Pick a variant
| Component | Plan | YAML | What it is for | Settings you can change |
|---|---|---|---|---|
| Bottom Sheet | Free | Classic, Modern | A quick entry on a phone: hours, a note, a status change | Trigger, Title, Description, fields, Save text, parts (grab handle, close icon) |
| Form Drawer | Free | Classic, Modern | The new-record or edit side panel of a list screen | Trigger, Title, Description, up to six fields (text, multiline, dropdown, date), Save and Cancel texts, parts |
| Detail Drawer | Paid | Classic, Modern | The selected approval, ticket or order opened next to its list | Trigger, Reference, Status, Title, Person, label and value rows, Notes, two decision buttons, parts |
| Filter Drawer | Paid | Classic, Modern | The filter panel of a list: chips, an owner, a date range | Trigger, Title, two chip rows (up to eight chips each), dropdown options, date range label, Reset and Apply texts, parts |
| Action Sheet | Paid | Classic, Modern | Edit, duplicate, delete on a record, the phone way | Trigger, what it is about, up to six actions with icon and a destructive flag, Cancel text, parts |
| Comments Drawer | Paid | Classic, Modern | The conversation on a ticket, approval or task | Trigger, Title, demo comments, composer placeholder and Send text, parts |
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: Drawer.
To copy a variant into Power Apps Studio, follow Getting Started.
After you paste
Each drawer has its own context variable: varShowFormDrawer, varShowBottomSheet, varShowDetailDrawer, varShowFilterDrawer, varShowCommentsDrawer, varShowActionSheet. Names follow your prefix settings. The trigger sets it to true; the scrim, the close icon and the footer buttons set it to false. To open a drawer from your own control, for example a row in a gallery:
UpdateContext({ varShowDetailDrawer: true })
A context variable lives on one screen, so paste the drawer on the screen that opens it. Delete the demo trigger button once your own control opens the drawer.
Form Drawer and Bottom Sheet hold real input controls named txtFormField1 to txtFormField6. Nothing is kept in a collection; the Save button reads the controls:
Patch(Expenses, Defaults(Expenses), {
Title: txtFormField1.Text,
Category: txtFormField3.Selected.Value,
ExpenseDate: txtFormField4.SelectedDate
});
UpdateContext({ varShowFormDrawer: false })
Filter Drawer keeps the chosen chips in two collections, colFilterStatus and colFilterPriority, one record { value: "Open" } per chip. Your gallery reads them directly, and an empty collection means no filter on that row:
Filter(Tickets,
(IsEmpty(colFilterStatus) || Status in colFilterStatus.value),
(IsEmpty(colFilterPriority) || Priority in colFilterPriority.value),
Created >= txtFilterFrom.SelectedDate
)
Comments Drawer shows the collection colDrawerComments and its composer adds to it. The trigger seeds three demo comments; once the gallery reads your own data source, delete that Collect.
Detail Drawer and Action Sheet show demo values. Point the labels at your gallery's selected record (galRequests.Selected.Title) and put your own formula into each action's OnSelect.
Good to know
- Power Apps has no z-index; what is in front is decided by the order in the Tree view. If a control you add later covers the panel, move the scrim and the panel to the top of the screen's list.
- The right-hand panels are
Min(width, Parent.Width)wide, so on a phone they fill the screen. The Bottom Sheet and the Action Sheet always span the screen width. - Every drawer offers Classic and Modern on the YAML tab with the same names and the same layout, so the formulas above work in both. The Modern YAML uses modern controls only: modern Button, Text, Text input, Dropdown and Date picker, a Rectangle as the scrim, and icons drawn as SVG images, since Power Apps has no modern icon control. Nothing in it is a classic control.
- Switch parts off in Settings before copying rather than deleting controls after: a part that is off is not generated, and the sections below it move up.
Related
Open the category at Drawer. For a dialog that blocks the screen until the user answers, see Modals; for a form inside a tile, see Cards.