Power Apps Navigate Function + 16 Examples

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.

  1. PowerApps navigate to another screen
  2. PowerApps navigate to another screen based on value
  3. PowerApps navigate to specific record
  4. PowerApps navigate with parameters
  5. PowerApps navigate to url
  6. PowerApps navigate to another screen after submit
  7. PowerApps navigate with variable
  8. PowerApps navigate on start
  9. PowerApps navigate onselect
  10. PowerApps navigate to previous screen
  11. PowerApps navigate after 5 seconds
  12. PowerApps navigate and reset form
  13. PowerApps navigate based on dropdown selected
  14. PowerApps navigate if success
  15. PowerApps navigate last screen
  16. 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.,

powerapps navigate to another screen
powerapps navigate to another screen

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 ArgumentDescription
ScreenTransition.None (Default)The new screen replaces the current screen Quickly.
ScreenTransition.FadeThe current screen fades away to reveal the new screen.
ScreenTransition.CoverIt moves from Right to Left to cover the current screen and displays the new screen slide.
ScreenTransition.CoverRightIt moves from Left to Right to cover the current screen and displays the new screen slide.
ScreenTransition.UnCoverIt moves from Right to Left to uncover the new screen, and the current screen slides out of view.
ScreenTransition.UnCoverRightIt moves from Left to Right to uncover the new screen slide, and the current screen slides out of view.
Power Apps Navigate Transition

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,

  1. Variable: It defines the name of a context variable to create or update, and this is required.
  2. 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 } )
UpdateContext record in powerapps
UpdateContext record in powerapps

In the ButtonLilly OnSelect property apply the below formula:

UpdateContext( { Name: "Lilly", Age: 10 } )
Powerapps Updatecontext record
Powerapps Updatecontext record

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

Update Context record in power apps
Update Context record in power apps
Update Context record in powerapps
Update Context record in powerapps

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.

powerapps navigates to another screen
powerapps navigates to another screen

To rename the Screen name you can follow the below steps:

navigates to another screen in powerapps
navigates to another screen in powerapps

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)
navigates to another screen in powerapps
navigates to another screen in powerapps

In the AboutUs button OnSelect Property apply the below formula:

Navigate(AboutUsScreen,ScreenTransition.Fade)
navigates to another screen in power apps
navigates to another screen in power apps

In the ContactUs button OnSelect Property apply the below formula:

Navigate(ContactUsScreen,ScreenTransition.Fade)
Example in powerapps to navigate to another screen
Example in powerapps to navigate to another screen
  • 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

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:

powerapps navigate to another screen based on value
powerapps navigate to another screen based on value

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"]
power apps navigate to another screen based on the value
power apps navigate to another screen based on the value

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)
)
navigate to another screen based on the value in powerapps
navigate to another screen based on the value in powerapps

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/")
navigate to URL in powerapps example
navigate to URL in powerapps example
navigate to URL in power apps example
navigate to URL in power apps example
  • 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.

Read PowerApps weather app

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()
powerapps navigate to previous screen
powerapps navigate to previous screen

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

powerapps navigate StartScreen
powerapps navigate StartScreen

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.

powerapps navigate StartScreen
powerapps navigate StartScreen

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.

Navigate after 5 seconds in powerapps
Navigate after 5 seconds in powerapps

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:

Navigate after 5 seconds in poweerapps example
Navigate after 5 seconds in poweerapps example
Navigate after 5 seconds in power apps example
Navigate after 5 seconds in power apps example
Example in powerapps navigate after 5 seconds
Example in powerapps navigate after 5 seconds

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:

navigate based on dropdown selected in power apps example
navigate based on dropdown selected in power apps example

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.

navigate based on dropdown selection in powerapps
navigate based on dropdown selection in powerapps

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
    )
)
navigate based on dropdown selection in power apps
navigate based on dropdown selection in power apps

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)
Example to navigate based on dropdown selection in powerapps
Example to navigate based on dropdown selection in powerapps
  • 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
how to navigate to another screen after submit in powerapps
how to navigate to another screen after submit in powerapps

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:

powerapps navigate to another screen after submit
powerapps navigate to another screen after submit

In the Task screen OnVisible Property write the below formula:

NewForm(FormEdit);
powerapps example navigate to another screen after submit
powerapps example navigate to another screen after submit

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)
power apps example navigate to another screen after submit
power apps example navigate to another screen after submit

Now save and Publish your application. If you run your application you can see the expected output as follows:

navigate to another screen after submit in power apps
navigate to another screen after submit in power apps
navigate to another screen after submit in power apps example
navigate to another screen after submit in power apps example

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)
powerapps navigate if success example
powerapps navigate if success example

See the output below:

If we entered the field values correctly, the OnSucess property calls and it navigates to the success screen.

powerapps navigate if success
powerapps navigate if success

If we fail to enter the required field values mentioned in the TaskScreen, it shows us the error message.

navigate if success in powerapps
navigate if success in powerapps

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,

  1. FormEdit = Specify the PowerApps edit form name
  2. ViewTaskScreen = Specify the PowerApps Screen name
Powerapps navigate and reset example
Powerapps navigate and reset example

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.

power apps navigate and reset form
power apps navigate and reset form

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)
  1. Variable: It defines the name of a context variable to create or update, and this is required.
  2. 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)
how to navigate with parameters in powerapps
how to navigate with parameters in powerapps

In the GoToButton control, the OnSelect property writes the below formula to navigate to another screen with parameters.

Navigate(OutputScreen)
how to navigate with parameters in power apps
how to navigate with parameters in power apps

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
how to navigate with parameters in powerapps example
how to navigate with parameters in powerapps example

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.

powerapps navigate with parameters
powerapps navigate with parameters

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.
Power apps navigate to sharepoint list example
Power apps navigate to sharepoint list example
  • 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.
navigate to sharepoint list in powerapps
navigate to sharepoint list 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")
)
navigate to sharepoint list in power apps
navigate to sharepoint list in power apps

See the output below:

The dropdown button allows us to select a particular item. Navigates to the selected SharePoint list.

Powerapps navigate to sharepoint list example
PowerApps navigate to sharepoint list example

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);
powerapps navigate to a specific record
PowerApps navigate to a specific record

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
power apps navigate to a specific record
power apps navigate to a specific record

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.

how to navigate to a specific record in PowerApps
how to navigate to a specific record in PowerApps

This is how to navigate to a specific record in Power Apps.

Also, you may like the below PowerApps Tutorials:

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
>