Popup Panels

Logi Info includes the Popup Panel element, which opens a fully-functional, configurable window that can include data tables, charts, sub-reports, images, and other standard visualizations. The Tooltip Panel, a variation of the Popup Panel, is also discussed here.

 

About the Popup Panel

A Popup Panel is a separate window that you can open "on top" of your existing report page. You can control its size, initial location, modal state, style, and, of course, its contents. It can contain almost every other element you would use in a regular report, with the exception of the super-elements (Dashboard, Analysis Grid, etc.). and a few others.

The visibility of a Popup Panel is controlled using the Action.Show Element element and therefore it can be shown or hidden when a user clicks a link, button, image, or data, or when a DHTML event occurs.
 

As you can see in the example above, Popup Panels include a Title Bar, where the element's Caption attribute value appears, and an optional "Close Button" that appears at the right end of the title bar.
 

       

Panels can either be displayed as Modal or non-Modal. A Modal window is one that requires users to interact with it before they can return to using the application. As shown above, when a Modal panel is displayed, the underlying page is disabled and shaded until the panel is closed.

The Popup Panel uses its own style classes to set colors, font sizes, spacing and other presentation values. These can be overridden by adding classes with the same names to your own style sheet. The panel's style sheet is:

    <application folder>/rdTemplate/rdPopup/rdPopupPanel.css

In order for the style class override effect to work, your style sheet must be named in a Style Sheet element that is lower in your report definition's element tree than the Popup Panel element.

Attributes

The Popup Panel element has the following attributes:
 

Attribute

Description

ID

(Required) Specifies a unique element identifier.

Caption

Specifies the text that will appear in the panel's Title Bar. You must provide a value here in order to display the Close button.

Class

Specifies the CSS class to be used by the element. When set, this class will also be used by all child elements that don't have their own class.

Close Button Caption

Specifies the "Close Button" text, which by default is an "X". This attribute allows you to specify different text instead, such as "Done". You must enter a value in the Caption attribute in order to display the Close button.

Close Button Class

Specifies an alternate class for the Close Button.

Height

Specifies the height of panel. If left blank, panel will automatically size to its contents.

Height Scale

Specifies the measurement units for the previous attribute: Percent or Pixels.

Hide Close Button

Specifies whether or not the Close Button will be displayed.
Default: False

Keep Other Popups
 

Specifies behavior when one popup is already being shown and then a second popup is shown. The default behavior is to close the first popup. When this attribute is set to True, the first popup will remain open and subsequent popups will be layered in above it.

Popup Modal

Specifies if the panel will be shown in a Modal state, disabling the rest of the report page and shading it with a transparent gray overlay.
Default: False

Popup Movable

Specifies whether the panel to be dragged and repositioned, using the mouse.
Default: False.

Popup Panel Location

Specifies the location at which the panel will be shown. Choices include:

Mouse
- panel will appear below and to the right of the cursor position.
Center - panel will appear at the center of page.
200,150 - panel will appear at these X,Y coordinates, relative to the upper left corner of the screen.

Default: Mouse

Security Right ID

When using Logi Security, specifies one or more Security Right IDs, separated by commas. Users with these Security Right IDs will be able to view the Analysis Grid, users without them will not.

Show On Page Load

Specifies whether the panel will be automatically displayed when the report page is first loaded. Default: False

Width

Specifies the width of the panel. If left blank, panel will automatically size to its contents.

Width Scale

Specifies the measurement units applied to previous attribute: Percent or Pixels.


Using a Popup Panel with a Link

Adding a Popup Panel to your report definition is simple and straightforward:

In the example above, a Popup Panel element (named "pnlPhoto1") has been added to the definition in a data table column. Its attributes have been set to control its behavior. Note that the panel's caption will display data from the datalayer, through the use of @Data tokens, which is why the Popup Pane has been placed as a child-element beneath a Data Table Column element. Otherwise it could have been placed anywhere in the definition.
 

Next, below the Popup Panel element, an Image element has been added, as shown above, and its Caption attribute set to data returned from the datalayer that specifies the image filename.
 

Finally, a link has been created, which shows or hides the Popup Panel, by adding an Action.Show Element element to the Label element that displays the data in the report's Property Number column. Its attributes are set to make it act upon the Popup Panel ("pnlPhoto1") and to cause the panel's visibility to toggle, or alternate, between shown and hidden.
 

The examples above show the data table and what happens when one of the Property Number links is clicked. The report is disabled when the panel is displayed and the background is "grayed" out because the Popup Panel has been set to Modal.

 Note that, when you place a popup panel in a data table column, an instance of the panel will be generated for every row in the data table. This could have performance implications when using large data sets. Another technique, placing the Popup Panel element outside of the data table, is discussed in the section Passing Parameters to a Popup Panel, below.

Using a Popup Panel with the onMouseOver Event

This example changes the definition in the previous example slightly so that the Popup Panel will appear when the mouse hovers over an icon in a data table column:
 

Starting with the example from the previous section, in the definition above the Property Number data has been replaced with an Image element displaying a camera icon, with an Event Handler element below it. The Event Handler has been set, as shown, to fire when the onMouseOver event occurs. The Action.Show Element element from the previous example has been placed below the Event Handler.
 

For a little variety, a few changes have also been made to the Popup Panel's attributes. The panel is no longer Modal and its pop-up location has been set to be near the mouse cursor.
 

As shown above, when the cursor passes over the camera icon, the Popup Panel with its image appears. Because the panel isn't Modal, the cursor can continue to be moved over the other icons in turn.

This example works as expected but still requires you to click the Close Button to hide the last photo displayed. Let's make the pop-up panel close when the mouse leaves the icon. To do this, we'll use the "dual Event Handler" technique:
 

In the example above, a second Event Handler element has been added beneath the Image element, set to fire on "onMouseOut" events. An copy of the Action.Show Element element we used to show the element is added beneath the second Event Handler (but here we're given it an ID of "actHideElement"). Because the Action elements use Toggle as their Display mode, one will show the pop-up and the other will hide it.

The only thing left to do is to set the Popup Panel element's Hide Close Button attribute to True.

Passing Parameters to a Popup Panel

As shown in previous sections, a common use of the Popup Panel is to provide drill-down into the details of data that's presented in a data table. Placing a Popup Panel element in a data table column will result in a pop-up being generated for every table row, which could have a negative performance impact.

An alternate approach is to place the Popup Panel outside of the data table and pass parameters to it, so that it can do its own lookup and then present detail data. We'll use two Event Handlers again and make use of the fact that, even though the hidden pop-up panel has been generated (once when the report is first shown), we can use AJAX technology to "re-draw" the hidden pop-up when a link in the data table is clicked. The fact the panel isn't visible at the time doesn't matter and, right after it's re-drawn, we'll show it.

An important detail is that the DHTML Events scheme recognizes the pressing of a mouse button (MouseDown) as distinct from when the button bottoms out (Click). It also recognizes the button coming back up after a click (MouseUp) but we don't need to use that event right now.
 

Consider the example above. A Popup Panel has been added to a report, but this time it's not under a data table column. The first child element of the panel is a Division, and below it a Label. In this example, the label is just a way to verify that the parameter we'll pass has been received; the parameter will be available as a normal @Request token. The Division has no attributes set other than its unique element ID (which is important).

Now, as shown above, an Event Handler element has been added beneath the Label ("lblContactName") used to display data in a data table column. Its DHTML Event attribute value is set to onMouseDown.

Beneath it, an Action.Refresh Element element has been added, and its attributes have been set as shown. When the mouse button is pressed down, the division in the hidden panel will be refreshed, using AJAX.

 The Action.Refresh Element element can have a Link Parameters child element; its values are "received" in the pop-up as @Request tokens when the pop-up panel is refreshed. If we use an @Data token as the parameter value, we can pass data specific to the row containing the link into the pop-up. In a scenario where you want to show detail data in the pop-up, the Link Param can send identifying data (like an OrderID) into it. Then elements in the pop-up might use that OrderID to look up and display detail data in the pop-up.


Finally, we've added a second Event Handler element, as shown above, beneath the Label in the data table column. Its DHTML Event attribute value is set to onClick.

Beneath it, an Action.Show Element element has been added, and its attributes have been set as shown. This element will cause the popup panel to be shown.
 

So, to review: the Label element that users will click has two Event Handlers beneath it. The first one will pass a request variable to the pop-up panel and refresh it; the second one will cause the refreshed pop-up panel to be shown.

Data Entry in Pop-up Panels

One common use of pop-up panels is to provide a data entry form for data tables, like this:
 

Typically, you'd use a Process task to update the data when the Save button is clicked. You'd expect that the user input values would be passed to the task as Request variables, as usual.

However, it's important to realize that the @Request token IDs will automatically have a row designator ("_Row1") appended to them, because the Input controls are within a data table row. This presents a complication: how will the task "know" which row these values refer to and therefore which tokens to use? For example,

    @Request.inpPropertyNo_Row1~, or @Request.inpPropertyNo_Row2~, or ?

The recommended technique for handling this is to use Input Hidden elements, one for each user input element in the pop-up panel, placed outside the data table. When the Save button is clicked, an onMouseDown Event Handler is used with Action.JavaScript to call code that assigns the values from the pop-up panel's Input elements to the Input Hidden elements. An additional Action.Process element under the Save button then calls the Process task, which uses the @Request tokens for the Input Hidden elements to update the data.

You can see this in action and view sample definitions in the Samples page on DevNet. See the SamplesInfo ApplicationsProcess TasksUpdate Table sample application.

The Tooltip Panel

Another variety of popup panel is available: the Tooltip Panel. Like its namesake, the traditional "tooltip", the Tooltip Panel element is used to supply additional information to the user, and it appears when a user hovers their mouse over its parent element.

However, as shown above, this element is much more versatile than a regular tooltip, allowing you to control its size and include a range of other elements within it, including Labels, Images, and even Charts. The panel will be displayed just below and to the right of the mouse position.

The definition snippet above shows how the Tooltip Panel element is used; it can be the child of a variety of other elements. No Event Handler element is required; the panel will appear and disappear automatically, based on mouse movements.

You can use an Event Handler in addition to a Tooltip Panel, but if you assign the onMouseOver event to the Event Handler, the Tooltip Panel will not work. Assigning other events, such as onClick, to the handler will not interfere with the Tooltip Panel.

Note that the Tooltip Panel element has a Condition attribute, allowing you to control if, and when, it will appear.