Lab - Create navigation functions - Training

5 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.

Select Launch VM mode in this unit.
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.
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'll create a three screen app to demonstrate the Navigate and Back functionality.

Go to the Power Apps Studio.
Select Blank app from the Home screen Start from window, and in the Create popup pane select Create under the Blank canvas app option.
A window called Canvas app from blank will open in your browser, enter a name for your app, ensure that you have Tablet layout selected as the format (default setting). Then select Create.
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.
This will create a new blank screen in your app. Repeat once more to have three screens total.
On Screen1, insert a Button control and change the Text property to "Next".
Likewise, go to Screen2, add a Button control and change the Text to "Next".
Add a second Button to Screen2 and change the Text to "Back".
Now go to Screen3, add a Button control and change the Text property to "Back".
Back at Screen1, select the "Next" button and set the OnSelect property to:

Navigate(Screen2,ScreenTransition.Fade)

Once you enter this logic, Power Apps will abbreviate this property to Navigate(Screen2,Fade), but when you select the formula in the fx box, it will return to the unabbreviated formula.
On Screen2, set the OnSelect property for the Next button to:

Navigate(Screen3,ScreenTransition.Cover)
Set the OnSelect property for the Back button to Back().
On Screen3, set the OnSelect property for the Back button to Back().
To test this, select 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 ScreenTransition. Notice how when you select your Back buttons, the transitions go in reverse order.
Now, let's try some of the other transitions. Put the app back into Edit mode and return to Screen1.
Select the Next button and change the OnSelect property to:

Navigate(Screen2,ScreenTransition.Uncover)
On Screen2, select your Next button and change the OnSelect property to:

Navigate(Screen3,ScreenTransition.CoverRight)
Now, return to Screen1, put the app back into Preview/Play mode, and observe the behavior of these transitions.
Finally, let's try adding in a ScreenTransition for the Back button on Screen2. Remember that you can always add a transition for the Back() function. For the OnSelect property enter the following:

Back(ScreenTransition.UnCoverRight)
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.

Continue