Introduction
Popups are a commonly used rich interaction. By using a popup you can open a new layer above the current main page. If the popup is set as “Modal”, it also prevents any interaction with the rest of the web application. When the popup window is closed, the underlying main page becomes active again, and the user can browse the web application. This article explains how to model and configure popups in your web application using WebRatio Platform.
Configuring the Popup
Let’s suppose you want to model a popup window to show the detail about a company selected from a list placed on the main page. To accomplish this, you need to have a model like the one shown in the following figure.
To show the “Company Detail” page as a popup, you just have to
- Select the Navigation Flow, move to the AJAX tab in the Properties View
- Enable the "Open Window" property.
- Select the “Company Detail” page
- Move to the General tab in the Properties View.
- Enable the “Ignore Master Page” property. This ensure that the web application does not compute all components placed in the master page, if any.
- Select the “Company Detail” page
- Move to the Layout tab in the Properties View.
- Choose the “WRDefault/Empty” Page Layout. This ensure that the main menu is not shown as part of the popup.
Once the generation process has completed, you can see the page shown below.
It’s also possible to open a page as popup after an operation chain. Let’s suppose that you want to model the employee’s management feature. The designed model looks like the following, where there’s a page for data management and a page showing the saved data.
You can open the page showing the saved data as a popup by setting the same properties (discussed previously) on the OK Flow that points to the desired page. Once generated, the result will be something like the following.
- Finally, press the Generate and Run button on the main toolbar.
Popup Settings
Once you have enabled a page to be appear as a popup, it is possible to set some properties to configure how the popup looks to the end user. All properties are available in the AJAX tab of the Navigation Flow’s Properties View.
You can set a precise dimension for the popup by setting the "Window Height" and "Window Width" properties. Values must be expressed in pixels (e.g. 800 and 600). If you do not set these properties, the popup dimensions are automatically calculated by the web application so that all of the content is visible.
To set a popup as modal you just have to enable the "Modal" property in the Properties View. “Modal” means that when the popup is opened, the bottom layer is disabled so that the user cannot interact with it. Once the popup is closed, the main page is enabled again and the user can proceed in navigating the web application. Refer to the following image for an example.
Other popup properties are shown in the following figure.
- Use Title and Window Title. These Let you add a title to the popup.
- Draggable. If enabled, this lets the user move the popup inside the main browser window.
- Resizable. If enabled, this lets the user resize the popup as desired.
- Minimizable. If enabled, this lets the user minimize the popup
- Maximizable. If enabled, this lets the user maximize the popup to occupy the entire main browser window.
- Closable. If enabled, this lets the user close the popup by pressing the X icon.