You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.


A Popup View typically floats on top of the primary view in a Perspective Session, and it can be resized and moved around at the user's discretion. Popup Views are great for displaying additional information about an item on the primary view. Popup Views are often opened by components such as a Button on another view. When a user doesn't need to have the additional information displayed on the screen, it can be closed by clicking the Button again or simply closing the view. 

Title Bars on Popups

When called as a popup, a built-in title bar will be applied to the view if any of the following conditions have been met via the Popup Action configuration, or the corresponding parameters have been set on the appropriate system function, such as system.perspective.togglePopup:

  • A non-empty string title is provided (the title  parameter on scripting functions)
  • The popup is marked as with a "close" icon, meaning the "show close Icon" setting is enabled (the showCloseIcon  scripting parameter)
  • The popup is marked as "Draggable", (the draggable scripting parameter).

On this page ...

IULocgo

Popup Views



Configuring a Popup View

Let's assume you already have a primary view that contains some Tanks. At a glance, an operator can view some basic information on all the Tanks at a particular site, but they cannot see the additional information that is being collected that is unique to each Tank. The perfect way to display that unique information is to use a Popup View for each Tank.


Here is an example of how to use a Button component to setup a popup view for displaying the current tank temperature and history for the last 24 hours of the selected tank. 

  1. First create a new view, and give it a name. You many want to assign a name that you can easily recognize as a Popup View and the Tank ID number (i.e., Popup100).

  2. Next add some components to the Popup View. In this example, a Thermometer, Sparkline, and Label components were added. 



    Multiple Popup Views

    To display the additional data for all Tanks, you will need to create a Popup View for each Tank. You can use the Flex Repeater component to easily create multiple instances of components for display in another view each having the same look, feel, and functionality of the original components.

  3. Now, let's go back to the primary view and add a Button component for each of the Tanks and label them 'Temp'.



  4. Right click on the Temp button for Tank 100, and select Configure Events. 



  5. The Event Configuration window opens. Under Events, select onClick.
  6. Under Organize Actions, click the Add  icon to choose the appropriate action for the Temp button. Since we are opening a Popup View, select Popup from the dropdown list. 

  7. You have several Popup Actions to choose from. 
    • Open - Opens the Popup View.
    • Close - Closes the Popup View.
    • Toggle - Opens and closes the Popup View. Select Toggle so you can use the Temp button to both open and close the Popup View for the specified tank. 

  8. In the Configure Popup Action area under Select View, select your Popup View that you created in Step 1. This example uses Tank 100 and the Popup View is 'Popup100'.
  9. You also have some additional settings for customizing the behavior and appearance of your popup. Some of these options are set by default, and others you can customize. When you're finished, click OK. 
  10. Repeat Steps 4 through 9 for Tank 101 and Tank 102. 



  11. Save your project.
  12. Now let's see how your Popup View works in a Perspective Session. While in the Designer, go to the top menubar and click Tools > Launch Perspective > Launch Session.



  13. Click on the Temp button for Tank 100. You'll notice Tank 100's Popup View will open displaying its Temp Data. You can drag the Popup View around the screen or even change its size.
  14. To close the Popup View, click either the Temp button, or click the Close   icon in the upper right corner of the Popup view. 





  • No labels