Before we get into fancier strategies, it's worth noting that we can use Button components (or any other components or containers you want users to click) to easily navigate from one page to another.
You can use buttons on each main view, or create a docked view with buttons for each your main pages. This is one of the simplest ways to do navigation and will help you get a project started very quickly.
Let's walk through a quick example of how to make a button navigate when clicked:
A Tab Strip or Menu is an effective upgrade to the basic button navigation strategy, particularly when you want an indicator that shows which page is selected.
There's a caveat to this approach, however; the tab container offered in Perspective cycles between views, not pages. This means that, if you'd like to organize your project into pages (and you probably should), the tab layout doesn't quite do what we need in terms of tabbed top-level navigation. There are of course other options, from using a row of buttons to using a Flex Repeater with a "tab" view. A clean tab strip customization using the latter approach is offered in Common Perspective Tasks
The Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component.
If you're looking for a pre-configured navigation option that is sleek and customizeable, the Menu Tree component allows you to create a menu that has expandable sections with buttons that users can click through. The Menu Tree works best inside a docked view (see Configuring a Docked View above), or, if you're feeling fancy, within a Navigation Drawer.
Only one property on a menu tree, the items property, controls the structure of the tree, all others control its look and feel. The items property can become fairly complex, but fundamentally each element in items has five sub-properties:
In a simple menu, you have a list of pages you'd like to navigate to, and you want them displayed in a column. The Menu Tree component can accommodate this without much fuss.
Insert Bottom Navigation Bar section here - I have to shelve this one, because it isn't possible right now to make a docked view show up only on small sessions. FB 12876
"Drill down" (also known as forward) navigation strategies follow their namesake: they allow you to "drill" into a project page or view from an overview page. They also allow you to proceed to the next option in a chain. Most of the time, these strategies will feel quite natural: for example, an operator clicks on a line or machine on an overview screen, or they have finished scanning a barcode and want to record the data using a "Save" button. You could use a button press to complete tasks like this, but any component or container can be configured to handle mouse (and touch) events. In fact, you may wish to create a custom view and/or style for this purpose, since the way that you navigate will be closely tied in with the needs of your project.
Very similar to adding navigation to a Button component, simple navigation can be added upon clicking (or touching) any component:
Once we have table extension functions we can give them a brief mention them here. IE: clicking on a row in the table to open a screen with details about that record.
In this section we'll talk about a couple navigation strategies that explicitly can't take you to a new page of your project. They are good for navigating between views on the same page.
Perspective offers strategies for dragging (or swiping) left and right as a way of navigating between views. The Carousel component is specifically for this strategy, which is perfect when working with several instances of the same view (including a dynamic number of them). Maybe your managers make a daily To Do list, and you'd like to scroll between them for different dates. Or you're looking for a way of collapsing a lot of content onto a small screen, and need a way of scrolling through it. Configuring side scrolling through a carousel is pretty straightforward:
Tabs are an effective primary navigation strategy, particularly when you don't have many items to choose from. There's a caveat to this approach, however; the tab layout cycles between views, not pages. This means that, if you'd like to organize your project into pages (and you probably should), the tab layout doesn't quite do what we need in terms of tabbed top-level navigation.
Tab Containers can be effective tools in designing complex single pages. In Perspective, they're easy to configure - you can use the Tab Container for simple drag-and-drop configuration; you don't even need to set up a docked view to control it. In these settings, the tab layout is perfect because it swaps between any views, containers, or components you provide. It's also easy to set up:
If you feel like being extra fancy, you can nest a view of your choosing in the tab header (not to be confused with displaying a view in the tab itself). Choose Object as the type, then add a Value element to the new object. The element's key should be viewPath, and the value should be a path to a view to render in place of the typical tab header. You can include an additional viewParams object if parameters are needed.
A Back button or reverse navigation generally refers to how a user might retrace their steps in an application, or move to a higher level page in the session. In Perspective, you will probably include "back" and "cancel" buttons and links in contexts where they seem appropriate (like navigating out of a view designed for a specific task). Since your project is being run in a browser, users will likely have access to the browser's back button, or a hardware back button on a phone. These buttons will typically navigate to the most recently visited page of your application. With this in mind, there are some good rules of thumb for developing browser-ready applications:
The Link component provides an easy navigation option when you want to invite users to view another network or internet resource from your project. The target property on the component dictates whether the page will open in the current tab or a new one.