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 events and actions to handle user inputs in your Perspective project.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:07] Say you're building a Perspective project, and you want to navigate between pages or views at the press of a button. Or maybe you want to press a key to show a pop-up view. In Perspective, clicking a button or pressing a key are examples of what we call events. We can choose how we want to respond to these events, and the ways in which we respond are called actions. Let's discuss how to configure events and actions so our project can effectively handle different user inputs.

[00:36] So let's say we do one of the things I mentioned, we're going to configure simple navigation on a button. For that we'll need a button, we'll come over here to our Component Panel, click on button, and drag it in. I'm going to make it a little bit bigger just so we can see it better, then I'm going to center it right there. So, in order to configure an event on our button, we're going to click on it, right click, then come down and click Configure Events. This will bring up the Event Configuration dialog for our button. This is a list of all of the events we can use on our button. As you can see, there are many events, you can check out our user manual for more details on every Perspective event.

[01:16] I'm just going to highlight a couple common ones here. An onClick event will run whenever we press a button on our mouse. Scrolling down, we have keyboard events, which will run whenever we press a key on our keyboard. I'm just going to configure a simple onClick event, which will run whenever our button is pressed. So, when I select an event, I now have the option to configure one or more actions for this event. In order to add an action, I'm going to come over here and click the plus icon. As you can see, there are many actions to choose from as well. I could log in or log out of the session, I could navigate to a new page or view of the session, I could configure a pop-up view, I could refresh the browser, or if nothing does quite what we need, I could run a script.

[02:02] I'm just going to configure a simple navigation action for our button. Now, I'm going to add another action as well, just for a moment. I'm going to add a log out action. These actions will be run in the order that they're listed here from top to bottom. To change their order I can use the up arrow to move log out up, and the down arrow to move log out down. I don't actually want Logout for now, so I'm going to just delete it using the trash can icon.

[02:36] So, selecting our Navigation action, we can see that we have different types of navigation we can do. Page navigation will take us to a new page of our project, View navigation will swap out the main view on the current page, and "url" will take us to an external url. I already have a page configured, so I'm just going to use page navigation to get us there. Page 2. So I could disable this action if I don't need it right now. I could also choose to open our new page in a new tab. I'm alright opening it in our current tab. So, that's all it takes to configure our event and our action. Now I'm just going to click OK.

[03:19] And, I want to see this in action, so I'm going to go to save, and then I'm going to run our session. So, we go to Tools, Launch Perspective, and Launch Session. From here you can see the page and the view we were working on. So, when I click my button it opens a new page of our project.

You are editing this transcript.

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

close

Share this video