This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off
Take topic challenge

Supplemental Videos

Description

Learn how to configure actions for page, view, and URL navigation.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In Perspective, the Navigation Action allows a user to open a new Page, swap out a main View, or navigate to another URL. As such, the Navigation Action is a critical tool in building your Perspective project, since almost every project will require some form of navigation. In this lesson we'll walk through configuring each type of Navigation Action, and we'll observe how they behave. Here I have a simple View. This is where I'll be configuring my Navigation Actions. I've set up a few Views and Pages we'll be navigating to. So clicking on the gear icon here, I can see that I have two Pages configured. One is our root Page, and I've associated Main View 1 which is the View we were just on. I also have a second Page called Page 2, which I have associated with Main View 2. Here's Main View 2. I've also configured another View called Main View 3 which I have not associated with a Page. However, I have provided the ability to pass in a parameter, called myParam, which will populate this label. Let's walk though configuring our Navigation Actions for this project's structure. So I'll return to Main View 1, and here I've set up three buttons. One for each type of navigation we'll configure. So let's start by implementing our button to take us to Page 2. So I'll click on the button, right-click, and select Configure Events. I'll use an onClick event so that when someone clicks on the button it will navigate. I'll click on the plus icon here to add a Navigation Action. And here we can see the three different types of navigation that are possible. Here we're going to navigate to a different Page of our project. So I'll select my Page that I've configured called Page 2. I also have the option of opening the Page in a new tab, but I want to open it in our current tab, so I'll select OK. And now to test out our new button, I'll come up and I'll click Save. I'll come to Tools, Launch Perspective, and Launch Session. Now when I click my To Page 2 button it takes us to a new Page of our project. And you can tell it's a new Page because the Page URL has changed. There is now this Page2 string in the URL. I've already configured a Navigation Action to return us to Page 1. And now I'll just minimize the session so we can work on more buttons. Next, I want to configure a button to take us to Main View 3, which we have not associated with a Page. So I'll click on To Main View 3, right click, go to Configure Events again, and I'll configure another onClick event with a Navigation Action. So the navigation type this time will be View. And we can select the View that we would like to use. In my case it will be Main View 3. And now remember, Main View 3 is expecting a parameter that it will display. This dialogue will provide us the opportunity to add this parameter. So I'll click the plus icon here and it already knows about the parameter I'm using called myParam. Now if I wanted to, I could pass in some property from the current View, but I'm just going to configure a basic string. That's all that it takes. I'm gonna come down and click OK now. I'm going to save the project again. I'm going to pull the session back up, and I'm going to click To Main View 3 here, and I'm at my new View. As we can see, the parameter has been passed through successfully. Also note that we're not doing Page navigation here. The URL has not changed. We've simply swapped out the main View for our current Page. So I'll return to Main View 1. And now we'll work on configuring the third button to take us to an external URL. So I'm going to minimize the session again. We're going to click on our third button, right click. Configure Events, onClick, click the plus icon, click navigation, and this time we're going to use a type of URL. Now I could enter any valid URL here. For instance, I could use URL navigation to take us to a different Perspective project on the same gateway. I'm just going to take us to inductiveautomation.com. This time, I'd like to open the URL in a new tab so that our session stays open. I'll click OK. I'll hit Save again. And I'll pull our session back up, and I'll click our third button. As we can see it opens inductiveautomation.com in a new tab.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.