Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


Overview

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. 

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. A Popup View is a typical view that is configured to open using a popup action. The first thing we need to do is create a 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, let's 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. Select the Temp button for Tank 100, and from the top menubar, click Component > Configure Events. You can also right click on the Temp button and select Configure Events.



  5. This opens the Event Configuration on Button window as shown in the image below. Here, you can select which action will cause the View to open. In this example, we'll use onClick so when a user clicks the button, the Temp Data view will immediately open. Under Events > Mouse Events, select onClick.
  6. Under Organize Actions, click the  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. 
    1. Open - opens the Popup View.
    2. Close - closes the Popup View.
    3. 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
    Note: You will need to repeat Steps 1 and 2, and Steps 4 through 9 for Tank 101 and Tank 102. 



  10. Save and Publish your project.

  11. Now let's see how your Popup View works in a Perspective Session. While in the Designer, go to the top menubar and click to Tools > Launch Perspective > Launch Session.
    Your primary view will open displaying three Tanks. 



  12. 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. To close the Popup View, click either the Temp button, or click the () in the upper right corner of the Popup View. 





  • No labels