Adventures with Power Apps: Fun with Canvas Components! (Part 1)

What are Canvas Components?

Canvas components enable low code/no-code developers to build reusable UX components using default Power Apps controls as core building blocks. These custom components can then be shared across app screens or multiple apps both within and across Power Apps environments. Canvas components contributes directly towards Power Apps vision of empowering everyone to build apps by significantly accelerating app development process.

Announcing the general availability of canvas components and component libraries | Microsoft Power Apps

Canvas App (Version 1)

Let’s look at this starting with a Canvas App, which I named POC 6 Canvas App V1.

👉You can download the unmanaged solution at https://mattruma.com/wp-content/uploads/2024/04/POC6SolutionCanvasComponent_1_0_0_0.zip.

The Canvas App consists of three screens, Screen1, Screen2 and Screen3, and I want to add navigation that allows the user to toggle between the three screens.

To do this, I added a Container control to each Screen and then added three Icon controls to each of the Containers.

I set the first Icon, OnSelect to navigate to Screen1, and then repeat for each of the other Icon controls.

I then copied the Container to each of the other Screens.

To finish it off I added some style for Hover, Pressed and Selected statuses.

I tested the changes, and they work great!👏

But what if I wanted to change the image for the Icon controls? Or add another Icon control? I would need to make the change to each one of the Screens.

This can be tedious, and is prone to making mistakes, where the components don’t work exactly correct, because the change I made in one, I failed to make in the other, or made it incorrectly.

How can I make this more efficient? 🤔

Canvas App (Version 2)

This is where Canvas Components come into play.

I created a copy of my application and named it POC 6 Canvas App V2.

I copied one of the original navigation controls for the Screens, the entire Container control.

Clicked Components.

Click New Component, and then pasted my Container control into the Component, called Component1.

I then deleted the Container controls from the Screens.

I added a Property called Default so I could determine which Icon was selected and set the Color accordingly.

I set Access app scope to On, so my Component was aware of the controls within the Canvas App so it would know about the Global Variables I used for Icon Size, Icon Spacing and Icon Selected Color as well as the Screens.

I then added my Component1 to each Screen and set the value of Default to a number representing which Icon should show as selected.

I tested the changes, and they worked great! 👏

Now if I want to make a change to my navigation, I can do it in one spot, in the Component, and the changes are automatically reflected on each of the Screens that make use of Component1.

What if I don’t want my Component to know about the other Components within my Canvas App? 🤔

Canvas App (Version 3)

The first question to answer before we get into the “How”, is the “Why”.

Why might I want to do this?

The reason lies in some architectural principles that go way back to my traditional software development days, like Separation of Concerns and Encapsulation.

Or another way of looking at it is that I want other Canvas Apps, other App Makers, to be able to use my Component, and they might not have a Screen called Screen1, it might be called something completely different.

So how do I make my component reusable?

The first thing I did was set Access app scope to Off.

This immediately broke a lot of things, because now my Component really knows nothing about my Canvas App.

I then added the following properties to Component1:

• Icon Size – Number, the size of the Icon control.
• Icon Spacing – Number, the spacing, or gap between Icon controls.
• Icon Color – Color, the default color of the Icon control.
• Screen 1 – Screen, the first Screen to navigate to. Repeat for Screen2 and Screen3.
• Icon 1 – Image, the image to show for the first Icon control. Repeat for Icon2 and Icon3.

I updated my Component to use the properties as opposed to Global Variables and the Components within the Canvas App, and then updated each instance of Component1 in my Canvas App with the correct property values.

Now my Component “really” knows nothing about the Canvas App, it just operates based on the values plugged in for its properties.

Now my Component can be imported into another Canvas App and be used.

Keep in mind that Canvas App creates its own copy of the imported Canvas Component, so changes made to the Component in one Canvas App are not reflected in the other.

Pretty cool! 😎

So, what’s next?

What if my navigation involved more or less than three screens? The number of Icon controls to show in the navigation needed to be dynamic.

I will look at that in my next post.

Stay tuned!

👉You can download the unmanaged solution at https://mattruma.com/wp-content/uploads/2024/04/POC6SolutionCanvasComponent_1_0_0_0.zip.