How to Navigate to Other Screens in Power Apps?

Want to learn how to navigate to other screens in Power Apps?

In this Power Apps tutorial, I will show you how to navigate from one screen to another in the Power Apps canvas app.

Power Apps Screen Navigation

  1. The user can use the Power Apps Navigate function to change from one screen to another.
  2. For Power Apps screen navigation, we can use visual transition arguments in Power Apps.

The Power Apps visual transition arguments are:

Visual Transition ArgumentsDescription
ScreenTransition.CoverThe Transition moves from left to right to cover the current screen and display the new screen.
ScreenTransition.CoverRightQuickly, the transition replaces the current screen with the new screen.
ScreenTransition.FadeThe present screen transitions to the new screen through a fading effect.
ScreenTransition.None (Default)Quickly, the transition replaces the current screen with the new screen.
ScreenTransition.UnCoverThe Transition moves from right to left to uncover the current screen and display the new screen.
ScreenTransition.UnCoverRightThe Transition moves from left to right to uncover the current screen and display the new screen.

How to Navigate to Other Screens in Power Apps

I will show you how to navigate from one screen to another.

Example:

On the Power Apps app [ThePrimeJobs], I have added six screens as mentioned below:

  1. Home Screen
  2. Job Openings
  3. Job Description
  4. Application Form
  5. Preview
  6. Success Screen

Now we will see how to navigate from one screen to another screen in Power Apps by using this scenario:

Power Apps screen navigation
Screen navigation in Power Apps

Now we will see how to navigate from one screen to another screen in Power Apps by using this scenario:

Step 1:

Here, we will see how to navigate from the home screen to the job opening screen [Second screen]:

  • On the home screen, select the Next arrow icon -> Set its OnSelect property to:
Navigate('Job Openings',ScreenTransition.Fade);

Where,

  1. Job Openings = 2nd Screen Name
  2. ScreenTransition.Fade = Visual transition argument.
Power Apps Screen Navigation
  • Save, Publish, and Preview the app. Whenever a user clicks on the next arrow icon, the screen will navigate to the 2nd screen [Job Openings].
Power Apps navigate to another screen
  1. On the Power Apps second screen [Job Opening Screen], there is a list of jobs with a Next arrow icon and a Home icon.
  2. The user will return to the home screen when they click the home icon.

To achieve it, follow the below steps:

  • Select the Home icon -> Set its OnSelect property to:
Navigate(HomeScreen)

where,

  • HomeScreen: 1st screen name.
How to use the Power Apps canvas app Screen Navigation
  • Save, publish, and Preview the app. Whenever the user clicks on a home icon, it will navigate back to the home screen.

Step 2:

This section will show you how to navigate from a Job Openings screen to a job description screen.

Example,

  1. On the second screen [Job Openings] is a list of job openings with a next arrow icon.
  2. The user will navigate to the job description screen when they click the next arrow icon for the particular item.
How to use the Screen Navigation in Power Apps

To achieve this, follow the below steps:

  • On the first item [Process Engineer], select the Next arrow icon -> Set its OnSelect property to
Navigate('JOB Description', ScreenTransition.Fade)

Where,

  1. JOB Description: 3rd Screen Name
  2. ScreenTransition.Fade: I added an argument for Visual Transition
How to use the Screen Navigation in Power Apps canvas app
  • Save, Publish, and Preview the app. On the second screen, whenever a user clicks on the item’s next arrow icon, the screen will navigate to the 3rd screen [Job description].
Back and Navigate function in Power Apps

This is how we can navigate from a Job Openings screen to a Job description screen.

Step 3

This section will show you how to navigate from a job description to a job application screen.

Example,

  1. On the third screen [Job Description], there is a particular job description with an Apply Button control and a Back arrow icon.
  2. Whenever the user clicks on the button control, they will navigate to the job application form screen.
  3. Else, if they click on the back arrow icon, they will navigate back to the previous screen [Job Openings form]
Power Apps canvas app Screen Navigation with examples

To achieve this, follow the below steps:

  • Select the Back arrow icon -> Set its OnSelect property to:
Navigate('Job Openings');

Where,

  1. Job Openings: The Previous screen name
Utilize the Power Apps Screen Navigation
  • Select the Button control -> Set its OnSelect property to:
Navigate(ApplicationForm,ScreenTransition.None)

Where,

  1. ApplicationForm: Screen name
  2. ScreenTransition.None: I added an argument for visual transition
Utilize the Power Apps canvas app Screen Navigation
  • Save, Publish, and Preview the app. Whenever a user clicks the apply button control, the screen will navigate to the 4th screen [Job Application form].
Navigate function in Power Apps

This is how we can navigate from a Job Description screen to a Job Application form screen.

Step 4

In this section, I will show you how to navigate from a Job application Form screen to a Preview screen or Success screen.

Example,

  1. On the fourth screen [Job Application form], there is an Edit form and two Button controls.
  2. Whenever the user clicks on the first button control [Preview Button], they will navigate to the preview screen.
  3. Otherwise, they will navigate to the success screen if they click the second button control [Apply Button].
Utilize the Screen navigation in Power Apps

Follow the below steps to achieve this:

  • Select the Preview button control -> Set the OnSelect property to:
Navigate(Preview,ScreenTransition.Fade)

Where,

  1. Preview: 5th screen name.
  2. ScreenTransition.Fade: Argument for Visual Transition
Utilize the Screen navigation in Power Apps canvas app
  • Save, Publish, and Preview the app. Whenever a user clicks the preview button control, the screen will navigate to the 5th screen [Preview screen].
Power Apps back and navigate function

Preview Screen

  1. In the preview screen, there is a Back arrow icon.
  2. Whenever the user clicks on that, it will navigate back to the Job application form

To achieve it, follow the below steps:

  • Select the Back arrow icon -> Set its OnSelect property to:
Back(ScreenTransition.Cover)

Where,

  1. Back = The back function helps to return to the most recently used screen.
  2. ScreenTransition.Cover = Argument for Visual Transition
Screen Navigation in Power Apps with examples
  • Save, Publish, and Preview the app. When a user clicks the arrow icon, the screen will navigate to the most recently used.
Power Apps navigate screen transition

Apply Button

  • Select the Apply button control -> Set its OnSelect property to:
Navigate('Success Screen')

Where,

  1. Success Screen: Screen name
How to utilize the Power Apps canvas app Screen Navigation
  • Save, Publish, and Preview the app. The screen will navigate to the success screen whenever a user clicks the Apply button.
PowerApps Navigate to Previous Screen

This is how we can use the navigate function in Power Apps.

Conclusion

In this Power Apps tutorial, I have explained how to navigate from one screen to another screen in Power Apps.

Also, you may like some more Power Apps tutorials: