Adventures with Power Platform – Canvas Apps and Components

I am working on creating a sample application to inventory books.

Figure 1- Home Screen

I needed a header to appear on each screen so I decided to create it as a Component internal to the Canvas App.

The Component would have the following properties:

  • Title – the caption to show on the header.
  • Left Action Icon – the left action supports setting an icon.
  • Left Action Text – the text to display next to the Left Action Icon.
  • Left Action Visible – need to be able to toggle visibility of the left action.
  • Left Action Width – the space the left action use.
  • Left Action On Select – the event that would fire when the button is clicked so the Screen it was on could response accordingly.
  • The right action contains all the same prosperities, except where it read Left, it would read Right.
  • The right action does not contain a property for an icon.
  • Padding Left and Padding Right – controls the spacing to the right and left of the actions within the header.
Figure 2 – Header Component

In order for the Screen to receive events from the Component, I needed to enable Enhanced component properties in the Upcoming features section of the Settings.

Figure 3 – Enable component properties

I dropped the Component onto my Screen and them updated the Properties.

I added the code to navigate properly to each of the OnSelect events for the left and/or right action.

Figure 4 – Properties and Handling OnSelect Events

I deliberately did not go through each step of the process to make this happen, probably because it’s Friday afternoon and I am just done for the day. 😊

That being said, you can download it at CanvasAppSampleHeaderComponentSolution_1_0_0_1.zip and import it into your own Power Platform environment and take a peak at the code.

If have ideas on how to make it better, please share!

Next steps is to move the header component to a Component Library, so it can be used by multiple applications.


Discover more from Matt Ruma

Subscribe to get the latest posts sent to your email.

Leave a Reply

Your email address will not be published. Required fields are marked *