These are just my notes on a couple of different ways to implement Canvas Components and grow into more complex solutions, such as Component Libraries.
Board Game Nerd Solution (Data)
The Board Game Nerd Solution (Data) includes the core components for Tables and Security Roles.
- Game – Table containing data related to board and video games.
- Publisher – Table containing data related to creators of board and video games.
- Board Game Nerd User – Security role for general access to the Board Game Nerd data.
- Board Game Nerd User – Security role for administrator access to the Board Game Nerd data.
Download the solution at https://mattruma.com/wp-content/uploads/2025/06/BoardGameNerdSolutionData_1_0_0_3.zip.
Board Game Nerd V1 Solution (Apps)
The Board Game Nerd V1 Solution includes a Canvas App called Board Game Nerd V1 Canvas App.
- LoadingScreen – This is the first screen in the application that replaces what I used to do in the
OnStartfunction of the App object. - GameListScreen – This screen displays a list of games and allows the user to manage the Game data.
- GameEditScreen – This screen allows the user to add or edit a Game.
For any new screen, if I want the same header and footer, I will need to copy and paste it onto the new screen.
If I made a change to either the header or the footer on any Screen, for example, I want to change the color of the background or the image used for the log, I will need to do the same on all other Screens.
Download the solution at https://mattruma.com/wp-content/uploads/2025/06/BoardGameNerdV1Solution_1_0_0_2.zip.
Board Game Nerd V2 Solution (Apps)
The Board Game Nerd V2 Solution includes a Canvas App called Board Game Nerd V2 Canvas App.
To add some reusability into the application I decided to create a Canvas Component for both the header and the footer, called HeaderComponent and FooterComponent, respectively.
I can now guarantee the header and the footer always look and work the same on whatever Screen they are added.
Any change I make to the Canvas Component will instantly be reflected on all other Screens.
Download the solution at https://mattruma.com/wp-content/uploads/2025/06/BoardGameNerdV2Solution_1_0_0_2.zip.
Board Game Nerd V3 Solution (Apps)
This time around we will create a Component Library that will hold our components.
In order for Canvas Components to be part of a Component Library they can’t use App Scope.
You can import your existing Canvas Components into your Component Library.
Download the solution at https://mattruma.com/wp-content/uploads/2025/06/BoardGameNerdV3Solution_1_0_0_2.zip.
Board Game Nerd V4 Solution (Apps)
In this version of the solution, we will leverage the Canvas component properties, which is now in preview.
This will allow some advanced functionality, like raising events from our Canvas Components.
This solution contains three components:
- MenuComponent – Displays a menu of options for the user.
- ItemListComponent – Displays a list of records with a schema of Id, Name and Description.
- ItemEditComponent – Supports editing of data with the same schema as the ItemListComponent.
Download the solution at https://mattruma.com/wp-content/uploads/2025/06/BoardGameNerdV4Solution_1_0_0_2.zip.
That’s it!
Links
- Canvas component overview – Power Apps | Microsoft Learn
- Component library – Power Apps | Microsoft Learn
- Component library application lifecycle management (ALM) – Power Apps | Microsoft Learn
- Canvas component properties (preview) – Power Apps | Microsoft Learn
- SVG Images in Power Apps – Matthew Devaney
- Power Apps Tools – Enhance Your Power Platform Experience
Discover more from Matt Ruma
Subscribe to get the latest posts sent to your email.