![Power-BI-Content-Article.png](https://quantinsightsnetwork.com/wp-content/uploads/2024/04/Power-BI-Content-Article-678x381.png)
In this tutorial, we’ll discuss the context of PowerApps navigation. We’ll be using the Back and Navigate functions to change which screen is displayed in our applications.
Most apps contain multiple screens. Providing user-friendly PowerApps navigation allows the users to efficiently navigate through those application screens.
On the reference page, let’s click Navigate and see what it does.
![1-12 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/1-12-1024x576.jpg)
![1-12 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/1-12-1024x576.jpg)
The Navigate function changes the screen that’s displayed. We’ll be having an example to further understand how this function works.
![2-10 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/2-10-1024x576.jpg)
![2-10 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/2-10-1024x576.jpg)
PowerApps Navigation Using The Navigate Function
First, let’s click on the first data card (Beau Spratling).
![3-11 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/3-11.jpg)
![3-11 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/3-11.jpg)
Go to the OnSelect trigger, and we’ll see that the Navigate function is used to take the user to the specified screen (DetailScreen1). This means that upon clicking on this card, it will navigate us to the DetailScreen1.
![4-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/4-10-1024x576.jpg)
![4-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/4-10-1024x576.jpg)
On the other hand, the second argument is for the transition type that we want to set. It’s currently set to None.
![5-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/5-9-1024x576.jpg)
![5-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/5-9-1024x576.jpg)
On the reference page, we can see the different transitions that we can choose from and a demonstration for each one of them.
![6-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/6-10-1024x576.jpg)
![6-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/6-10-1024x576.jpg)
We can easily change the Navigate Transition by clicking on the data card again. Then, click on the second argument.
![5-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/5-10-edited.jpg)
![5-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/5-10-edited.jpg)
After that, the ScreenTransition.None will appear.
![7-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/7-10-1024x576.jpg)
![7-10 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/7-10-1024x576.jpg)
Remove the word None at the end and the different transition options will appear below. For this example, let’s use the Fade transition. Try to play your application and you’ll see how the Fade transition works.
![8-8 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/8-8-1024x576.jpg)
![8-8 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/8-8-1024x576.jpg)
Let’s now click on the arrow inside our data card.
![9-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/9-9-1024x576.jpg)
![9-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/9-9-1024x576.jpg)
We can see that its trigger is also OnSelect and it’s selecting the Parent element.
![10-8 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/10-8-1024x576.jpg)
![10-8 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/10-8-1024x576.jpg)
The Parent element of that arrow is referring to the data card itself. It’s using the Navigate function that redirects the users to the DetailScreen1. Once clicked, it’ll do the same thing as when we’re clicking on the data card.
![11-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/11-9-1024x576.jpg)
![11-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/11-9-1024x576.jpg)
Adding An Edit Functionality For PowerApps Navigation
Now, let’s try adding an edit symbol that will redirect us to the edit page right from our data card. Click on the Separator5 element under the BrowseGallery1.
![12-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/12-9-1024x576.jpg)
![12-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/12-9-1024x576.jpg)
Then click the Icons and select the Edit icon.
![13-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/13-9-1024x576.jpg)
![13-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/13-9-1024x576.jpg)
Since we’ve added it inside the BrowseGallery1, it replicates itself for each data card inside the gallery.
![14-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/14-9-1024x576.jpg)
![14-9 | Master Data Skills + AI PowerApps navigation](https://blog.enterprisedna.co/wp-content/uploads/2021/11/14-9-1024x576.jpg)
Let’s then move the icon beside the arrow icon and resize it until it’s a bit smaller.
![15-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/15-8-1024x576.jpg)
![15-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/15-8-1024x576.jpg)
By default, this edit icon also used the OnSelect trigger and the Select function from its parent element. So, by clicking this, it’ll also redirect us to the detail screen.
![16-10 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/16-10-1024x576.jpg)
![16-10 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/16-10-1024x576.jpg)
Let’s change that by changing the function to Navigate. Change the Select(Parent) to Navigate(EditScreen1) instead.
![17-9 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/17-9-1024x576.jpg)
![17-9 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/17-9-1024x576.jpg)
We’ll set the second argument to ScreenTransition.UnCover. Make sure to separate the two arguments by a comma (,).
![18-9 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/18-9-1024x576.jpg)
![18-9 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/18-9-1024x576.jpg)
Let’s now play our application.
![19-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/19-8-1024x576.jpg)
![19-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/19-8-1024x576.jpg)
After that, click the Edit button.
![20-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/20-8-1024x576.jpg)
![20-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/20-8-1024x576.jpg)
Then, we’ll be redirected to the edit screen.
![21-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/21-8.jpg)
![21-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/21-8.jpg)
Understanding The Back Function In PowerApps Navigation
On our EditScreen1, let’s click the X button beside the title.
![22-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/22-8-1024x576.jpg)
![22-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/22-8-1024x576.jpg)
In this example, we used the ResetForm() function together with the Back() function.
![23-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/23-8-1024x576.jpg)
![23-8 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/23-8-1024x576.jpg)
When we navigate somewhere, Microsoft PowerApps remembers the last screen that we opened. We can navigate to that last screen by using the Back() function.
For example, by using this function on the X button, we can easily go back to the main screen if we access the edit screen from the main screen. If we access the edit screen from the detailed screen, the X button will bring us back to the detail screen.
We can also read a more detailed explanation of the Back() function on the formula reference page.
![24-6 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/24-6-1024x576.jpg)
![24-6 | Master Data Skills + AI](https://blog.enterprisedna.co/wp-content/uploads/2021/11/24-6-1024x576.jpg)
***** Related Links *****
PowerApps Introduction: Definition, Features, Functions, And Importance
Power Apps Basics: Development Environment And Running Your App
Power Apps: Getting Started With This Revolutionary Tool
Conclusion
To sum up, we’re able to learn the importance and context of PowerApps navigation. We’re also able to understand how the Back and Navigate functions work in our application. We can specify a visual transition in the formula to control how one screen changes to another.
Just keep in mind that it’s always important to provide users with an efficient way of navigating your application screens.
All the best,
Henry
Be the first to comment