Tips and trick: Create modal dialog for PowerApps

The PowerApps is an excellent and useful Custom Business Apps. I’m a passionate developer and consultant. First, I always check, if the requirement is required for development, buy an exiting tool or use custom business apps. In this case, I decided to use with PowerApps. The PowerApps is useful for some cases, and it can be created very fast.

In this case, I miss a modal dialog function in PowerApps for example “Help information”.

My goal is for the PowerApps to be very user-friendly.

How to do:

  1. Create first the landing screen. I called it “scrLanding”
  2. Duplicate this landing screen and enter the name “scrHelp”
  3. Go back to the landing screen and add the value in the field of OnSelect “Navigate(scrHelp, ScreenTransition.Fade)” on the right side.
  4. Go to another screen “scrHelp”
  5. Insert Label and make it to full screen
  6. Change the Label name to “lblFullScreen
  7. Empty the Text
  8. Go to Properties on the right side, click Color and select color “Grey” or similar.
  9. Go to Custom and enter the value “30” in the field A

  10.  Insert the Label again and change the name “lblModalDialog”
  11. Add text in the field Text
  12. Go to the right side and add some values to Padding and Border

    Now it looks like Modal Dialog. I also added Cancel-Button, so the user recognizes, this is a modal dialog.
  13. Insert Button and change some properties on the right side:
    1. Color: White
    2. Adapt the Size
  14. Add Icon “Cancel” to the button
  15. Select Label “lblFullScreen” and go to Advanced
  16. Enter the text to the field OnSelect “Navigate(srcLanding, ScreenTransition.Fade)”
  17. Repeat it for “lblModalDialog” and “btnCancel”

Now the modal dialog is created. The user can press somewhere on the screen, and it goes back to the landing screen. Is this not awesome? However, don’t forget it, if you change anything on the screen “scrLanding”, so maybe you have also adapted it on screen “scrHelp”.

Here is the result: