PowerApps Navigate to another screen

In this PowerApps Tutorial, We will discuss PowerApps navigate to another screen, how to navigate between screens in PowerApps. How a user can change from one screen to another screen by using the PowerApps Navigate function.

Also, By taking some simple scenarios, we will cover the below things:

• What is the Navigate function in PowerApps or PowerApps Navigate function
• What are the PowerApps Navigate Transitions
• PowerApps Back function
• PowerApps Pass Value to another screen and PowerApps Pass Object to a Different Screen
• How to work with PowerApps navigate to url
• How to work with PowerApps Navigate between Screens
• PowerApps navigate to another screen
• PowerApps screen navigation
• PowerApps navigate to next screen

PowerApps navigate to another screen (Navigate function in PowerApps)

Now, we will see PowerApps screen navigation using the PowerApps navigate function.

• PowerApps Navigate function is a type of function that helps to change which screen you want to display.
• Suppose there are two screens i.e. Screen1 and Screen2. You want to change the screen from screen1 to screen2 when a user will select a button. In this case, you need to specify the formula (on Button’s OnSelect property) that includes a Navigate function.
• To see the screen changes, you can specify the visual transition such as Fade, Cover, UnCover, etc.
• You can use the Navigate function to set one or more context variables for the screen and that is the only way to set a context variable from outside the screen.
• PowerApps Navigate function always returns true but it returns false in case if an error has occurred.

Syntax:

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

Where,

1. Screen = Specify the screen that you want to display
2. Transition = This is optional. If you want, then you can set a visual transition to use between the current screen and the next screen. Here the default value is None.
3. 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.

You may like, PowerApps Count Function.

PowerApps Navigate Transition

• There are some PowerApps Navigate transition arguments where in the first argument, you can specify the name of the screen to display. Similarly, in the second argument, you can specify how the old screen changes to the new screen.
• The below table represents some Navigate transition arguments and it’s descriptions:

Transition Argument	Description
ScreenTransition.Cover	The new screen slides into view, moving right to left, to cover the current screen.
ScreenTransition.CoverRight	The new screen slides into view, moving left to right, to cover the current screen.
ScreenTransition.Fade	The current screen fades away to reveal the new screen.
ScreenTransition.None (Default)	The new screen quickly replaces the current screen.
ScreenTransition.UnCover	The current screen slides out of view, moving right to left, to uncover the new screen.
ScreenTransition.UnCoverRight	The 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 to use between the current screen and the previous screen.

PowerApps pass value to another screen

Here we will learn how we can pass Powerapps values or arguments from one screen to other screen.

We can use the Powerapps context argument of the Navigation function to pass the information or arguments to a different screen. You can pass a single value or multi-value object to a different screen.

Syntax:

Navigate(ScreenToNavigate, ScreenTransition.Fade, { Argument1: 01 , Argument2: Text })

There are two ways to pass the values or arguments to different Powerapps screens. Such as:

1. PowerApps Pass Value to a Different Screen
2. PowerApps Pass Object to a Different Screen

Let’s start with some examples so that you can better understand.

1. PowerApps Pass Value to a Different Screen:

• The below screenshot represents a Powerapps Gallery control that contains records from a SharePoint list named Travel Details.
• When the user will click on the next arrow icon of any particular item, then a new screen will appear and it will display all the metadata of that specific selected item.
• Here in this scenario what I want to do is, I want to pass a single integer value i.e. ID of a selected item and then will use this ID to run a filter query on the data source to fetch all the meta data of this item.

Follow this below things to do this above things as:

• On the Powerapps Gallery control, Click on the next arrow icon (>) and apply this below formula on its OnSelect property as:

OnSelect = Navigate(TravelsDetailsScreen, ScreenTransition.Fade,{selectedId: TravelDetailsGallery.Selected.ID})

Where,

1. TravelDetailsScreen = This is the target screen where you want to view all the metadata of a selected item
2. ScreenTransition = This is the transition argument
3. selectedId = Context argument
4. TravelDetailsGallery = Powerapps Gallery control name

• Next, go to the target screen (TravelDetailScreen) and there filter the original data source based on the ID passed to it, and then select the first item of the result.
• In the Target screen, I have taken a Display form that will display all the metadata of a selected item. Select the Form and apply this below formula on its Item property as:

Item = First(Filter('Travel Details', ID = selectedId))

Where,

1. ‘Travel Details’ = SharePoint list data source
2. selectedId = This is the context argument that created in the gallery control

• Now just Save, Publish (F5) the app, and you can see the latest screen will always display the details of the selected item only as shown below.

2. PowerApps Pass Object to a Different Screen:

Suppose you want to pass an entire object of values to a new different screen, then you need to do these below things:

• On the Powerapps Gallery control, Click on the next arrow icon (>) and apply this below formula on its OnSelect property as:

OnSelect = Navigate(TravelDetailsScreen, ScreenTransition.Fade,{selectedItem: TravelDetailsGallery.Selected})

• Next, go to the target screen i.e. a Display form (TravelDetailsScreen) and set its Item property as:

Item = selectedItem

Where,

1. selectedItem = Context argument that has created in the gallery control

• That’s it for passing the object to a different screen. Now just Save, Publish (F5) the app, and you can see the latest screen will always display the details of the selected item only as shown below.

PowerApps navigate to url

Here we will learn how to navigate a Hyperlink or URL in PowerApps screen. Below represents different scenarios that how you can work easily with a URL in PowerApps.

Example-1: (Working with Hyperlinks in PowerApps)

• I have an Excel spreadsheet that contains two columns named “Company Name” and “Address“. Here, the Address column is a Hyperlink data type, and also this excel has some records as shown below.

• On the PowerApps screen, I have a Vertical Gallery control and added this excel data source to this gallery control. As I have specified the gallery layout as Title and subtitle, that’s why the gallery is appearing with the below screenshot.
• Next what I want to do is, When I will click on the address from the gallery control, then that specific address or URL will open in a new page or new tab.

• To do so, Select the Text control (Title) from the gallery and set its Text property as:

Text = ThisItem.'CompanyName'

Where,

1. Company Name = This is the column name from the excel spreadsheet. It will display all the company names in the Powerapps Gallery control.

• Similarly, Select the address control input (Subtitle) and apply this below formula on its OnSelect property as:

OnSelect = Launch(ThisItem.Address)

Where,

1. Launch = It helps to Launch a webpage via a URL address
2. Address = This is the hyperlink column from the Excel spreadsheet

• Now Save and Preview (F5) the app. Click on any Address Url (from the gallery control), then the selected address link will open in a new tab as shown below:

Example-2: (PowerApps Navigate to Image URL)

Similarly in this scenario, we will see how to navigate an Image URL in PowerApps screen.

• I have a PowerApps Image control having with an Image property as shown below. Here what I want to do is, when a user will click on the image control, then it will go to the specified website.

• For this, Select the image control and apply this below formula on its OnSelect property as:

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

• You need to specify the website URL address within the Launch function including ” “. When you will preview the app and click on the specific image, then the specified Website URL will open on the next page.

PowerApps Navigate between Screens

This is a simple scenario that how a user can navigate between one screen to another screen in PowerApps.

Example:

In this example, I want to create one news app where a user can read the news of some specific cities by using the button click. That means, there will be a number of city buttons (like Mumbai, Delhi, Chennai, Bangalore, etc.). When the user will click on any city button, then it will directly navigate to that particular news screen and he/she can able to read the news.

To make this app, you can follow these below steps as:

Step-1:

• Sign in to the PowerApps app with your credentials.
• Create a blank new Canvas app and choose any one Layout either Tablet or Phone. For this example, I have chosen the Phone layout. The total news app will appear with the Phone layout as it is a Phone layout.
• Once you will select the layout, then a new blank screen will appear where you can add your desired controls.
• On the PowerApps app, Insert five new blank screens (Home -> New screen -> Blank). Rename those five screens as NewsHomePage, MumbaiNews, DelhiNews, ChennaiNews, and BangaloreNews as shown below.

Step-2:

• Go to the first screen (NewsHomePage) and five Button controls (Insert -> Button).
• Select the button controls individually and set its Text property to Mumbai, Delhi, Chennai, and Bangalore.

• Above all the buttons or top of the screen, Insert one Rectangle icon (Insert -> Icons -> Rectangle) and set its Text property to “TOI”.
• On the right side of the rectangle icon, Insert one Next icon as like the below screenshot:

Step-3:

• Now it’s time to apply the Navigation formula to all button controls (Mumbai, Delhi, Chennai, and Bangalore).
• Select the Mumbai Button and apply this below formula on its OnSelect property as:

OnSelect = Navigate(MumbaiNews, ScreenTransition.None)

Where,

MumbaiNews = This is the second screen where you will see the Mumbai news only. So when a user will click on the Mumbai button, then it will navigate to the Mumbai news screen directly.

• Similarly, apply the same formula to the rest button controls OnSelect property as (Delhi, Chennai, Bangalore). The only difference is, Instead of MumbaiNews, you need to specify the selected State screen like DelhiNews for Delhi Button, ChennaiNews for Chennai Button, etc.
• So that when a user will click on any button, then it will directly navigate to that specific news screen.

Step-4:

• Select the Next icon arrow (from top) and set its OnSelect property as:

OnSelect = Navigate(MumbaiNews, ScreenTransition.None)

• This means, when a user will click on this next arrow icon, then it will go to the first screen i.e. Mumbai news screen.

Step-5:

Next, we will start work on each screen. Let’s start with the first city i.e MumbaiNews screen. Add these below input controls in this screen as:

• Add one Rectangle icon (for the header purpose).
• Insert one Label control inside the rectangle icon and set its Text property to Mumbai News.
• On the rectangle icon, Add one Left icon on the left side and one Right icon on the right side.
• Add Labels (as per your choice and depends upon the number of news) and set its Text property to specific news headlines as shown below.
• Insert Image controls (as per your choice and depends upon the number of news) and set its Image property to that specific news image links. You can directly give the Image link by using Image property and also you can upload from your local system. For more Image Control details, refer to this link: PowerApps Image Control

See the below screenshot for your reference:

Step-6:

• Next, Select the Left icon and apply this below formula on its OnSelect property as:

OnSelect = Back()

When the user will click on the left icon, then it will navigate to the previous screen i.e. NewsHomePage screen.

• Similarly, Select the Right icon and apply this below formula on its OnSelect property as:

OnSelect = Navigate(DelhiNews, ScreenTransition.None)

Where,

DelhiNews = This is the second city screen where a user will click on the next arrow icon (from the Mumbai news screen), then it will navigate to the Delhi news screen. Not only you can provide the DelhiNews, but also you can give any screen name that you want to display in the next screen.

When the user will click on the right icon, then it will navigate to it’s next screen i.e. DelhiNews screen.

Step-7:

• Like the Mumbai News screen, Similarly, we will do the same repeated things. In the same way, We will add all these input controls and formulas on the rest of each individual news screen (DelhiNews, ChennaiNews, and BangaloreNews).
• Save and Publish this news app. Now Play the app. On the first screen i.e. News Home Page, Hit on any news button (Mumbai, Delhi, Chennai, Bangalore). When you will click on any button, then it will navigate to that specific news screen and display the news details of that specific city.
• Below represents the screenshot of each city news that how it looks when you click on the specific city button:
  • This is the first screen where all city buttons are available and that looks like as below:

• Now this below figure represents the whole structure of the app that how it exactly works:

• In the above screen, When the user click on Mumbai button, then the Mumbai news will appear. If the user wants to go back, then he/she can click on the backward or previous icon. If the user wants to go forward or to the next screen, then he/she can click on the forward or right icon.
• Similarly, When the user click on any specific city, then the specific city news will appear with the icons (forward and Backward).
• In the last screen i.e. Bangalore News, you can see there is no more forward or right icon to navigate the next screen, because this screen is the last screen.

Also, you may like these below PowerApps Tutorials:

• Build PowerApps Quiz App – Step by Step
• PowerApps Sum function (Get sum of a column PowerApps)
• PowerApps upload file to SharePoint document library
• PowerApps Get Current User (ID, EMail, Department, Location, Photo, etc)
• PowerApps send email on submit
• PowerApps Email Attachment Control – How to Use
• PowerApps Microphone Control – How to use
• How to Create Login Screen in PowerApps
• PowerApps Popup message Box with Examples
• Get users from SharePoint Group in PowerApps
• PowerApps: Submit data to two SharePoint Lists
• PowerApps Patch Function with examples
• How to Create CSV in SharePoint using PowerApps and Power Automate

In this PowerApps Tutorial, We discussed how to navigate between the screens in PowerApps. Also, By taking some simple scenarios, We covered the below things:

• What is the Navigate function in PowerApps or PowerApps Navigate function
• What are the PowerApps Navigate Transitions
• PowerApps Back function
• How to Pass Value to another screen in Powerapps and how to Pass Object to a Different Screen in PowerApps
• How to work with PowerApps navigate to url
• How to work with PowerApps Navigate between Screens
• PowerApps navigate to another screen
• PowerApps button onselect change screen
• PowerApps navigate between screens etc