Rajeev Pentyala – Microsoft Power Platform

In this article lets see how to show pop-ups in Canvas Apps using Container controls. I am going to explain this topic with two different examples. A ‘Single Popup’ and ‘Dual Popup’.

Single Popup in action:

Dual Popups in action:

Now that you got an idea of the two examples, lets go ahead and learn how to build them.

Step by Step to show single popup:

• Create a new Canvas App.
• Add a button ‘Demo Single Popup’ to the screen to show popup.
• To display a popup, we would need 2 Container controls.
  • First container will bring the gray out affect speeded across the screen.
  • Second container will hold the display content and acts as popup pane.
• So add the 1st Container on the screen and spread it across the screen.
  • I’ve named the Container as ‘cont_One’.
• In the “Fill” property of Container (i.e., cont_One), set the value as RGBA(169, 169, 169, .75)
  • RGBA(169, 169, 169, .75) gives gray out affect. You may also use your own color combination.

• Now add the 2nd Container, by selecting the 1st Container (i.e., cont_One). Make sure you select ‘cont_One’ before adding the second container.
  • I’ve named the2nd Container as ‘cont_Two’.

• Place the 2nd Container (i.e., cont_Two) middle of the screen and set the background color.

• Its time to add pop up content. So, select ‘cont_Two’ and add the controls. I’ve added a Label and Button controls as shown below.

• Now that we got the layout ready, its time to implement hide/show of popup logic.
• As we need to show popup only on ‘Demo Single Popup’ button click, set a Boolean variable by name ‘ShowPopup‘ on ‘OnSelect’ of ‘Demo Single Popup’ button.
  • Formula : UpdateContext({ShowPopup : true});

• Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable which we defined in the previous step.

• As the popup should be closed on click of ‘Close’ button on 2nd Container (i.e., cont_Two), select the ‘Close’ button and on ‘OnSelect’ event, set the ShowPopup to ‘false’.
  • Formula : UpdateContext({ShowPopup: false});

• That’s it. Play the App and you should see popup on click of ‘Demo Single Popup’ button and should close on click of ‘Close’ button.

Step by Step to show dual popup:

In the dual popup scenario, everything remains same as we did for single popup and additionally we will add a 3rd Container. Lets get started.

• Repeat the steps you did during single popup.
  • There is a slight change than what we did in single popup demo in terms of controls.
  • I’ve added ‘Rating’ control instead of label.

• Now that we added ‘cont_One’ and ‘cont_Two’, to get the dual popup, select ‘cont_One’ and add a new Container and name it as ‘cont_Three’

• Place the ‘cont_Three’ on top of ‘cont_Two’ and add controls as shown below.

• We got the layout ready, its time to implement hide/show of popup logic as below.
  • On click of ‘Demo Dual Popup’ button on main screen
    • Show ‘cont_One’.
    • Show ‘cont_Two’
    • Hide ‘cont_Three’.
  • On click of ‘Rate Us’ button of ‘cont_Two’
    • Show ‘cont_One’.
    • Hide ‘cont_Two’.
    • Show ‘cont_Three’.
  • On click of ‘Close’ button of ‘cont_Three’
    • Hide ‘cont_One’.
    • Hide ‘cont_Two’.
    • Hide ‘cont_Three’.
• Don’t worry, if the above conditions scares you. Its easy to implement. Its how we did by defining ‘ShowPopup‘ variable in showing single popup example. Additionally we would need another variable ‘ShowDualPopup‘ for dual popup.
• On ‘OnSelect’ event of ‘Demo Dual Popup’ button, set ‘ShowPopup‘ variable as ‘true’ and another variable ‘ShowDualPopup‘ as ‘false’.
  • Formula : UpdateContext({ShowPopup : true, ShowDualPopup:false});

• Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable. (Refer screen from single popup example if you need help).
• Now select 3rd Container (i.e., cont_Three) and set ‘Visible’ as ‘ShowDualPopup‘ variable.

• As we need to show ‘cont_Three’ only on click of ‘Rate us’ button of ‘cont_Two’, on ‘OnSelect’ of ‘Rate us’ button set the ‘ShowDualPopup‘ variable to ‘true’.
  • Formula : UpdateContext({ShowDualPopup : true});

• Important point to note is that, we dont need logic to Hide/Show ‘cont_Two’ as it gets visible when ‘cont_One’ is visible and it gets hidden when ‘cont_Three’ is visible as ‘cont_Three’ is top of ‘cont_Two’.
• Finally, as we need to hide all the popups (i.e., cont_One and cont_Three) once you click the ‘Close’ button on ‘cont_Three’, on ‘OnSelect’ of ‘Close’ button set both ShowPopup and ShowDualPopup variables to ‘false’.
  • Formula : UpdateContext({ShowPopup:false,ShowDualPopup :false})

• That’s all needed for dual popups. Play the App and you should see dual popups.

🙂