You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
LESSON
Open Popup Window
Description
Popup Windows can be used for almost anything and act in much the same way that a main window would except they can be dragged around the screen. This allows Popup Windows to be used to show more detailed information about a specific area of the project, or to show a specific type of information such as trends for all areas of the project. They can also be used to quickly draw the users attention to specific information that may be causing problems. Learn how to create and use Popup Windows and their properties, such as the infinite desktop property which allows a popup window to be dragged outside the bounds of the screen.
Video recorded using: Ignition 7.9
Transcript
(open in window)[00:00] Making popup windows for your projects is actually really simple in Ignition. First, we need to create our popup window. Now, I can do that by right clicking anywhere in the Windows section of our Project Browser. I already have a folder here called Popup Windows, so I'm going to go ahead and right click and choose Popup Window to create my popup window. Now, it's recommended that we change the name to something unique so we remember what the popup window is used for. We can also make the popup window as big or as small as we want. I'm going to make mine a lot smaller since it's just going to be a simple popup window. In the Property Editor, there are also some properties that we can change about our popup window if we wanted to. We can set it to be closeable or resizeable, and we can change the title to something more recognizable. Now this title that I'm choosing will appear in the top of the popup window in its title bar, which I have set to be always showing. Finally, I'm going to put a label on my popup window so it's easy to recognize. Now that I've created my popup window, I can open it from any of my other windows in my project. I'm going to go ahead and go to my main window that I have open here and put a button on the screen that's going to open my popup window. Now, it's important to note that I don't have to use a button, but I could use a text field, a label, an image component-- whatever component that I want to open my popup window. Now, I'm going to do a slow double click on my button here so I can edit the text-- to say open popup. And then I'm going to do a fast double click to open up the Scripting Window. Now here in Scripting, I'm going to make sure I'm on my actionPerformed Event Handler And in my Navigation tab, I'm going to choose Open and Swap and I'm going to choose to Open and Center the popup window that I just created. Now, I'm going to go down and hit Okay, and then save my project. Now if I go and open up my project, you can see I have my main window with my button on it. When I click on the button, it opens up my popup window. Now, I can move my popup around on the window, I can resize it and make it bigger or smaller, and I can even close my popup window. Another neat feature of windows that popups can utilize is the layer property. You'll notice that when I have my popup open and I click on the main window behind it, the popup window will still stay visible, but it will lose focus, as the main window behind it takes focus. This is because the popup window is on a higher layer than my main window. If I go back to my Designer and go to my popup window, I can scroll down on the Property Editor and you'll notice that my Layer property is set to 1 which is the default for popup windows. I can, if I wanted to, set the layer property to zero, which is the default for main windows. Now if I were to save and publish my project, then go back to the client, you'll notice now that when I hit Open Popup and click on the Main Window behind, the popup disappears. It hasn't actually closed, it's just gone behind the main window, because the client will show whatever window is in focus in that particular layer, and since both of the windows are in layer zero, the popup window hides behind the Main Window. To see my popup window again, go up to Windows menu in the menu bar and click on my popup window. Finally, one last thing you should be aware of when using popup windows, is the infinite desktop property. Here in the client, I'm going to drag my popup window beyond the bounds of the window. You'll notice it makes scroll bars, stretches the window, and resizes everything in the window. This may or may not be wanted. By default, it allows that behavior, but if I wanted to, I can go into the Designer, go into my project properties, and go to Client User Interface. There's a setting down here called Infinite Desktop. I can click the check box to turn it off, click Okay, and then save and publish my project. When I open the client again, you'll notice when I try to drag my popup window outside the bounds of the main window, it won't let me, and I'm stuck inside this main window. This way, the main window doesn't resize or stretch.