Building a Power Apps Component with Selectable Features

Creating a Power Apps Component with an OnSelect Property

Creating a Power Apps Component with an OnSelect Property!

Create a New Canvas App:

  • Go to the Power Apps portal and sign in. 
  • Click on “Create” and select “Canvas app from blank.” 
Creating a blank Canvas app to make Component with an OnSelect Property
  • Develop an application titled App Name and optimize it for tablet devices in the desired format. 

Create a title bar by placing a label at the uppermost section of the screen, bearing the text Component3.” 

Placing a label at top , bearing the text Component3 to make Component with an OnSelect Property
  • Please open Power Apps Studio and create a new application from scratch. In the Tree View, choose the “Components” option, and then click on “New Component.” Give the component the name “Component1 

Enable Enhanced Component Properties

Enable Enhanced Component Properties to make Component with an OnSelect Property
  • Please open Power Apps Studio and create a new application from scratch. In the Tree View, choose the “Components” option, and then click on “New Component.” Give the component the name “Comp_PopUp 
Createing a new app and choosing New Component or Giving the component the name Comp_PopUp

Please click on the option to “Modify the Width property of the component to 640 and adjust the Height property to 250. 

  • Please append a label within the Comp_PopUp interface. 
Append a label within the Comp_PopUp interface to make Component with an OnSelect Property
  • Please append another label within the Comp_PopUp interface. 
Append another second label within the Comp_PopUp interface to make Component with an OnSelect Property
  • Please implement the addition of a Button within the Comp_PopUp interface. 
Adding a Button within the Comp_PopUp interface to make Component with an OnSelect Property
  • Please implement the addition of another Button within the Comp_PopUp interface. 

Subsequently, proceed to establish a novel custom property denominated as “OnSelectCancel.opt for the Event property type and subsequently initiate the creation process by selecting the “Create” option. 

Create custom property 'OnSelectCancel' under Event property type in PowerApps
  • In the ‘OnSelect’ property of the Cancel button.
Putting In the OnSelect property of the Cancel button to make Component with an OnSelect Property

Please compose the following code. Subsequently, upon integrating the Comp_PopUp component into an application, the OnSelect property of the cancel button will become accessible. 

				
					Comp_PopUp.OnSelectCancel()
				
			

Please implement the addition of a Button within the ‘Screen1’ interface. 

Adding a button in Screen1 to make Component with an OnSelect Property

Cancel Button OnSelect Property in the App.

  • Upon activation of a user-triggered event, specifically, a button click action on Screen 1, a modal dialogue will be instantiated, inquiring, “Are you sure you wish to proceed to Screen 2?” Subsequently, the following action item on our agenda is to generate and configure Screen 1. 
  • Initiate Screen 1 and incorporate a prominently positioned button at the screen’s central region, bearing the label “Navigate to Screen 2. 

Incorporate the provided code into the ‘OnSelect‘ property of the button. The variable it establishes as ‘true‘ can be employed to manage the visibility of the Comp_PopUp . 

				
					UpdateContext({Comp_PopUp:true});
				
			
  • Integrate it into a canvas app. To do this, navigate to the ‘Screens‘ tab within Tree View and select the component from the ‘Custom‘ menu. 
Canvas App Integration= Screens tab,Custom menu in Tree View to make Component with an OnSelect Property
  • Modify the visibility attribute of the component to be controlled by the variable ComPopUp. This will result in the menu being displayed when the variable’s value is set to true and hidden when it is set to false. 
Toggle visibility with ComPopUp= Show when true, hide when false to make Component with an OnSelect Property
  • And write this code to change the Comp_PopUp variable to false. 
				
					UpdateContext({Comp_PopUp:false})
				
			

Selecting the “Cancel” button will result in the dismissal of the Comp_PopUp. Through the implementation of a behavior property, we have effectively executed the OnSelect property of the “Cancel” button from within the component, subsequently altering a variable value within the application. 

Cancel button behavior in Comp_PopUp alters app variable to make Component with an OnSelect Property

Add An ‘Event’ Property for the OK Button

We have reached the midway point in our task. The subsequent step entails the establishment of a behavioral attribute for the ‘OK‘ button. Please revisit the component and proceed to append a novel custom property, denominated as ‘OnSelectOK.‘ Select the property type as ‘Event‘ and initiate the creation process by clicking ‘Create.

Creating 'OnSelectOK' behavioral attribute for 'OK' button to make Component with an OnSelect Property
  • Choosing the “OK” button…
Choosing the 'OK' button in powerapps for making a Component with an OnSelect Property
  • Assign the following code to the ‘OnSelect‘ property in order to make the ‘OK‘ button accessible within the application. 
				
					Comp_PopUp.OnSelectCancel()
				
			

OK Button OnSelect Property in the App

  • Prior to implementing the functionality for the ‘OK‘ button, it is necessary to establish a secondary screen. To achieve this, you should initiate the creation of a new screen and assign the name “Screen 2” to it. 
Prep for 'OK' button=Create 'Screen 2' for smooth functionality to make Component with an OnSelect Property
  • Go back to screen1 (one) and select the  ComPopUp component. 
Selecting the ComPopUp component from screen1 to make Component with an OnSelect Property
  • When the ‘OK‘ button is activated, the application will navigate the user to ‘Screen 2″. 
App navigates to Screen 2 triggered by 'OK' button activation to make Component with an OnSelect Property
After navigation when app is triggered by 'OK' button activation a view of Screen 2 to make Component with an OnSelect Property

The Conclusive Appearance of this Application !

The Conclusive Appearance of the Application performing Component with an OnSelect Property

If you want to learn more about the Power Apps, feel free to explore our other informative articles and tutorials.

Have additional inquiries? Our team is here to assist. Please don’t hesitate to reach out!

Enhanced Support Widget