Working with Pop-up Windows

Applies to IE Browser publications.

HTML Executable lets you open several windows called pop-up windows (or popup) in the same IE browser publication; thus your users can see additional information without navigating away from the current page in the main window. Popup windows are windows without toolbar or status bar. They can feature a custom menu bar however.

Each popup has a unique name.

How should pop-up windows display?

In HTML Executable, you can define several properties for pop-up windows: go to Application Settings => Pop-Ups.

You may define the default size for new pop-up windows: enter the desired width and height in the different fields. You may also click on the Auto-Sizer button: it will display a small window that you can resize as you want, then HTML Executable will automatically set the window’s height and width according to the size you have chosen.

Do not manage popup Z order automatically

By default, pop-up windows are created as children of the main window. Consequently, you cannot return to the main window before closing the pop-up window. If you want to create independent pop-up windows, then enable this option.

Include a menu bar for each pop-up

Pop-up windows may have their own menu bar with specific commands like Print, Close or custom ones. Enable this option and click Edit Menu Bar Items to manage the menu’s entries.

You can call some script commands from the default Global and Macros scripts that contain commands useful for popup menus:

  • Global.HEExitPublication: exits the publication.

  • Global.HECloseCurrentPopup: closes the active pop-up.

  • Global.HEPopupPrintPreview: shows the print preview for the current pop-up which lets end users print the contents of the pop-up window.

For instance, if you want to add a “Print” menu to your pop-up windows, click Add, enter “Print” and click OK. Then choose “Execute this script function”, select Global.HEPopupPrintPreview and that’s all. You should get the same result as shown on this screenshot:

menu bar

Note: all pop-up windows will share the same menu bar.

How to open a popup window

There are several ways to open a new popup window from your HTML pages:

Use the target parameter _blank, or if you also want to assign a name to the new popup, use _hepopup_ followed by the name of your popup window (no space, alphanumeric characters only).

Examples:

  • with _blank:

    Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.
  • with _hepopup_xyz:

    Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.

The popup’s name will be pop1 and this popup will show the compiled webpage named popup1.htm

Note that _blank will always open a new window while _hepopup_[name] will bring the [name] window to the front if the latter already exists. For instance, click twice on the hyperlinks above.

You can also use external links like https://www.htmlexe.com: our website

with JavaScript functions:

window.open and window.external.ShowPopup are supported.

  • Open a popup with window.open.

    Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.

    Syntax:

    window.open(page,“popup2”,“width=500, height=200”);

    window.open will only take account of the “width” and “height” parameters if available. If you want to set the position too, use window.external.ShowPopup instead.

    Note that you should always give a name to the popup window you create with window.open.

  • Open a popup with window.external.ShowPopup

    Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.

Syntax for window.external.ShowPopup:

function window.external.ShowPopup(Name, URL, Width, Height, Top, Left, Param);
  • Name: name of your popup window.
  • URL: url to the page that should be displayed. It can be a virtual path to a compiled page or a full URL. Relative paths are not handled.
  • Width, Height: width and height of the popup window (in pixels).
  • Left, Top: x and y screen coordinates of the top-left corner (in pixels).
  • Param: blank or one creation parameter parentexplicit, parentismain or noresize

  • parentexplicit: makes the popup independent (ignores the z-order auto management set by the option named “Do not manage popup Z order automatically” described above).

  • parentismain: the popup is a child of the main window, and not the window with the page or script that opened it.

  • noresize: does not allow the end user to resize the popup window.

Note: to create a screen-centered popup, set both Left and Top to -1.

All parameters are required.

with HEScript

An internal HEScript procedure Showpopup is available and lets you specify additional parameters for your popup window.

procedure ShowPopup(const Name, URL: String; Width, Height,
 Top, Left: Integer; IsModal, RedirectLinksToMain: Boolean);
  • Name: name of your popup window.
  • URL: url to the page that should be displayed. It can be a virtual path to a compiled page or a full URL.
  • Width, Height: width and height of the popup window (in pixels).
  • Left, Top: x and y screen coordinates of the top-left corner (in pixels). If both set to -1, the popup appears centered.
  • IsModal: always set the value to false.
  • RedirectLinksToMain: whether you want the popup window to redirect all hyperlinks to the main window (when a user clicks a link, the page is displayed in the main window). Could be useful for website contents.

Example: you could associate the following procedure (ShowFirstPopup) with a custom menu command or a toolbar button.

procedure ShowFirstPopup;
begin
 ShowPopup("mypopup", "popup1.htm", 400, 300, 50, 25, false, false);
end;
Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.

Note: ShowPopupEx exists too.

Additionally you could add the following HEScript commands to your UserMain script:

{ NewWindow: opens a new popup window. URL : url to the page to display. 
WindowName: name of the popup (for targets and other functions). 
width: width of the popup height: height of the popup top: 
y screen position of the popup left: x screen position of the popup. 
redirect: if "1", then all links are redirected to the main window. }

procedure NewWindow(Url, WindowName, Width, Height, Top, Left, Redirect: String);
begin
ShowPopup(WindowName, Url, StrToInt(width), StrToInt(height), 
StrToInt(top),StrToInt(left), false, Redirect = "1");
end;

In that case, you can now display any popup you want without having to create a specific HEScript function for each popup. To call the previous NewWindow function from your HTML pages, use:

<a href="hescript:UserMain.newwindow|popup1.html|pop1|200|100|50|80|0">Open a new window</a>

How to close a popup window

If you wish to close the popup window from the popup itself, you can use:

  • window.close (JavaScript):

End users may be prompted by Internet Explorer if they want to close the window.

Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.
  • window.external.CloseCurrentWindow (JavaScript):

Contrary to the previous one, this function does not ask end users whether they want to close the popup window.

If you wish to close any popup, use window.external.ClosePopup(name) (JavaScript). You just need to know the popup’s name (that can be retrieved with the window.name JavaScript property).

Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.

This function also exists in HEScript:

procedure ClosePopup(const Name: String);

To close all popup windows, use the HEScript function CloseAllPopups.

procedure CloseAllPopups;

How to modify a popup size/position, set the focus…

You can set up properties for popup windows using the SetUIProp function (available as HEScript or window.external JavaScript extension).

JavaScript Syntax:

window.external.SetUIProp('popup_[name]', 'property name', 'property value');

Available property names are Left (x position), Top (y position), Width, Height, Caption (window title).

Example: we want to move an existing popup to another location. We can use this JavaScript code:

function setpopupxpos() {
window.external.SetUIProp("popup_mypopup","Left","1");
}

Demo:

Example not available in this online documentation: please run the offline help from HTML Executable to have a working example.

You can also take a look at the window.external.SetPopupProp method to set the focus, bring to front / send to back…


Copyright G.D.G. Software 2018. All rights reserved