Pop-Up Javascript Windows

Grid and UX Component

 

This document and accompanying video will demonstrate a new feature allowing us to dock pop-up windows in web applications.

 

Watch video

 

We have created a component in the example below where we have two controls, Firstname and Lastname.  We have also put in a Spacer that has a twelve inch height, which we have done in order to force the vertical scroll bar to appear:

 

 

 

We also have a button that will open up a window:

 

 

 

 

We will set the content of the window to this container, highlighted below.  When the window is open it will display the text, "Here is some text that will appear in a docked window":

 

 

 

 

To illustrate the use of a docked window, click on the Working Preview tab to see that only the Firstname and Lastname controls can be seen on the screen:

 

 

 

 

To see the other controls, City and State, we must scroll down:

 

 

 

 

Scrolling back up, we see our button labeled Open Docked Window. Click on that button to open the window containing the text, "Here is some text that will appear in a docked window":

 

 

 

 

Now when we scroll down, the window remains docked at the top of the screen, and is always present:

 

 

 

The ability to dock a window might be useful when creating a shopping cart window that would remain open as the user scrolls around the screen, for example.  Or perhaps in creating some help text that would be visible to the user at all times.

 

We created the docked window by clicking on the Design tab, clicking on our button, and then clicking on the onClick event:

 

 

 

 

Click on Edit Action when the Edit onClick Event window opens:

 

 

 

Now we can edit our window properties.  We have turned on "Dock window", and our dock location is "Top", but we have other options to dock our window on the bottom, left or right of the screen.  In this example we have also turned off "Window is resizable" as well as "Window title show", but again, the window is customizable.  Click OK to save the edited properties: