A couple of months ago, I shared how you can create a button for navigation with an icon in a component and match its behavior to that of the “normal” buttons in canvas apps in this blog post. Back then, buttons created in this way could only be used for one specific action (in my case, navigating to another screen).
Since Power Apps added behavior properties to its canvas components, we can now extend this component solution so that a click on the button can trigger any function you want! Isn’t that cool? Let’s see how we can do this.
I’ll be starting from the button I created in that previous blog post. If you want to (re-)read that first, click this link.
⚠ If you’ve created the button component in a component library and are using it in applications, make sure that you make changes in a copy of the component, otherwise your other apps could stop working.
💡While this functionality is in preview, make sure to turn it on in the settings of your app or component library.
It’s quite easy to change the button so it can trigger any function when selected. Three steps is all it takes.
Step 1: Delete the “Screen” input property
Because we will change the component so it can trigger any function when selected, we don’t need the dedicated “Screen” property anymore. Therefore, we can simply delete it from the component. This will add an error to the component. Don’t worry about that for now, we’ll fix that in step 3.
Step 2: Add an “OnSelect” behavior property
Add a new custom property to the component and name it “OnSelect”. By choosing “OnSelect”, it will be straightforward for people familiar with canvas apps what they can expect this property to do. All controls that can be selected have this property defined, so it will be recognizable. The configuration is shown in the image below.
- Delete the “Screen” input property from the component
- Add an “OnSelect” behavior property to the component
- Trigger the “OnSelect” of the component when clicking the top button inside the component
Step 3: Configure the component to trigger OnSelect
The final step is to make sure that when the top button inside our component is clicked, this triggers the OnSelect property of the component itself. This is done by referencing the component’s OnSelect property in the OnSelect property of the top button.
Select the top button in your screen or from the tree view in the app studio and choose the OnSelect property from the property dropdown.
You’ll see that the function in the OnSelect property is still referencing the Screen property we deleted in the first step. This is why we’re getting an error. Replace the function in the function bar to simply reference the component’s OnSelect property as follows:
ComponentName.OnSelect()
As a result, the error has disappeared, and we can now invoke any function we want when clicking the button inside our app by configuring the OnSelect property after we’ve added the button component.
Bonus: this is just like the standard buttons canvas apps provides, which makes it an intuitive solution, and you can offer this component to be used by beginning Makers without much risk.
With this new functionality, we’re not limited to navigation anymore, we can use it to patch data to a data source, show or hide controls on our app, etc. The possibilities are endless!
DigiPersonal 