Building App Navigation: Navigate, Back, and Deep Linking

Hello and welcome to the first lesson in our module on Building Canvas Apps with Power Fx.

In the previous module, we delved deep into the server side, focusing on advanced plugin development with C#. Now, we pivot to the client side and the world of low-code application development with Canvas Apps. This transition is key to becoming a well-rounded Power Platform developer.

This lesson addresses the learning outcome: Design Canvas Apps with structured navigation patterns using Navigate, Back, and deep linking.

We will cover three core aspects of user navigation:

Basic screen-to-screen movement using the fundamental Navigate and Back functions.
Creating a scalable, maintainable structure with a reusable navigation component.
Implementing deep linking to allow users to enter your app at a specific point from an external link, which is crucial for integration with emails, notifications, and other systems.

For someone with your background in building complex solutions, you'll recognize the importance of designing a clean, logical user flow from the outset. Let's begin.

1. The Fundamentals: `Navigate` and `Back`

The simplest way to move between screens in a Canvas App is with the Navigate function. You'll typically place this in the OnSelect property of a control, like a button or an icon.

The basic syntax is:
Navigate(TargetScreen, ScreenTransition)

TargetScreen: The screen you want to go to.
ScreenTransition: An optional argument that defines the visual effect for the transition (e.g., ScreenTransition.Cover, ScreenTransition.Fade, ScreenTransition.None).

For example, a button to go to a "Details" screen would have its OnSelect property set to:

Navigate(DetailsScreen, ScreenTransition.Cover)

The Back function complements Navigate. It takes the user to the previously viewed screen. Its syntax is simple, and it can also include an optional transition effect:
Back(ScreenTransition.UnCover)

While these functions are essential, relying on individual buttons scattered across your app for all navigation—often called "spaghetti navigation"—quickly becomes unmanageable as the app grows. A more robust and professional approach is to centralize your navigation logic.

2. Structured Navigation with Reusable Components

Just as you would create reusable classes or libraries in C# to avoid duplicating code, in Canvas Apps we use components to build reusable UI elements. A navigation menu is a perfect use case for a component.

The strategy is to define your app's navigation structure as a data source (a table of objects) and then build a single component that renders this menu on every screen. This follows the "Don't Repeat Yourself" (DRY) principle.

The following video provides an excellent walkthrough of building a modern, data-driven, expandable navigation menu.

How to Build a Modern Expandable Navigation Menu in Power Apps

This video from Reza Dorrani demonstrates how to create a sophisticated navigation component from scratch. It's a very practical, pattern-based approach that aligns with professional development standards.

Watch the following sections to understand the key steps: Defining the Navigation Structure (01:38 - 05:13): Pay close attention to how a table of objects is defined in App.Formulas to represent the menu, including screens, icons, and even nested sub-menus. This is the data that drives the component. Building the Component (05:13 - 09:53): Observe how a gallery is used within the component to render the menu items. Note the Access app scope setting, which is critical for the component to read the navigation structure from the app. Implementing Navigation Logic (12:54 - 14:01): See how the Navigate(ThisItem.Screen) formula is used in the gallery's OnSelect property to handle the actual screen transition. Adding the Component to a Screen (14:16 - 16:16): Understand how to place the finished component onto your app screens for a consistent user experience. Handling Sub-Menus (21:04 - 24:33): This section shows how to add expand/collapse functionality for nested navigation, a common requirement in larger apps.

By using this component-based approach, if you need to add, remove, or change a screen in your app, you only need to update the navigation structure in one place (App.Formulas), and the change is automatically reflected everywhere.

For another perspective on this technique, you can review the article "Power Apps Navigation Menu Component" from matthewdevaney.com, which builds a similar component using custom properties to pass in the menu data and color schemes.

3. Deep Linking: Direct Access to App Content

What if you want to send a user an email with a link that opens your app directly to a specific record for approval? This is called deep linking. It involves passing parameters in the app's URL to control which screen opens and what data is displayed.

Core Concepts

Implementing deep linking relies on two key Power Fx elements:

App.StartScreen Property: This is a declarative property on the App object that determines which screen is shown when the app first launches. This is the modern, performant replacement for using Navigate() in App.OnStart.
Param() Function: This function reads the value of a query string parameter from the app's launch URL. For a URL like ...&myParam=123, Param("myParam") would return "123". Note that parameter names are case-sensitive.

The article below provides a clear, step-by-step guide to the fundamental concepts and implementation patterns.

Deep Linking in Power Apps Canvas Apps

This guide by Chris Worth clearly explains the 'what, why, and how' of deep linking. It's a great reference for the core concepts and best practices.

Read these sections to build a solid conceptual understanding: Key Concepts in Deep Linking: Understand the roles of the App URL, query parameters, and the Param() function. Implementing Deep Linking in Power Apps: Focus on the three-step process: using App.StartScreen, retrieving parameters, and building logic. Creating Deep Links: Learn how to construct the URL with query parameters. Real-World Implementation Example: See a practical example of an approval process using deep linking. Security Considerations: Review the crucial security points to keep in mind, which is always important for production apps.

Practical Implementation

Now let's see these concepts applied in a detailed, end-to-end scenario. This next video builds on the theory by showing how to handle multiple parameters, add security checks, and integrate with Power Automate to generate deep links dynamically.

Power Apps Deep Linking to Screen | App StartScreen & OnStart

This video, also from Reza Dorrani, is a masterclass in practical deep linking. It will walk you through a complete solution.

Watch the following segments to see how to implement and use deep linking effectively: App.StartScreen vs. OnStart (00:00 - 04:35): Understand why App.StartScreen is the recommended approach for setting the initial screen. Dynamic Start Screen (04:35 - 08:32): See how to use Param() with a Switch function in App.StartScreen to navigate to different screens based on a URL parameter. Passing Multiple Parameters (08:32 - 12:57): This is a key section. Learn how to pass both a screen name and a record ID to open a form in edit mode for a specific item. Adding Security (12:57 - 15:03): See a simple but effective pattern for preventing unauthorized access to screens via deep links. Generating Links with Power Automate (15:03 - 18:28): A highly practical example showing how to construct and email deep links from a flow. Mobile Deep Linking (18:28 - 21:30): Learn about the essential restartapp=true parameter to ensure deep links work reliably on mobile devices.

By mastering deep linking, you elevate your Canvas Apps from standalone tools to integrated components within a broader business process.

Test your understanding!

You are building a simple project management app with three screens: HomeScreen, ProjectsListScreen, and ProjectDetailsScreen.

You've created a navigation component. What Power Fx formula would you use in the component's gallery OnSelect property to make it navigate to the correct screen defined in your navigation data source?
A manager needs to be able to click a link in a Teams message and be taken directly to the ProjectDetailsScreen for a specific project. The URL will look like this: ...&screen=details&projectID=GUID_HERE.

a. What formula would you write in the App.StartScreen property to handle this?
b. Where and how would you use the projectID parameter to load the correct project's data into a form on the ProjectDetailsScreen?

Show answer

Assuming your navigation data source (e.g., a table in App.Formulas) has a column named Screen that holds the screen object, the formula in the gallery's OnSelect property would be:
```
Navigate(ThisItem.Screen)
```
a. The App.StartScreen formula would use a Switch or If function to check the screen parameter. If no valid parameter is found, it should default to a home screen.
```
Switch(
    Param("screen"),
    "details", ProjectDetailsScreen,
    "list", ProjectsListScreen,
    HomeScreen // Default case
)
```
b. You would retrieve the projectID parameter and use it to fetch the corresponding record from Dataverse. A good place for this logic is the OnVisible property of the ProjectDetailsScreen. You would use the LookUp function to find the record and store it in a variable, which is then bound to the form.
```
// In ProjectDetailsScreen.OnVisible property
If(
    !IsBlank(Param("projectID")),
    Set(
        gblCurrentProject,
        LookUp(Projects, 'Project ID' = GUID(Param("projectID")))
    )
)

// The Item property of the form would then be set to gblCurrentProject
```

Conclusion

In this lesson, we established the foundational patterns for creating a user-friendly and maintainable navigation experience in Canvas Apps.

Key Takeaways:

Navigate and Back are the basic building blocks for moving between screens.
Navigation Components driven by a centralized data source are the professional standard for creating scalable and easy-to-manage apps.
Deep Linking using App.StartScreen and Param() is a powerful technique for integrating your app into wider business processes, allowing direct access to specific content.

Up Next:
A well-structured app is only as good as the data it can work with. In our next lesson, we will focus on connecting a Canvas App to Dataverse and external tabular data sources like SharePoint and SQL Server, bringing your app's structure to life.

Recommended resources