While working on a Power Apps project, a client asked me to navigate between screens with some transition effects. Fortunately, Power Apps provides a function called Navigate() that can be easily achieved.
In this article, I will explain the Navigate function in Power Apps and various screen transitions.
Apart from that, we will also see how to use the Navigate function in Power Apps with various examples like:
- Navigate Power Apps previous screen and next screen using a button
- Navigate to the URL in Power Apps
- Power Apps navigate to screen based on value
- Working with Power Apps navigate UpdateContext
Navigate Function in Power Apps
The Navigate function in Power Apps is used to navigate between different screens in the app. It allows you to navigate to a specific screen.
Syntax: Navigate(Screen [, Transition[, UpdateContextRecord]])- Screen: This is a required argument. Inplace of a screen argument, we need to provide the screen name we wish to navigate.
- Transition: This is an optional argument. Used for visual transition between one screen to another during navigation. The default value is None.
- UpdateContextRecord: Optinal argument. This screen updates the context variables in the new screen if we create variables inside this UpdateContextRecord.
Back Function in Power Apps
The Back function in Power Apps returns to the recently displayed screen with the default return transition.
Syntax: Back([Transition])The Transition argument is optional here. It has options like Cover, Fade, CoverRight, etc.
Screen Transitions in Power Apps
We use these screen transitions in the second argument of the Navigate function and the Back function to specify how the old screen changes to the new screen.
Here, I’m taking one form example. While submitting the form, you will see various screen transitions in Power Apps.
| Transition | Description | Examples |
| ScreenTransition.Cover | The success screen slides move right to left to cover the current screen. |  |
| ScreenTransition.CoverRight | The success screen slides move left to right to cover the current screen. |  |
| ScreenTransition.Fade | The form screen fades away to reveal success screen. |  |
| ScreenTransition.UnCover | The current screen moves right to left to uncover the success screen |  |
| ScreenTransition.UnCoverRight | The current screen moves left to right to uncover the success screen |  |
Power Apps Navigate to Next Screen Using Button
Here, we will see how to use the button control to navigate from one screen to the next screen in Power Apps.
Here, I’m taking three screens, which consist of the
- Welcome screen
- Display form screen
- Edit form screen
To achieve the above example, follow the steps below.
1. Add a button control to the welcome screen. Then, put the formula in the Onselect property of the button.
Navigate('Project Details screen',ScreenTransition.Cover)In the above formula, the first argument is the display screen name, and the second is the screen transition property.
2. Now, check it once by previewing the app.
3. In the second screen, add one icon/button to navigate to the third screen.
Navigate('Add/Edit screen',ScreenTransition.CoverRight)
4. To check this, preview the app. Click the icon, and it will navigate to the third screen.
5. In the third screen, add a back arrow icon to return to the previous screen. In the Onselect property of the icon, paste the formula below.
Back()
6. Look at the example below; when I clicked the icon, it returned to the previous screen.
Now, save and preview the app. You’ll be notified that clicking those buttons navigates between screens.
Power Apps Navigate to URL
In Power apps, we can use the Launch function to navigate to a URL. Here’s a simple example of how to use PowerApps to navigate to the URL.
Example: After submitting the form, I want to see the details that were previously submitted.
Follow the steps below to achieve the above example.
1. Add a button control to the screen. Set the Text property of the button.
2. Set the Onselect property of button control to the following formula.
Launch("https://szg52.sharepoint.com/sites/FinanceDepartment/Lists/Project%20Management%20Team")Replace"https://szg52.sharepoint.com/sites/FinanceDepartment/Lists/Project%20Management%20Team" with the URL you want to navigate to.
3. Save the changes and preview the app. When you click on the button, powerApps will open the specified URL in a web browser.
That’s it; like this, you can simply navigate to another screen within or out of the app using this launch function.
Power Apps Navigate to Screen Based On Value
One of Power Apps’ unique features is the ability to dynamically navigate to different screens based on the user’s selection of values.
To achieve this, follow the example below.
Example: In this example, I have an “Issue Tracker” SharePoint list with a “Priority” choice column. Contains values
- High
- Normal
- Low
- Critical
Upon selecting a priority value, the goal is to navigate from the current screen to the next screen, which displays details related to the specified value.
1. Add a dropdown control in the Power Apps screen. Then, set the below formula in the Items property of the dropdown.
Distinct('Issue Tracker',Priority.Value)Here, Distinct() will take unique values from the SharePoint list. Issue Tracker is the source name, Priority.Value it will fetch the values of priority in to the present dropdown.
2. Now, preview the app; it will show the values we have used in the priority column of the data source.
3. In the Onselect property of the dropdown. Put the formula below.
Switch(
Dropdown1.Selected.Value,
"High", Set(varSelectedPriority, "High"),
"Low", Set(varSelectedPriority, "Low"),
"Critical", Set(varSelectedPriority, "Critical"),
"Normal", Set(varSelectedPriority, "Normal")
)In this formula, the Switch() checks the selected value against multiple cases (“High,” “Low,” “Critical,” “Normal”) in the dropdown and sets the varSelectedPriority variable using the Set function.
4. Add one button control below the dropdown. When you click this button after selecting a value in the dropdown, you will navigate to the next screen.
Put the formula below in the Onselect property of the button.
Set(varSelectedPriority, Dropdown1.Selected.Value);
Navigate(Screen2, ScreenTransition.Cover)
We will check this button control after adding the destination screen.
5. In the new screen, add a Data Table to show information related to the selected value. Then, put the formula below in the Table’s Items property.
Filter('Issue Tracker', Priority.Value = varSelectedPriority)Here, the Filter() function will filter the data based on the selected value in the dropdown.
If you want to come back from the destination screen to the previous screen, add one icon and use the Back() in the Onselect property.
That’s it; I hope you understand how to navigate to other screens based on the value.
Power Apps Navigate UpdateContext
In Power Apps, the UpdateContextRecord argument in the navigate function. Allows you to update context variables or records in the destination screen based on the values passed from the source screen.
Example:
In this example, I want to get the reference screen details, like which screen the current screen is coming from and when the button/icon was clicked.
To achieve this, follow the steps below.
1. Place an Information icon on the screen. In the Onselect property of the icon, enter the formula below.
Navigate(Screen2,ScreenTransition.CoverRight,{_referenceScreen:App.ActiveScreen.Name,_whenClicked:Now()})Here, the variables _referenceScreen and _ whenClicked replace the update context record argument. The first variable contains information on the current screen details, and the second variable contains the current time using the Now() function.
2. Save and preview the app. Then, click the information icon to get the reference screen details.
Like this, you can use the update context argument in the Power Apps navigate function.
I hope this article is relevant to your search. Based on the examples I’ve provided, you can customize them to suit your needs.
Here, I have explained the Power Apps navigate, back function in Power Apps, screen transition Power Apps, Power Apps button to the next screen, Power Apps navigate to screen based on value, and Power Apps update context.
You may also like the following tutorials:
- Data Table Control in Power Apps
- Power Apps Delegation Warnings
- Power Apps Radio Button Control
- PDF Viewer Control in Power Apps
- Gallery Control in Power Apps
- Power Apps Gallery Conditional Formatting
- Power Apps WeekNum and ISOWeekNum Function
Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.
