Adventures with Power Platform – Canvas Apps and Components

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

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.

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.

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.

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.