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 theLeft 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 readRight
. - The right action does not contain a property for an icon.
Padding Left
andPadding 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.
Discover more from Matt Ruma
Subscribe to get the latest posts sent to your email.