Power Apps - Screen Navigation not working from Component

 If you want to navigate from one screen to another in Power Apps, it is very easy, but if you want to create a master component and use it to navigate to any other screen then it is not straight forward. Let’s understand the issue using an example.

Navigate screen requirement in Power apps

• Create a Hyperlink.
• This link should be available in the header section in all the screens of Canvas App
• When we click on this link, it should navigate to the Home screen of the app

Implement Navigation in Canvas App

• Create two screens: (1) Home Screen (2) Second Screen

• Create a Component with a hyperlink.
  Note:

  The basic idea about the component is that it gives you consistent look and functionality and if you change the component at once place it will reflect in all the places it is used.


• On Hyperlink put an expression: Navigate(HomeScreen,Transition.None);
• Now, add this component on both screens.
• You will notice that it will give you an error in the component expression section.

The issue with Navigation in component

• When you implement Navigate within screens, the function is able to catch the screen names in the expression.
• But the component is altogether a different piece and when you try to get a screen name in Navigate expression in component, it is not able to find that object, resulting in an error.

Solution

• Go to your Hyperlink component
• Create a custom property in the component as shown in the screenshot.

• Make sure to add
  1. Name – This is going to be used in the expression
  2. Data type - Screen.
• Now, click on the hyperlink from the component and set its OnSelect expression: Navigate(ComponentName.CustomPropertyName).
• Example: Navigate(HeaderLink.HomeLink)
• In Example, HeaderLink is the component name and Homelink is the custom property.
• Now, go to your screen where you have added the link component.
• Click on the link component on the screen.
• From the expression bar, on the left side, select component name, and on the right side enter the screen name where you want to navigate.

• Example: You can see the expression bar after selecting the Hyperlink.on the left side: HomeLink is the custom Property on Right Side HomeScreen is the screen where we want to navigate.