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.
- 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).
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.
- Now, let's go back to the primary view and add a Button component for each of the Tanks and label them 'Temp'.
- 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.
- 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.
- Under Organize Actions, click the
- 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.
- 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'.
- 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.
- Save and Publish your project.
- 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.
- 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 (