Lab - Create navigation functions

  • 6 minutes

Read this first - before you start the lab!

Important

For this lab, do not sign in with your credentials. Use the following steps to sign in to your lab environment with the correct credentials.

  1. Select Launch VM mode in this unit.
  2. You'll see a PowerShell window and a Windows Command window appear. After about two to three minutes, they'll close, and Power Apps will open automatically. Wait for the Power Apps home screen.
  3. To see the lab instructions, select the Instructions tab on the lab side bar.

You can now begin your work on this lab.

The purpose of this tutorial is to provide a more detailed example of using the Back and Navigate functions with multiple controls in a common real-world scenario. In many of the apps that you develop, certain screens may have multiple controls allowing users to navigate to different screens depending on the control they select. In the following example, you create a three screen app to demonstrate the Navigate and Back functionality.

  1. Go to the Power Apps Studio.

  2. Select the Create tab from the left-side navigation rail.

  3. Select Blank app, and in the Create popup pane select Create under the Blank canvas app option.

  4. A window called Canvas app from blank opens in your browser. Enter a name for your app, ensure that you have Tablet layout selected as the format (default setting). Then select Create.

  5. In the new blank app, you can Skip the "Welcome to Power Apps Studio" popup. Then select the New screen button from the top ribbon, and choose Blank.

    Screenshot of the Insert tab New screen with Blank selected.

  6. This creates a new blank screen in your app. Repeat once more to have three screens total.

  7. On Screen1, insert a Button control and change the Text property to "Next".

  8. Likewise, go to Screen2, add a Button control and change the Text to "Next".

  9. Add a second Button to Screen2 and change the Text to "Back".

  10. Now go to Screen3, add a Button control and change the Text property to "Back".

  11. Return to Screen1, select the "Next" button and set the OnSelect property to:

    Navigate(Screen2,ScreenTransition.Fade)

    Once you enter this logic, Power Apps abbreviates this property to Navigate(Screen2,Fade), but when you select the formula in the Power fx formula bar, it returns to the unabbreviated formula.

    Screenshot of the Next button set OnSelect property to Navigate(Screen2,ScreenTransition.Fade).

  12. Go to Screen2. Select the Next button and set the OnSelect property to:

    Navigate(Screen3,ScreenTransition.Cover)

    Screenshot of the OnSelect property for the next button on Screen2.

  13. Select the Back button. Set the OnSelect property to Back().

  14. Go to Screen3. Select the Back button and set the OnSelect property to Back().

    Screenshot of the OnSelect property for the back button set to Back() on Screen3.

    Next, we test your button functionality.

  15. Return to Screen1, and put the app in Preview or Play mode and navigate through the app as a user would. As you select each button, notice the subtle visual transitions of each screen transition. Notice how when you select your Back buttons, the transitions go in reverse order.

  16. Now, let's try some of the other transitions. Put the app back into Edit mode and return to Screen1.

  17. Select the Next button and change the OnSelect property to:

    Navigate(Screen2,ScreenTransition.UnCover)

  18. Go to Screen2. Select your Next button and change the OnSelect property to:

    Navigate(Screen3,ScreenTransition.CoverRight)

  19. Now, return to Screen1, put the app back into Preview/Play mode, and observe the behavior of these transitions.

  20. Finally, let's try adding in a screen transition for a Back button. Like the Navigate function, a screen transition is optional for the Back() function, too. Go to Screen2 and select your Back button. Modify the OnSelect property to the following:

    Back(ScreenTransition.UnCoverRight)

  21. Return to Screen1. Put the app in Preview/Play mode, select Next to go to Screen2, and then select the Back button. Did you notice that the transition between screens was different? When you select the Back button from Screen2 to return to Screen1 your buttons seemed to move quickly from left to right off of the screen.

Hopefully, you've been able to see the differences in the transitions available for screen navigation. It's up to you how you employ them in your solutions.

Remember, the Navigate and Back functions can include screen transitions, but they aren't required.

Note

If you are following a learning path, keep this lab open for use as you continue learning.