Skip to main content
Version: 7.9

Open Popup Window

Inductive University

Open Popup Window

Watch the video

Creating a Popup Window

In order to open a popup window, you first have to create a Popup Window. You can add a popup window to any folder in the Designer.

  1. In this example, a Popup folder already exists so we will right click on the Popup folder to create a new ‘Popup’ window. Right click on the Popup window then rename it to ‘Popup’ or give it an appropriate name.

    creating a popup window step 1

    You can make the popup window as big or small as you want. You can also set properties in the Property Editor by making the window Closable, Resizable, and giving it a Title. You can even setup the Border or Title Bar to show-up on the window.

    Once the window is created, you can open up the popup window from any other window. You can use a button, a label, an image or any component you like to open up a popup window.

  2. This example opens a popup window from a Main Window using a Button component. In any Main Window, drag a Button component from the Component Palette to your window. Do a slow double click on the word ‘Button’ or select the Text property and change the text to ‘Open Popup‘.

    Now you need to tell the Open Popup button what you want it to do when you click it. Select the Open Popup Button, right click and select Scripting from the dropdown.

    creating a popup window step 2

  3. The Component Scripting dialogue box will open. Select actionPerformed, and click the Open/Swap then Open and Center options on the Navigation tab. From the Window dropdown box, set the window path to Popups/Popup. Click OK. Save and Publish your project.

    creating a popup window step 3

  4. Open your Client and click the Open Popup button on your Main Window. It opens the Popup window which you can move around, make it bigger, and close it.

    creating a popup window step 4

  5. Another behavior of the Popup window occurs when you open up the popup window and click on your main window (in this example, Main Window 4). It looks like the popup window disappears, but it’s actually behind your main window. Go to Windows on the menu bar and click Popup to bring the popup window back to focus. The Windows Menu will show you all the open windows in your Client.

    creating a popup window step 5

There is a property on the popup window that will force the popup window to stay on top of the Main Window. In the Designer, click on your popup window in the Project Browser (not the Root Container). Go to the Property Editor and click the Layer property. The higher the Layer number, the more on top it will be. If your 'windows’ Layer properties are all set to 0, they are all going to share the same layer. They can go back and forth over each other. If you set the Layer number to 1, the popup window will always be on top. Save and Publish your project.

Popup Window Properties Layer Property

After you update the Client, you will see your popup window on top.

Popup Window Properties Vision Client

It is also possible for you to open and set a specific location where you want the Popup window to be located. In Designer, click on your Popup window and go to the Property Editor. Click on the Location property and set to X to 300 and Y to 300 pixels.

Popup Window Properties Location Property

Go to your Main Window, double click Open Popup Button to open the Component Scripting dialog box. Uncheck ‘and Center’ so your popup window will automatically open up in that specific X and Y location setting.

Popup Window Properties Uncheck and Center

Save and Publish your project. In your Client, click the update bar, and then click on the Open Popup button. The popup window will open at the X 300 and Y 300 location setting instead of opening in the center of the screen.

Popup Window Properties Vision Client Uncenter Popup