In this Power Apps tutorial, We will discuss, what is the navigate function in Power Apps and how to use the Power Apps navigate function with various examples.
- PowerApps navigate to another screen
- PowerApps navigate to another screen based on value
- PowerApps navigate to specific record
- PowerApps navigate with parameters
- PowerApps navigate to url
- PowerApps navigate to another screen after submit
- PowerApps navigate with variable
- PowerApps navigate on start
- PowerApps navigate onselect
- PowerApps navigate to previous screen
- PowerApps navigate after 5 seconds
- PowerApps navigate and reset form
- PowerApps navigate based on dropdown selected
- PowerApps navigate if success
- PowerApps navigate last screen
- PowerApps navigate to sharepoint list
Power Apps Navigate() Function
We can use the Power Apps navigate() function to navigate from one screen to another screen. We can also use the navigate function to navigate to a different URL inside an app in Power Apps.
Let us see, how to use the Power Apps navigate function.
Power Apps Navigate function Syntax
Below is the navigate function syntax:
Navigate(Screen[,Transition[,UpdateContextRecord]])
The navigation() function in Power Apps takes 3 Parameters.
- Screen: This is the Power Apps screen where user wants to navigate.
- Transition: Screen Transition options while navigating between screens. Options available are Cover, Fade, and None. By default, it takes the option value as None. This is an optional parameter.
- UpdateContextRecord: This is an optional parameter, using this we can pass variables between screens.
Read How to view PDF files using PDF Viewer in PowerApps
Power Apps Navigate Screens
The first argument is your Screen Name which specifies the screen which you want to display. Power apps have different types of screens. They are, Blank screen, Scrollable screen, List screen, Succes screen, etc.,
Power Apps Navigate Transition
As I mentioned above, specify the first argument as your Screen Name. And the second argument is the Transition option which specifies the old screen changes to a new screen.
Transition Argument | Description |
ScreenTransition.None (Default) | The new screen replaces the current screen Quickly. |
ScreenTransition.Fade | The current screen fades away to reveal the new screen. |
ScreenTransition.Cover | It moves from Right to Left to cover the current screen and displays the new screen slide. |
ScreenTransition.CoverRight | It moves from Left to Right to cover the current screen and displays the new screen slide. |
ScreenTransition.UnCover | It moves from Right to Left to uncover the new screen, and the current screen slides out of view. |
ScreenTransition.UnCoverRight | It moves from Left to Right to uncover the new screen slide, and the current screen slides out of view. |
Also, read, How to Play Microsoft stream Videos in Power Apps
Power Apps UpdateContextRecord
Power Apps UpdateContext variable creates a local variable, we can access it only within the same screen. Power apps Context variables can hold strings, numbers, records, and tables.
UpdateContext({variable: value})
where,
- Variable: It defines the name of a context variable to create or update, and this is required.
- Value: It defines the value to assign to the context variable, this is also required.
Let us see some examples of how to use it in the Power Apps canvas App.
- Add a new Blank screen(Home -> New screen) in your Power apps and rename it as SourceScreen.
- Add two Label controls (Insert ->Label) on the same screen.
- Add two Button controls (Insert -> Button) on the same screen and rename them .
- Add two TextInput control (Insert -> Text)on the same screen.
Apply this below formula on the ButtonRose OnSelect property
UpdateContext( { Name: "Rose", Age: 15 } )
In the ButtonLilly OnSelect property apply the below formula:
UpdateContext( { Name: "Lilly", Age: 10 } )
.Pass the variable Name in the Default property of the TextInput control. In the same way, pass the variable Age in the default property of anotherTextInputControl.
This is how to work with UpdateContext record in Power Apps.
Check out, Create a portal in PowerApps
How to navigate to another screen in Power Apps
Let us see, how to navigate to another screen in Power Apps using the navigate function.
In this example, I’m going to add three Blank Screens and rename them. The screens are:
- HomeScreen
- AboutUsScreen
- ContactUsScreen
To add a new screen in the Power Apps canvas app, Select Home and click on the New screen to add a new screen.
Follow the below steps to rename a screen in Power Apps.
To rename the Screen name you can follow the below steps:
Now, let us add 3 buttons to all the screens.
Open the Power Apps Home screen, go to Insert -> Button, once the button is added, rename it to Home. In the same way, add two more buttons to the same screen as AboutUs and ContactUs.In the same way, add these buttons in the AboutUs and ContactUs screens.
In the Home button OnSelect Property apply the below formula:
Navigate(HomeScreen,ScreenTransition.Fade)
In the AboutUs button OnSelect Property apply the below formula:
Navigate(AboutUsScreen,ScreenTransition.Fade)
In the ContactUs button OnSelect Property apply the below formula:
Navigate(ContactUsScreen,ScreenTransition.Fade)
- when we select the Home button it navigates to the HomeScreen
- when we select the AboutUs button it navigates to the AboutUs Screen
- when we select the ContactUs button it navigates to the ContactUs Screen
This is how to navigate to another screen in Power Apps.
Read PowerApps twitter connector example
Navigate to another screen based on a value in Power Apps
Let us see, how to navigate to another screen based on the field value in Power Apps using the navigate function.
In this example, I’m going to add three Blank Screens and rename them. The screens are:
- RadioScreen
- NoScreen
- YesScreen
In the Power apps RadioScreen Insert the Radio button control (Insert -> Radio) as shown below:
In the Radio button control set an Items property as yes or no. We can also add multiple choices in the items property for the radio button control. We can also set the item property as (on or off), (true or false)based on the scenario.
["Yes","No"]
In Power Apps to navigate to another screen based on the field value, Apply the below formula in the OnSelect property of the Radio button control on the RadioScreen.
If(
RadioButtonControl.Selected.Value = "Yes",
Navigate(YesScreen),
RadioButtonControl.Selected.Value = "No",
Navigate(NoScreen)
)
If the user wants to navigate to the YesScreen based on the value it redirects to the YesScreen.Else, it redirects to the NoScreen.
This is how to navigate to another screen based on a value in Power Apps.
Read How to show RSS feed in PowerApps
Power Apps Navigate to URL
We will learn, how to navigate a URL in a Power Apps screen. we will see an example in it.
In the Power Apps, we can navigate to the URL using the Launch function. And we can easily access the mentioned site URL through the launch function in PowerApps.
Launch("Address")
- Launch function launches a webpage or a canvas app.
- The site address is required to launch the URL of the webpage.
we will see how to navigate to the URL webpage in the Power Apps screen using buttons.
In this example, I’m going to add two Button controls. Rename them as SPGuides and EnjoySharePoint
As I mentioned in the SPGuides button control OnSelect property, we will apply the SPGuides site URL as shown below:
Launch("https://www.spguides.com/")
And also in the EnjoySharePoint button control OnSelect property apply the below formula to navigate to the EnjoySharePoint site address as shown below:
Launch("https://www.enjoysharepoint.com/")
- If you select the button named SPGuides, it navigates to the SPGuides webpage site URL.
- If you select the button named EnjoySharePoint, it navigates to the EnjoySharePoint webpage site URL.
This is how to navigate to URL in Power Apps.
Power Apps Navigate to Previous Screen
In Power Apps, we use the Back() function to navigate to the previous screen. we will learn how to use the Back function in Power Apps.
Back()function, returns the most recently displayed power apps screen. By default, the inverse transition is used when the Back() function runs. Their own inverses are Fade and None.
Usually, the Back() function returns a true value, Below represents the Back() function syntax to navigate to the previous screen in power apps.
Back function syntax in Power Apps
Back([Transition])
- Transition is optional, which is used between the current screen and the previous screen.By default,inverse transition happens.
How to navigate to Previous screen in Power Apps
Let us see, how to navigate to the previous screen in Power Apps using the Back function.
Apply the below formula in the OnSelect Property:
Back()
This is how to navigate to the previous screen in Power Apps.
Power Apps StartScreen
By using the Power Apps StartScreen function, we can set a start screen for a Power Apps App.
Suppose I have 5 screens in the canvas app, by default the 1st screen will be the start screen for the app. But by using the Power Apps StartScreen function, we can set any screen as the start screen.
Read Fetch Outlook email details PowerApps using Office 365 Outlook Connector
Navigate action in Power Apps App.OnStart is now deprecated
Navigate is no longer supported within the App.OnStart.Navigate() action within App.OnStart to determine which screen the user should be redirected to when loading the app. But as of now, it is no longer supported to use a Navigate action within the OnStart of your Power App.
Use App.StartScreen instead of OnStart
If we want to set the start screen of your app we need to configure our App.StartScreen. we can use App.StartScreen instead of App.OnStart.
We can directly set our start screen in the App.StartScreen property as I mentioned below.
First, select the App and then select the StartScreen property, and we can mention the StartScreen (screen name) in powerapps.
We can also set the screen name whichever we want to configure as the start screen of our app in PowerApps.
In the above example, I mentioned the StartScreen name as YesScreen. So when my app starts, it directly redirects to the YesScreen, which I have configured as the StartScreen of my app in Power Apps.
This is how to set the StartScreen in Power Apps.
Power Apps Navigate after 5 seconds
We will learn, how to navigate to another screen in Power Apps with a limited duration.
In the Power Apps canvas application, To insert Timer control, first select the Insert tab and then click on the Input option and Select the Timer control. Now, we will be able to see the timer control added to the Power Apps screen.
In the Timer control, set the below properties:
- By default, the Duration property will be 60 milliseconds, change it to 5 milliseconds.
- Then enable AutoStart property to True. Once you set it true, whenever you run your application the Timer will start.
- Then set the OnTimerEnd property as like below:
Navigate(NavigateTimeOutScreen)
When the Timer control reaches the duration value, it automatically navigates to the screen (NavigateTimeOutScreen) provided in the navigate() function.OnTimerEnd property.
You can use these properties as I mentioned below:
Timer control automatically starts when you run your application. Once it reaches the duration value which we mentioned as 5 seconds, it navigates to the TimeOut screen after 5 seconds.
This is how to navigate to another screen after 5 seconds in Power Apps.
Read PowerApps Examples: Restaurant management system
Power Apps Navigate based on Dropdown selected
Let us see, how to navigate to another screen based on the dropdown value in Power Apps using the navigate function.
In the Power Apps, canvas app Insert the dropdown (Insert ->Dropdown) as shown below:
In the Dropdown, control set an Items property we can set options based on the scenario. We can also add multiple choices in the items property for the dropdown control in Power Apps.
To navigate to another screen based on the dropdown selected value, we can apply the below formula in the OnSelect property of the Dropdown control in Power Apps.
If(
DropdownControl.Selected.Value = "SPguides",
Navigate(
SPguides,
ScreenTransition.Fade
),
DropdownControl.Selected.Value = "Pythonguides",
Navigate(
Pythonguides,
ScreenTransition.Fade
),
DropdownControl.Selected.Value = "EnjoySPguides",
Navigate(
EnjoySPguides,
ScreenTransition.Fade
)
)
Added Button control to reset the selected dropdown values. Apply the below formula in the OnSelect property of the button control in Power Apps.
Reset(DropdownControl)
- The dropdown button allows the user to select a particular item or a single item. As well shows the currently selected item.
- If the user Selects the SPguides option it navigates to the SPguides Screen based on the dropdown selected value.
- If the user Selects the Pythonguides option it navigates to the Pythonguides screen based on the dropdown selected value.
- If the user Selects the EnjoySPguides option it navigates to the EnjoySPguides based on the dropdown selected value.
This is how to navigate based on the dropdown selected value in Power Apps.
Also, read, How to create calculator in PowerApps
Power Apps navigate to another screen after submit
Let us see, how to navigate to another screen after submitting the form in Power Apps with a few examples.
Initially, we have to create a SharePoint list on our SharePoint site. Add a new column and their data types. For example, I have created a List named ‘Task List‘ and added four columns to it.
- TaskName – Single line of text
- TaskDescription – Multiple lines of text
- AssignedTo – Person or Group
- TaskStatus – Choice
Connect a SharePoint List to PowerApps
To connect a SharePoint list to PowerApps follow the below steps:
- Make sure you have created a list in your sharepoint site.
- Select Connect to data.
- Select a data source as Sharepoint.
- Connect to your Sharepoint site.
- Choose a list which you want to integrate as a data source in your powerapps screen.
How to navigate to another screen after submit
In this example, we will add two new blank screens and rename them as Task screen and view Task screen and we will also add a Success screen.
In the Power Apps TaskScreen, Insert the Edit form (Insert ->Forms->Edit) as shown below:
In the Task screen OnVisible Property write the below formula:
NewForm(FormEdit);
Add a new button and rename it as ‘Submit’ on the Task screen, Apply the below formula in the Submit button OnSelect Property.
Once we submit our edit form, the data which you entered will be saved to your Sharepoint list. It also navigates to the Success screen after submission.
SubmitForm(FormEdit);
Navigate(SuccessScreen)
Now save and Publish your application. If you run your application you can see the expected output as follows:
This is how to navigate to another screen after submitting in Power Apps.
Read Fetch azure groups in PowerApps using PowerApps Azure AD Connectors
Power Apps navigate if success
Let us see how to navigate to another screen based on the condition. We will also see a few examples in it.
In the TaskScreen Edit Form, Apply the below formula in the OnSuccess property. It will navigate only the required field data is entered and the form is valid.
If we entered the fields mentioned in the TaskScreen correctly, then it navigates to the SuccessScreen.Else, it shows the error message.
Navigate(SuccessScreen)
See the output below:
If we entered the field values correctly, the OnSucess property calls and it navigates to the success screen.
If we fail to enter the required field values mentioned in the TaskScreen, it shows us the error message.
This is how to navigate if success in Power Apps.
Read PowerApps Combobox SharePoint List Example
Power Apps Navigate and Reset Form
Let us discuss how to reset form field values and navigate to another screen. We will also see a few examples in it.
In this example, we will add a new Blank screen, rename it as ‘ViewTaskScreen’ add a new Button control, and rename it as ‘Reset’.
In the TaskScreen I have added the Reset button control which navigates to the ViewTaskScreen.
when we click on the reset button it resets the form field values and navigates to another screen which is ViewTaskScreen. In the Reset button OnSelect Property write the below formula:
ResetForm(FormEdit);
Navigate(ViewTaskScreen)
Where,
- FormEdit = Specify the PowerApps edit form name
- ViewTaskScreen = Specify the PowerApps Screen name
Save and Publish your application. If you run your application you can see the expected output as follows:
If we select the Reset button, it resets the form fields values and Navigates to the ViewTaskScreen.
This is how to navigate Power Apps and reset form in Power Apps.
Power Apps Navigate with parameters
Let us discuss how to navigate to another screen with parameters, and also we will see an example.
In this example, we will add two blank screens, rename them as
- InputScreen
- OutputScreen
In the InputScreen we will add a Text input and Button control rename it as ‘InputText’ and ‘GoToButton’.
In the OutputScreen add label control and rename it as ‘OutputText’.
If we declare a global variable in the application. we can access the declared global value anywhere when we run the application in Power Apps.
Set(variable, value)
- Variable: It defines the name of a context variable to create or update, and this is required.
- Value: It defines the value to assign to the context variable, this is also required.
In Powerapps to Navigate to another screen with the parameter value, we have to follow these properties. In the InputScreen, InputText control OnChange property, we can apply the below formula:
Set(Variable,InputText)
In the GoToButton control, the OnSelect property writes the below formula to navigate to another screen with parameters.
Navigate(OutputScreen)
In the OutputText control, pass the string and also the declared variable in the Text property. It displays the value assigned to the variable.
"Hello " & Variable
see the output below:
In the InputText box filed enter any text value input and then if we select the GoTo button, it navigates to another screen and displays the parameter value results as shown below.
This is how to navigate with parameters in Power Apps.
Read How to create a PowerApps Canvas app from Excel OneDrive for Business data source
Power Apps Navigate to SharePoint list
- Let us see, how to navigate to the SharePoint list based on the dropdown value in Power Apps using the navigate function.
- Please make sure you are already created a few lists in your Sharepoint Site.
- In the Power Apps, canvas app Insert the dropdown (Insert ->Dropdown).
- In the Dropdown, control set an Items property as your SharePoint list Names. we can also add your list name as choices in the items property for the dropdown control based on the scenario in powerapps.
- Add Button control to Navigate to SharePoint list for the selected dropdown values. Apply the below formula in the OnSelect property of the button control.
If(
Dropdown1.Selected.Value = "SampleTest",
Launch("https://tsinfotechnologies.sharepoint.com/sites/PowerAppsExamples/Lists/Sample%20Test/AllItems.aspx"),
Dropdown1.Selected.Value = "EyeCareHospital",
Launch("https://tsinfotechnologies.sharepoint.com/sites/PowerAppsExamples/Lists/EyeCareHospital/AllItems.aspx"),
Dropdown1.Selected.Value = "TaskList",
Launch("https://tsinfotechnologies.sharepoint.com/sites/PowerAppsExamples/Lists/TaskList/AllItems.aspx")
)
See the output below:
The dropdown button allows us to select a particular item. Navigates to the selected SharePoint list.
This is how to navigate to the SharePoint list in Power Apps.
PowerApps Navigate to Specific Record
Let us see how to navigate to a specific record in a power app. We will also see a few examples in it.
In this example, we will add two new Blank screens, rename them as ‘ViewTaskScreen’ and ‘DetailedTaskScreen’.
In the ViewTaskScreen add a vertical gallery as input control. Make sure you have created a list on the SharePoint site. Add that list as a data source for the particular screen.
In the NextArrow OnSelect property apply the formula as shown below which navigates for a specific record detail.
Set(varRecord,ThisItem);Navigate(DetailedScreen);
In the DetailedTaskScreen add an Edit form as input control. In the Item, the property passes the variable which you have declared in the ViewTaskScreen and that function returns a specific record detail.
varRecord
See the output below:
If you select a specific record in the ViewTaskScreen it navigates to the DetailedTaskScreen and shows you a specific record in detail.
This is how to navigate to a specific record in Power Apps.
Also, you may like the below PowerApps Tutorials:
- Power Apps SharePoint Button
- Power Apps in SharePoint
- Power Apps Radio Button
- Power Apps WeekNum and ISOWeekNum Function with Examples
- PowerApps form benefits for SharePoint
- PowerApps tips and tricks
- PowerApps nested gallery control example
- SharePoint PowerApps Example – Get bank branch details based on State
- PowerApps Example – Create a Bank Account Statement
In this Power Apps tutorial, we discussed about the PowerApps Navigate function and by using some different kind of examples, we learnt how to use it in the app.
Also, we covered these below topics:
- How to navigate to another screen in PowerApps
- Work with PowerApps navigate to another screen based on value
- PowerApps navigate to specific record
- How to navigate with parameters in PowerApps
- What is PowerApps navigate to url
- PowerApps navigate to another screen after submit
- PowerApps navigate with variable
- What is PowerApps navigate on start
- What is PowerApps navigate onselect
- PowerApps navigate to previous screen
- PowerApps navigate after 5 seconds
- PowerApps navigate and reset form
- PowerApps navigate based on dropdown selected
- Use PowerApps navigate if success
- How to work with PowerApps navigate last screen
- How to use PowerApps navigate to sharepoint list
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.
Is there a way to Navigate to StartScreen ?
Using varRecord in the “Item” property of your form may or may not work. I did this effectively through ten days of testing, then SUDDENLY it stopped working. (There is apparently a bug in the function that auto-identifies the variable’s data type that will disrupt the fetching of the record).
Instead, I had to use LookUp in the “Item” property like so…
LookUp(SP_List_Name, ID=varCurrentRecord.ID)