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.”
- 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.”
- 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
- 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“
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.
- Please append another label within the Comp_PopUp interface.
- Please implement the addition of a Button within the Comp_PopUp interface.
- 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.
- In the ‘OnSelect’ property of the Cancel button.
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.
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.
- 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.
- 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.
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.‘
- Choosing the “OK” button…
- 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.
- Go back to screen1 (one) and select the ComPopUp component.
- When the ‘OK‘ button is activated, the application will navigate the user to ‘Screen 2″.
The Conclusive Appearance of this Application !
