Drawer for Power Apps

Add slide-out panels to your Power Apps. Drawers provide temporary workspace for forms, settings, or additional content without navigating away from the current screen.

When to use drawers

Drawers work great when you need to show secondary content or quick forms without losing context of the main screen. They slide in from the edge of the screen and can be dismissed when done.

Choose your drawer style

Drawer Bottom

Slides up from the bottom of the screen. Great for mobile-first designs and quick forms.

Best for: Mobile apps, quick create forms, action sheets, and filters. Bottom drawers are natural for touch - users swipe up to reveal, swipe down to dismiss.

Settings you can customize:

• Trigger button text
• Drawer title and description
• Form fields (labels and placeholders)
• Button styling

Drawer Right

Slides in from the right side of the screen. Provides a panel-style experience.

Best for: Desktop apps, detailed forms, settings panels, and side panels. Right drawers work well alongside main content for edit/view scenarios.

Settings you can customize:

• Trigger button text
• Drawer title and description
• Form fields configuration
• Action buttons (OK/Cancel)
• Panel width

Implementation steps

1. Select your drawer style

Go to Drawer and choose Bottom for mobile-style or Right for desktop-style layouts.

2. Configure the drawer

Click on your chosen component and use the Settings tab to set up:

• Trigger button - The button text that opens the drawer
• Title - What appears at the top of the drawer
• Description - Helper text explaining the drawer's purpose
• Form fields - Add input fields with labels and placeholders
• Action buttons - Configure submit and cancel buttons

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect drawer logic

After pasting, connect the drawer to your app's data and logic:

Open and close drawer

// Open drawer (on trigger button)
Set(varDrawerOpen, true)

// Close drawer (on cancel or outside tap)
Set(varDrawerOpen, false)

Submit form data

// On submit button
Patch(
    Projects,
    Defaults(Projects),
    {
        Name: txtProjectName.Text,
        Framework: txtFramework.Text
    }
);
Set(varDrawerOpen, false);
Notify("Project created!", NotificationType.Success)

Reset form on open

// When opening drawer, reset fields
Set(varDrawerOpen, true);
Reset(txtProjectName);
Reset(txtFramework)

Validate before submit

// Check required fields before saving
If(
    IsBlank(txtProjectName.Text),
    Notify("Name is required", NotificationType.Warning),
    Patch(Projects, Defaults(Projects), {Name: txtProjectName.Text});
    Set(varDrawerOpen, false)
)

Common use cases

Quick create forms

Use Drawer Bottom for "Add New Item" forms - users tap a button, fill quick fields, and submit without leaving the list view.

Edit panels

Use Drawer Right for editing record details. Select an item from a list, drawer slides in with edit form, user makes changes and saves.

Filter panels

Use Drawer Right to show filter options for a data table or gallery. Users apply filters and the drawer closes.

Settings panels

Use Drawer Right for app or user settings. Keep settings accessible without dedicating a full screen.

Action sheets (mobile)

Use Drawer Bottom for "More Actions" menus on mobile - share, delete, edit, etc.

Best practices

• Keep forms focused - Drawers should have 2-5 fields max. More fields warrant a full screen.
• Clear actions - Always have obvious submit and cancel buttons
• Descriptive titles - "Create Project" is better than "New" or "Add"
• Close on success - Automatically close the drawer after successful submission
• Preserve context - The main screen should remain visible (dimmed) behind the drawer
• Allow escape - Users should be able to dismiss by tapping outside or pressing cancel

Troubleshooting

Drawer not opening

Check that your open variable is being set to true on button click and that the drawer's Visible property checks this variable.

Drawer stuck open

Make sure the close action sets the variable to false. Check both the cancel button and any overlay tap handlers.

Form data not saving

Verify your Patch formula references the correct data source and that field names match your columns exactly.

Drawer appears behind other elements

Check the drawer's Z property. Drawers should have high Z values (100+) to appear above other content.