Introduction

Welcome to the third instalment of our Function Friday series! In this post, we’ll dive into the Navigation function. As Canvas apps grow more complex, managing the visibility of components on a single screen can become challenging. Fortunately, developers can simplify this by adding multiple screens. Let’s explore how this can make your app development smoother and more efficient!

To allow the users to move between screens, developers can use the Navigation function.

Navigate('Target Screen', 'Transition', {Optional Context})

We can pass several arguments while calling the navigation function.

1. Target screen: This denotes the screen which is to be navigated to, this is a required argument.
2. Transition: Sets the visual transition between screens. The argument is optional and by default, sets no transition on the navigation.
3. UpdateContextRecord: Allows developers to pass a context record during navigation. This operates similarly to the Update Context function we covered the other week. This argument is also optional.

Screen Transitions

There is a range of screen transitions available to developers when they navigate between screens.

• Cover
  • When navigating between screens the target screen slides into view, moving right to left.
• Cover Right
  • As with the cover transition above the target screen slides into view, though from left to right.
• Fade
  • This transition fades between the current screen and the target screen.
• Uncover
  • Uncover slides the current screen away uncovering the target screen, the current screen slides from right to left.
• Uncover Right
  • As with the Uncover, this transition slides the current screen away to reveal the target screen, the current screen slides from left to right.
• None
  • With this option, there are no transition animations and the target screen quickly replaces the current screen. This is also the default transition if none of the others are selected.

Example

Firstly in this example, we put the navigate function into the onSelect command of a button control.

Navigate(scrUserDetailsScreen, ScreenTransition.Cover, {locRecordID: 1});

This example changes the view in the canvas application from the current screen to ‘scrUserDetailsScreen’, using the screen transition of cover, it also includes the context of locRecordID, which is passed through to the scrUserDetailsScreen as a locally scoped variable, as detailed in the Update Context post.

Back

While navigate allows you to move forward from one screen to another, with screen transitions and passable context variables, there is also ‘Back’. As the name suggests this will take the user back to the last screen that had been viewed. During each of the navigation calls the application will track the screen which appears and the screen transition that is used. By default, the ‘Back’ function will use the reverse of whichever screen transition was used in the ‘Navigate’ function. For example, if Cover Right was used, then Back will use Uncover.

However Back can accept a screen transition argument to force it to use a different transition if required.

Back('Screen Transition');

Conclusion

Navigating between screens is crucial for creating dynamic Canvas apps. Mastering the Navigation function enhances user experience by allowing smooth transitions and context passing. Whether using transitions like Cover and Fade or opting for None, understanding these options helps tailor the app flow to your needs.

The Navigation function is a powerful tool in your developer toolkit. Stay tuned for more insights in our Function Friday series!