Requirement : The pop-up visibility depends on a button where it is from Component in PowerApps and the pop-up displayed using Set variable
we need to create a component and design according.
Before this
- At First we we need to enable a setting in the PowerApp.
- Go to gear icon (settings)
- Click on Upcoming features or advanced (advanced option available for updated app)
- select Experimental
- Under experimental search for ‘Enhanced component properties’ enable the button
Click on Tree view and under components, create a new component.
Component, I have created with required Icons and labels and named as ComponentWork
>Created a Header Component as WorkStation, and now need to create a customproperties in Component
>you will find at the right bottom customproperties and select ‘+ New custom property’
>Provide the customproperty display name as required
>Name & Description would automatically fill the fields
>PropertyType select as Behaviour
>ReturnDataType select as Text
and then click on create button, the property would create
As I already created a customproperty named AddUser
So the button created in the component, this component will take in the required screen in PowerApp and when click on the button we require the pop-up to be visible
Here in the component itself we provide the function to select
>select the Icon which we want to provide Onselect fn
>Onselect of the Icon – componentname.customproperty()
ComponentWork.AddUser()
>Now getting into the screens and creating the screen as required
[created with basic textinputs & labels]
>After create a Pop-up as required
[created with rectangle, buttons & textinputs]
can find below the UI
Pop-up created and Grouped.
Here comes creating the ‘Set Variable’
>Select the component in the screen view and on its AddUser property (which created earlier in the components) pass the variable as ‘true’
Set(VarPop,true)So when click on the Icon (Save) which is the component or the Header of the screen the Pop-up would get visible
>Select the Pop-up Group in the screen view and on its Visible property provide the variable ‘VarPop’
>Select the cancel button in the screen view and on its Onselect property pass the variable as ‘false’
Set(VarPop,false)So when click on the Cancel button which is the Pop-up box of the screen the Pop-up would get invisible
Final Outputs- When the user click on Icon the Pop-up would gets visible and the user clicks on Cancel button the Pop-up would gets invisible (Implementing with set variable & the component used for the Header Icon)
