Navigate Function in Power Apps | PowerApps Navigate to Another Screen

The Navigate function in Power Apps helps you change which screen to display. It allows you to transition from one screen to another, either within the same app or to a different app.

In this tutorial, I will explain in detail the Power Apps navigate function, Power Apps screen transitions, and how to work with Power Apps navigate to another screen with various examples.

Also, we will cover:

  • What is Back function in PowerApps
  • Power Apps navigate to previous screen
  • How to use Power Apps button to next screen
  • Power Apps navigate to another screen with parameter
  • Working with Power Apps navigate to url
  • PowerApps switch screens

Navigate Function in Power Apps

The Power Apps Navigate function helps you change which screen you want to display. To see the screen change, you can specify a visual transition such as FadeCoverUnCover, etc.

Suppose there are two screens, Screen1 and Screen2. You want to change the screen from Screen1 to Screen2 when a user selects a button. In this case, you need to specify the formula (on Button’s OnSelect property) that includes a Navigate function.

Note:

You can use the Navigate function to set one or more context variables for the screen; that is the only way to set a context variable from outside the screen.

Syntax:

Navigate( Screen [, Transition [, UpdateContextRecord ] ] )

Where,

  • Screen = Specify the screen that you want to display
  • Transition = This is optional. You can set a visual transition between the current screen and the next screen. Here, the default value is None.
  • UpdateContextRecord = This is also optional. A record that contains the name of at least one column and a value for each column. This record updates the context variables of the new screen as if passed to the UpdateContext function.

Power Apps Screen Transitions

There are some Power Apps Navigate transition arguments. The first argument specifies the name of the screen to display. Similarly, the second argument specifies how the old screen changes to the new screen.

The table below represents some Navigate transition arguments and their descriptions:

See also  How to Check If Power Apps Dropdown is Empty?
Transition Argument Description
ScreenTransition.CoverThe new screen slides into view, moving right to left, to cover the current screen.
ScreenTransition.CoverRightThe new screen slides into view, moving left to right, to cover the current screen.
ScreenTransition.FadeThe current screen fades away to reveal the new screen.
ScreenTransition.None (Default)The new screen quickly replaces the current screen.
ScreenTransition.UnCoverThe current screen slides out of view, moving right to left, to uncover the new screen.
ScreenTransition.UnCoverRightThe current screen slides out of view, moving left to right, to uncover the new screen.

Back function in PowerApps

  • PowerApps Back function helps to return the screen that was recently displayed. You can use the successive Back calls to return all the way to the screen that appeared when the user started the app.
  • The inverse transition is used by default when the Back function runs. Fade and None are their own inverses.
  • PowerApps Back function always returns true, but it may return false if the user has not navigated to another screen.

Syntax:

Back( [ Transition ] )

Where,

Transition = This is optional. The visual transition is used between the current screen and the previous screen.

Power Apps Navigate to Another Screen

In the Power Apps app, there are three different screens [Welcome Screen, Quiz Screen, and Success Screen], as shown below.

navigate function in powerapps

Now, I would like to navigate or move one screen to another to make the application responsive and attractive. In this case, we can use the Navigate() function to achieve this. Follow the code below.

OnSelect = Navigate(
    'Quiz Screen',
    ScreenTransition.None
)
  • ‘Quiz Screen’ = Power Apps second screen name
  • ScreenTransition.None = We can use this transition to quickly replace the current screen with new screen
powerapps navigate to another screen

Once it is done, Save, Publish, and Preview the app. When the user selects the button control [Let’s Start], it will navigate to the second screen, as in the screenshot below.

This way, you can with the Power Apps navigate to another screen.

power apps screen transitions

Power Apps Navigate to Previous Screen

Suppose you are working with the different screens in the Power Apps app, and you want to navigate to the previous screen. In this case, you can use the Back() function.

OnSelect = Back()

                   OR

OnSelect = Back(ScreenTransition.Cover)
power apps navigate to previous screen

Have a look at the below screenshot for the output.

powerapps navigate to previous screen

Power Apps Button to Next Screen

Next, I will show you how to navigate or redirect to the next or another screen in Power Apps with a simple scenario.

See also  Power Apps Different Home Screen Based On Different User

Scenario:

I have created a Power Apps collection to store the user details [Username and Password]. For that, on the Power Apps screen, I have inserted two text input controls and a button control.

Whenver the user provides the details and clicks on the button control, it will store the collection as well as navigate to the Welcome Screen.

To do so, select the Button control and set its OnSelect property to the code below.

OnSelect = Collect(
    colUserLogin,
    {
        UserName: txt_Username.Text,
        Password: txt_Password.Text
    }
);
Navigate(
    'Welcome Screen',
    ScreenTransition.None
)

Where,

  • ‘Welcome Screen’ = Power Apps second screen name
power app button to next screen

Preview the app. Once the user provides the details and clicks on the button control, the app will store the collection and navigate to the Welcome Screen, as shown below.

navigate in powerapps

This is how to navigate or redirect to the next or another screen in Power Apps.

Power Apps Navigate to Another Screen with Parameter

Let’s see how to navigate to another screen with parameters in Power Apps with a simple example.

Example:

In Power Apps, there are two screens [First Screen and Second Screen]. On the First screen, I have added a Text input control that contains a Global Variable and a Button control to navigate to the second screen.

On the second screen, I have added a Text label control to display the text along with the parameter value.

Whenver the user adds a value on the text input control and clicks on the button control, it will navigate to the second screen and add that parameter value to the text label string.

Output:

powerapps navigate to another screen with parameter

To achieve it, follow the below steps.

1. On the Power Apps Screen [First Screen], insert a Text input control, set its Default property to blank, and set its OnChange property to the code below.

OnChange = Set(
    varParameter,
    txt_InputValue
)

Where,

  • varParameter = Power Apps global variable name
  • txt_InputValue = Text input parameter value
power apps navigate to another screen with parameter

2. Then, insert a Button control and set its OnSelect property to the code below.

OnSelect = Navigate(
    'Second Screen',
    ScreenTransition.Fade
)
powerapps button to next screen

3. Now, on the Power Apps Second Screen, insert a Text label and set its Text property as:

Text = "Microsoft"&" "&varParameter.Text

Where,

  • “Microsoft” = Power Apps string value
  • varParameter = Parameter value
Power Apps Navigate Screen with parameter

4. Finally, go to the Preview section. Once the user adds a value in the text input control and clicks on the button control, it will navigate to the second screen and add that parameter value to the text label string, as shown below.

See also  How to Set Gallery First Item in Power Apps Display Form

This is how we can work with the Power Apps navigate to another screen with parameter.

PowerApps Navigate Screen with parameter

Power Apps Navigate to URL

In this section, I will explain how to work with the Power Apps navigate the URL using button control with a simple scenario.

Scenario:

There is a Button control in Power Apps. Now, I would like to add a URL to the button control so that when the user clicks or taps it, it will navigate to or redirect to the appropriate website.

Have a look at the below screenshot for the output.

powerapps navigate url

To do so, follow the below steps. Such as:

1. On the Power Apps Screen, insert a Button control and set its Text and OnSelect properties using the following codes.

Text = SpGuides.com

OnSelect =  Launch("https://www.spguides.com/")

Where,

  • Launch() = The PowerApps Launch() function works the same way as hyperlinks. It allows you to launch web pages, apps, and other services on your device
  • “https://www.spguides.com/” = Respective Website URL
Power Apps Navigate to URL

2.  Once your app is ready, SavePublish, and Preview the app. Whenever the user clicks on the button control, it will navigate or redirect to the specific website based on the URL address.

This is a way you can work with the Power Apps navigate URL.

PowerApps Navigate to URL

Power Apps Switch Screens

Let’s see how to work with the Power Apps switch screens. To do so, follow the below steps. Such as:

1. In Power Apps, I have added three different screens [Welcome Screen, Quiz Screen, and Success Screen]. Now, I want to switch between them based on a variable and using the navigate function.

2. For that, select the App object and set its OnStart property to the code below.

OnStart = Set(
    ScreenSelection,
    "Success Screen"                                     //You can also change screen name
)

Where,

  • ScreenSelection = Power Apps variable name
Power Apps Switch Screens

3. Now, go to the respective screen where you want to use the switch function to navigate to another screen. Click on the Select icon, and set its OnSelect property as:

OnSelect = Switch(
    ScreenSelection,
    "Welcome Screen",
    Navigate(
        'Welcome Screen',
        ScreenTransition.None
    ),
    "Success Screen",
    Navigate(
        'Success Screen',
        ScreenTransition.None
    )
)

Where,

  • “Welcome Screen” = Power Apps 1st screen name
  • ‘Success Screen’ = Power Apps 3rd screen name
PowerApps Switch Screens

4. Once it is done, go to the Preview selection. When you click the select icon, it will switch between the screens based on the value of the variable [“ScreenSelection”] and navigate to the respective screen, as shown below.

powerapps switch

Also, you may like the following:

This Power Apps article explained how to navigate in PowerApps, Power Apps screen transitions, and Power Apps button to next screen.

Also, we saw how to work with PowerApps navigate to another screen, Power Apps change screen with various examples.

  • Google

    Although internet sites we backlink to below are considerably not connected to ours, we really feel they are essentially really worth a go through, so have a look.

  • hi bijay, how to i navigate to another screen which is referring to different sharepoint list (whilst maintaining the same ref id)?

  • >