In my previous post, I explained why a container-first approach is the best way to avoid broken layouts and endless rework.
(Link:Why Manual Alignment is Killing Your Power Apps Productivity)
Now it’s time to use that approach in a real example.
In this series, we’ll build a real Inventory Management Canvas App with Dataverse — step by step.
By the end, you’ll have a real asset:
✅ a reusable responsive app shell
✅ a clean Dataverse data model
✅ working modules (Products → Transactions → Reports)
We’ll build it like a solution architect:
- Start with a clear use case
- Create only the minimum Dataverse tables
- Build a reusable layout shell (side nav, header, content, footer)
- Grow feature-by-feature without breaking the UI
Use Case: Inventory Management App
Problem
In many teams, inventory is maintained using paper registers or multiple versions of spreadsheets. Over time, it becomes difficult to know the latest stock, track stock movement, or avoid duplicate product entries.
Solution
Build a Power Apps Canvas App (with Dataverse) to manage products and stock movements in one place.
Dataverse setup
I started with the Dataverse data model to keep the app stable as it grows. With tables and columns defined upfront, the UI (forms, galleries, filters) won’t keep changing later.
Dataverse tables created
Products (master table)
Purpose: Store product master data for the inventory system.
Columns
- Product Name (Required)
- SKU (Required, Unique)
- Category (Lookup → Categories)
- Unit (Required: pcs/box/kg/liter)
- Reorder Level (Default set via business rule: 0)
- Is Active (Default: Yes)
Data quality
- Alternate key: SKU (prevents duplicate products)
-
Business rules (Reorder Level)
- Reorder Level can’t be negative
- If Reorder Level is blank, set it to 0
Categories (support table)
Purpose: Keep product grouping clean and consistent.
Columns
- Category Name (Required)
- Is Active (Default: Yes)
Data quality
- Alternate key: Category Name (prevents duplicate categories)
Quick summary
- Products stores the product master (SKU, unit, reorder level) with validation for clean data.
- Categories keeps grouping consistent and avoids duplicates.
Create the Canvas App (from the Solution)
Now that the Dataverse tables are ready, the next step is to create the Canvas app inside the same solution.
- Go to Solutions → open your solution (Inventory Management)
- Click + New → select App → Canvas app
- Give it a name like: Inventory Management App
- Choose Tablet layout (recommended for business apps)
This keeps everything (tables + app) in one solution, so it’s easier to manage and move between environments.
App Settings (Make it Responsive)
Before adding any UI, turn on the responsive settings. This is important because once controls are placed, changing layout later can cause rework.
Go to Settings → Display and set:
- App layout: Responsive
- Lock aspect ratio: Off
- Lock orientation: Off
Build the Layout Shell (Container-first)
Instead of starting with screens and placing controls manually, we build a reusable shell first.
This shell will stay the same for every module (Products / Transactions / Reports).
Step 1: Add the Root container
Insert → Layout → Container (Vertical)
Rename it to: RootVerticalContainer
Set:
-
Width:
Parent.Width -
Height:
Parent.Height -
Padding:
0 -
Gap:
0
This root container controls the full screen layout.
Step 2: Split into Header, Body, Footer
Inside RootVerticalContainer, add 3 containers:
HeaderContainer (Horizontal)
-
Height:
60 - Flexible height: Off
-
Padding:
8
BodyContainer (Horizontal)
- Flexible height: On ✅ (Body automatically takes remaining space)
FooterContainer (Horizontal)
-
Height:
40 - Flexible height: Off
-
Padding:
8
Step 3: Split Body into Navbar + Content
Inside BodyContainer, add two containers:
NavbarContainer (Vertical)
-
Width:
240 - Flexible width: Off
ContentContainer (Vertical)
- Flexible width: On ✅
-
Padding:
16
At this point, your app has a clean responsive structure:
- Header (top)
- Side nav + Content (middle)
- Footer (bottom)
And you can now build modules without breaking layout.
Quick Summary (Part 1)
✅ Use case defined
✅ Dataverse tables created(Products,Categories)
✅ Responsive canvas app created
✅ Reusable layout shell ready
Next in Part 2, we’ll build a reusable Navigation Bar component with a clean side menu (Dashboard, Products, Transactions, Reports) using icons and labels, plus an active highlight state. Then we’ll wire it to switch the content area smoothly so the UI stays responsive and never breaks.
Top comments (1)
Well written article
If you have a good Datamodel in place , i would also recommend learn.microsoft.com/en-us/power-ap...