Navigation between Multiple PowerApps

[AhmedSalih]

Use Case:

I was building a very complex PowerApps (Canvas) screen that included too many controls and that has affected my screen and app performance. One of the recommendations that PowerApps provided is to break the App into multiple apps and I did exactly that. Then I had to build the mechanism to navigate back and forth between my main app and the new app and that is why I am writing this blog. 

So our Use case is that we have two PowerApps applications and we need to navigate from one app to another and go back and forth between the two. 

I will name my first application APP A and my second application APP B.

Requirements:

1. Navigate from APP A to either Screen One or Screen Two in APP B using buttons in APP A.
2. Replace the browser tab of the opened APP A upon navigation with APP B.
3. Allow navigation back from APP B to APP A using the browser back button.
4. Allow navigation back from APP B to APP A using an Icon in APP B Screen One and Screen Two.

    Design:

   APP A

   • One Screen has two buttons to click to navigate to APP B.
   • One button will navigate us to APP B, Screen One, and the other to APP B Screen Two.

     

     APP B

     • Two Screens, Screen One and Screen Two.
     • Screen one is the start screen in APP B
     • Both screens have an Icon (Home) to click and navigate back to APP A

       

       Code for APP A

       In the OnSelect property of Navigate to APP B Screen One button: 

       Launch("YOUR-APP-B-URL&Landing=ScreenOne",Blank(),LaunchTarget.Replace)

       NOTE: I added the & character to the end of the URL along with my Param "Landing" and its value "ScreenOne", in the next section, we will see how we initiate the Param and its values and how we will get APP B to navigate to which screen based on the Param value. 

       In the OnSelect property of Navigate to APP B Screen One button: 

       Launch("YOUR-APP-B-URL&Landing=ScreenTwo",Blank(),LaunchTarget.Replace)

       NOTE: I added the & character to the end of the URL along with my Param "Landing" and its value "ScreenTwo", in the next section, we will see how we initiate the Param and its values and how we will get APP B to navigate to which screen based on the Param value. 

       Code for APP B

       In the APP B App StartScreen property, I added the following formula:  

       Switch

       (
       Param("Landing"), //Initialize the name of the Param
       "ScreenOne", //The Value we are passing from APP A along with URL
       ScreenOneAppB, //This is Screen One Name
       "ScreenTwo", //The Value we are passing from APP A along with URL
       ScreenTwoAppB //This is Screen Two Name
       )

       

       Also, in APP B, both screen Home Icon OnSelect Property, add the following code:

       Launch("YOUR-APP-A-URL",Blank(),LaunchTarget.Replace) 

       NOTE: here we won't add Param value as we want to navigate to the Start Screen in APP A.

       CLICK HERE TO WATCH THE FULL TUTORIAL