Version: 8.0

LESSON

Creating Pages

Description

In this lesson, learn how to create a Perspective Page.

Video recorded using: Ignition 8.0

Transcript (open in tab)

[ [00:00] ] In this lesson, we'll talk about Perspective Pages. A Page is a parent object to any number of children Views. So when you're in the designer and you're at the root of the Perspective module there's this Page configuration area here. So when you create a Page it doesn't sit in the Project Browser, rather it sits in this list here. Now when you're starting off in a new project if you try to create a new View here, it gives you the normal naming dialog which also has this Page URL property. Right now this property is enabled by default because my project doesn't yet have a Page configured. The designer tries to help you out by creating a Page for you and mounting the View to that Page. So in this case it's going to create a Page of just a slash which we can think of as the Home Page or the root Page of the project if I click the create button here. So now that we have our View we can head back to Page configuration, and you'll see that our Page is now in the list. Additionally our new View has been assigned to that Page. We can also see that when we select the Page the primary View has been set. So we very quickly just created a View, created a Page and then mounted the View into a Page. Now if I try creating a new View again, and change the name here, this time I'll name it A. You'll notice that when I change the name the Page URL also changed to match. Now of course you can change the name of the Page if you'd like. Meaning that you don't need the name of your View to match the name of your Page. You'll also see that the Page URL is disabled by default. After your project has at least one Page configured this little check box is disabled by default, but of course you can always re-enable it. So in this case I do want to create a new Page and automatically mount it. Now I'll hit the create View button. And now if we head back we can see that my A Page exists. Now if you wanted to create a Page without creating a View as well, say you already created a bunch of Views, there is a little plus icon you can hit here that simply adds a new Page for you. You just need to remember to set the primary View when you're ready to launch. And of course if you don't want a Page anymore you can simply select it and hit the trash can to remove it. Now let's go back to our Views and add some components just to make them look a little different. I'll add a Cylindrical Tank to New View. I'll switch over to A, and add an LED display. I'm going to save my project. And then let's head back to the cog icon so we can take a look at the Page configuration. If I want to go to my first Page here I can simply select the Page, right click and then launch the URL. Your browser will open up and you should see that first Page. Now if you've been wondering why there's been a slash in the Page names here that's because the name of the Page effectively goes at the end of this URL. So that first, or the home Page of the project here simply doesn't have any characters, although I could add some if I wanted to. If I need to get to this next Page here I can simply update my URL with an A, hit Enter, and it will load that Page. Now of course I could actually add buttons and other navigation components to handle the switching here. Now if for some reason you try to go to a Page that doesn't have any Views mounted, like our New Page here. If I type that in real quick you'll get a little message saying that the Page doesn't have a View associated with it. So if you're trying to View a Page from your project in your browser and you get this "View Not Found" message that generally means either you don't have a primary View configured for the Page or you do and you just haven't saved the project yet. Now hopefully you have a good understanding about what a Page is. It certainly is a unit of design, but because it has a URL associated with it, it's also a means of navigation as you'll see in later videos.

close

Share this video