Power Apps + SharePoint (Canvas Apps) Study Plan Using Screen Containers

A detailed, hands-on article you can follow in 4 half-day sessions (each “week” compressed into ~3–4 hours), keeping the original content and deliverables.

Why Screen Containers Matter (and why this roadmap is container-first)

If you build Canvas Apps for SharePoint without containers, you’ll eventually hit the same problems: controls become hard to align, scrolling becomes painful during editing, and screens break when resized. Containers solve layout by letting you structure the screen into predictable zones (Header / Body / Footer) and by removing the need to manually manage X/Y for every control. Start with the official Container control docs and the dedicated horizontal/vertical container controls. (Microsoft Learn)

The Roadmap Format (4 Half-Day Sessions)

• Half-Day 1 (Week 0): Setup + foundations + container essentials
• Half-Day 2 (Week 1): Layout mastery with Screen Containers + navigation
• Half-Day 3 (Week 2): SharePoint CRUD with Forms (inside containers)
• Half-Day 4 (Week 3 + Week 4): Real-world SharePoint patterns + performance + reuse

Each half-day includes:

• A time-boxed agenda (so you finish)
• A “deliverable” you must have working before moving on

Half-Day 1 (Week 0) — Setup & Foundations (3–4 hours)

1) Create the right Canvas App shell (30–45 min)

Goal: start clean and avoid layout traps.

• Create a Canvas App (Tablet) if your SharePoint portal experience is mostly desktop.
• Confirm you can access the app editor and add data sources.
• Optional (recommended): skim Microsoft guidance on designing and structuring apps—especially containers as a recommended organizing strategy. (Microsoft Learn)

Deliverable: a blank tablet app with one screen ready to become container-based.

2) Connect Power Apps to a SharePoint list (30–45 min)

Goal: a working SharePoint connection you can read/write against.

• Add your SharePoint list as a data source using the SharePoint connector guidance. (Microsoft Learn)
• Also understand the “create an app from a list” flow (Power Apps auto-generates Browse/Details/Edit). Even if you prefer blank apps, it’s useful to know what Microsoft generates by default. (Microsoft Learn)

Deliverable: app connected to a SharePoint list; you can preview and see records.

3) Containers 101 (60–90 min)

Goal: you understand how containers behave and which one to use.

• Container control (generic): groups controls and has its own properties. (Microsoft Learn)
• Horizontal container: lays out children horizontally so you avoid manual X/Y positioning for controls inside it. (Microsoft Learn)
• Vertical container: same concept but stacked vertically (great for screen structure). (Microsoft Learn)

Focus on these habits:

• Prefer containers over absolute positioning.
• Nest containers intentionally (screen → zones → rows → fields).
• Make only the right area scroll (usually the Body zone).

Deliverable: one screen using containers only (no random absolute layout) with a header label, a placeholder body section, and a footer button.

Half-Day 2 (Week 1) — Layout Mastery with Screen Containers (3–4 hours)

1) The “3-band” Screen Pattern (Header / Body / Footer) (60–90 min)

Goal: a stable screen pattern you reuse everywhere.

Create this structure:

• Root (Vertical container)
  • Header container (fixed height)
  • Body container (FillPortions = 1; scrolling if needed)
  • Footer container (fixed height)

This pattern directly addresses the classic pain: “I can only reach controls under the fold when I hit Play to scroll.” With proper Body scrolling and fixed header/footer zones, editing stays sane.

Deliverable: a screen that always shows header + footer, while only the body area scrolls.

2) Navigation using a container-based layout (60 min)

Goal: multi-screen app that feels like a SharePoint portal UI.

Build a 2-column layout:

• Left menu (vertical container)
• Main content (vertical container)

Use Navigate(ScreenName, Transition.None) from menu buttons.

Deliverable: Home / List / Form screens navigable from a left menu.

3) “Responsive enough” without chaos (45–60 min)

Even if you don’t want full responsiveness, you want layout stability when:

• browser size changes
• SharePoint page is in a narrower web part column

Learn Microsoft’s approach to responsive layout:

• Use containers and/or formulas rather than hardcoded X/Y. (Microsoft Learn)

Deliverable: your 3-band screen doesn’t break when resizing the browser window.

Half-Day 3 (Week 2) — SharePoint CRUD with Forms (Inside Containers) (3–4 hours)

1) Browse/List screen: Gallery + Search + Filters (60–90 min)

Goal: a productive list screen like a mini app inside SharePoint.

• Put a Gallery inside the Body container. (Microsoft Learn)
• Use Filter/Search patterns with Power Fx:
  • Filter(...), Search(...), LookUp(...) are core table functions. (Microsoft Learn)
• Add a filter bar in the Header zone (search box + dropdown filters).

Deliverable: gallery displays items; search works; at least 1 filter works.

2) Edit screen: Edit Form inside the Body container (60–90 min)

Goal: reliable editing with Save/Cancel in the footer.

• Place an Edit Form in Body.
• Set Item = gal.Selected.
• Footer buttons:
  • Save: SubmitForm(FormName)
  • Cancel: ResetForm(FormName); Back()

Reference the official Form functions page for EditForm, NewForm, SubmitForm, ResetForm, and ViewForm. (Microsoft Learn)

Deliverable: you can edit an existing SharePoint item and save successfully.

3) New item screen (or New mode on same form) (30–45 min)

Goal: create items cleanly.

• Button: NewForm(FormName); Navigate(EditScreen, None)
• After submit, navigate back to list and refresh.

Deliverable: you can create a new item and see it in the list screen.

Half-Day 4 (Week 3 + Week 4) — Real World SharePoint + Performance + Reuse (3–4 hours)

Part A — Real SharePoint columns (Week 3 content) (90–120 min)

1) Choice, Lookup, Person columns (60–75 min)

Common mistakes here are why apps fail late.

• Use Choices(...) to drive dropdowns/combos for SharePoint choice/lookup columns. (Microsoft Learn)
• Use Combo box “people picker” patterns for person fields. (Microsoft Learn)

Deliverable: one form that correctly saves at least one Person field + one Choice field.

2) Attachments (30–45 min)

If your SharePoint list uses attachments, do this properly early.

• Use the Attachments control (open/add/delete attachments). (Microsoft Learn)

Deliverable: you can upload an attachment to a SharePoint list item from the app.

3) Permissions & UX guardrails (15–30 min)

• Hide/disable buttons based on user role (or simple checks).
• Use friendly error notifications on failed saves.

Deliverable: your app fails gracefully (no confusing silent errors).

Part B — Production habits (Week 4 content) (90–120 min)

1) Reuse: Components + Component Libraries (45–60 min)

Turn repeated blocks into reusable components:

• Header component
• Left menu component
• Filter bar component

Then scale reuse with a Component Library if you plan to reuse across multiple apps. (Microsoft Learn)

Deliverable: at least one reusable component used on 2 screens.

2) Delegation + performance (45–60 min)

If your SharePoint list grows, delegation becomes non-negotiable.

• Study Microsoft’s delegation overview and understand why non-delegable queries only process partial data client-side. (Microsoft Learn)
• Optional but recommended: do the training module on data source limits/delegation. (Microsoft Learn)

Deliverable: your main Gallery query avoids obvious delegation warnings (or you document why they’re acceptable for your list size).

The Practice Project (Use this to anchor your learning)

Create one SharePoint list: Requests

• Title (text)
• Status (Choice: New / In Progress / Done)
• Owner (Person)
• DueDate (Date)
• Priority (Choice)
• Notes (Multiple lines)
• Attachments enabled

Build:

1. List screen (gallery + search + 2 filters)
2. Form screen (view/edit in containers)
3. New item flow
4. Attachment upload
5. A reusable header or filter bar component

MS Learn Links (copy/paste)

Containers
- Container control: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-container
- Horizontal container: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-horizontal-container
- (PT) Vertical container: https://learn.microsoft.com/pt-br/power-apps/maker/canvas-apps/controls/control-vertical-container
- Create responsive layouts: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout

SharePoint + Canvas Apps
- Connect to SharePoint from a canvas app: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/connections/connection-sharepoint-online
- Create a canvas app from a SharePoint list: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/app-from-sharepoint

Forms + Power Fx
- Form functions (EditForm/NewForm/SubmitForm/ResetForm): https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-form
- Filter/LookUp (and related table functions): https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-filter-lookup
- Choices function: https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-choices

Attachments
- Attachments control: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-attachments

Components
- Component library: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/component-library
- Component library ALM: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/component-library-alm

Performance
- Delegation overview: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/delegation-overview
- Training: data source limits (delegation): https://learn.microsoft.com/en-us/training/modules/work-with-data-source-limits-powerapps-canvas-app/

Step Summary Table

Technical Summary Table