Power Apps Component With An OnSelect Property

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-component-with-an-onselect-property/. Author: Matthew Devaney.

Power Apps Component With An OnSelect Property Posted by - Matthew Devaney on - February 28, 2021 21 Comments

This week Power Apps components received an important update: they now support behavior properties such as OnSelect & OnChange. Ever since components were released it was seen as missing feature. Power Apps developers had to resort to work-arounds to trigger code in an app based on when a behavior-property fired. Well, no more. The true potential of canvas app components is now unlocked!

In this article I will teach you how to build a Power Apps Component with an OnSelect property. Table of Contents Introduction: Pop-Up Menu Component Enable Enhanced Component Properties

Add A Behavior Property For The Cancel Button

Cancel Button OnSelect Property In The App

Add A Behavior Property For The OK Button OK Button OnSelect Property In The App Introduction: Pop-Up Menu Component

In the sample app we will build together the user clicks a button on Screen 1 to navigate to Screen 2. When the button is clicked a pop-up menu component appears and asks “do you really want to go to the next screen?” The user can choose either OK to proceed or Cancel to stay on the same screen. Enable Enhanced Component Properties

Behavior type custom properties are an experimental feature at this time. To use them you must open the advanced settings menu and turn on Enhanced Component Properties .

Add A Behavior Property For The Cancel Button

Open Power Apps Studio and create a new canvas app from blank. Then go to the components editor and create a new component named cmp_PopUpMenu . Insert a label onto the screen to show the Title, another label for the pop-up message and two buttons with the text OK & Cancel. You can also place another label at the bottom of the component with a dark-colored border to define its edges.

Next, create a new custom property called OnSelectCancel . Choose the Behavior property type then click Create.

In the OnSelect property of the Cancel button…

…write this code. Now when we place the pop-up menu component inside an app the OnSelect property of the cancel button will be exposed. cmp_PopUpMenu .OnSelectCancel () Code language: CSS ( css ) Cancel Button OnSelect Property In The App

When the user clicks a button on Screen 1 and pop-up button appears and asks “do you really want to go to Screen 2”. The next thing we will do is create Screen 1.

Open Screen 1 and add a large button in the center of the screen with the text “Go to Screen 2.”

Add this code to the OnSelect property of the button. We can use the variable it sets to true to control the pop-up menu’s visibility

UpdateContext ({ locShowPopUpMenu : true}) Code language: CSS ( css )

Go to the Custom button on the ribbon and select the cmp_PopUpMenu component. Place it directly over top of the button.

Change the Visible property of the component to locShowPopUpMenu . It will show the menu when the variable’s value is true and hide it when false .

Now we can write some code to tell the app what to do when the Cancel button is clicked. Select the OnSelectCancel property of the component…

…and write this code to change the locShowPopUpMenu variable to false.

UpdateContext ({ locShowPopUpMenu : false}); Code language: CSS ( css )

Clicking the Cancel button will cause the pop-up menu to disappear. By using a behavior property we have managed to successfully trigger the Cancel button’s OnSelect property from inside the component and update a variable value in the app!

Add A Behavior Property For The OK Button

We are half-way done. The next step is to create a behavior property for the OK button. Go back to the component and add a new custom property called OnSelectOK . Choose the Behavior property type and click Create. Select the OK button…

…and put this code in the OnSelect property to expose the OK button to the app. cmp_PopUpMenu .OnSelectOK () Code language: CSS ( css ) OK Button OnSelect Property In The App

Before we code the OK button we’ll need to create a 2nd screen. Insert a new screen and call it Screen 2 .

Go back to screen one and select the pop-up menu component.

Then write this code in the OnSelectOK property.

Navigate( 'Screen 2' , ScreenTransition.Fade); UpdateContext({ locShowPopUpMenu : false }); Code language: JavaScript ( javascript )

When the OK button is clicked it the app will take the user to Screen 2.

Want To Learn More About Power Apps Canvas Components?

This tutorial is part of a free online course called Learn Power Apps Canvas Components By Making 5 Components . The best way to learn isn’t by watching videos, or by reading articles. The best way to master Power Apps canvas components is by building real-world projects. So that’s exactly what we’ll do. Go ahead and get started on the other lessons below. I know you’re going to get alot of this free course. Table Of Contents:

Introduction: Learn Power Apps Components By Making 5 Components

1. Make Your First Power Apps Component (Temperature Conversion)

2. Make A Power Apps Navigation Menu Component

3. Make A Power Apps Pop-Up Menu Component

4. Make A Custom Function With Power Apps Canvas Components 5. Make A Power Apps Component Library Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Component With An OnSelect Property please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Canvas Components Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps