Configuring Modal Pop-up Pages

You can configure any page to open in a modal pop-up page instead of being redirected to the same window or open in a new browser window.

This way of showing pages has the advantages of allowing you to keep the context of an action intact. For example, if you need to edit a record at the bottom of page 2 of your table, using a modal pop-up will not change pagination or position of the table.

You can configure any button having a redirect action to open the page in the modal pop-up. You can do that by modifying button actions or using the Batch Wizard.

Configuring Modal Pop-ups using the Redirect Action Wizard

Step 1: Select a button and in the Property Sheet click on Button Actions, Redirect:

Step 2: Now in the Redirect Action Wizard you can specify an action for your button:

Step 3: To have a page open in a modal pop-up select “Navigate a specific URL within a modal pop-up”.  With this option or “Navigate a specific URL within a new window” option selected you can specify a control on the underlying page (where the button is) to get updated when the pop-up window is closed. Of course that makes sense only if your pop-up page updates a record. For example if you open Edit record page for a record in a table you might want to specify the table to be updated to reflect changes made.

Step 4: On the next “Redirect URL” step you can configure URL parameters.

In order to make pages more user-friendly, Iron Speed Designer includes new URL parameter “TabVisible=False” when you select “Navigate a specific URL within a modal pop-up”  to hide tabs when page is opened in a modal pop-up. Also if you specify a control to update on the Action step, “SaveAndNewVisible=False” will be included and the Save and New button will not show up on the page opened in modal pop up. If you think the tabs or Save and New button are helpful, you are welcome to remove these URL parameters but note that there are some major limitations:

if you close the window or cancel from it after one or more clicks to Save and New without ever clicking Save, underlying control will not be updated, new records will not be reflected. An application user will need to manually (F5) refresh a page to see new records Control is updated only when Save button is clicked.

Another important limitation is that only last added record will be added to the dropdown list if it was selected to be updated so if several were added via Save and New button only last will show up in the list after Save was clicked.

Tabs might not fit pop-up window and could require vertical and horizontal scroll.

Configuring Modal Pop-up using Batch Wizard

The Batch Wizard allows you to quickly search through the whole application and change button behavior globally.  Once you choose an action at Select step and proceed to the “Configure” step, you will see a list of controls that satisfy the search criteria. You can filter buttons by Folder name, Page name, Control name, redirect URL or button type.

Note that only those controls which are eligible for the change are shown in the list. For example, if you select new action as “Open page in pop-up” action only those buttons which are presently configured to redirect or open page in new window  will show up. Buttons that already have an action configured to open page in modal pop-up will not appear in the list. Also no buttons without redirect URL property will be shown as they are no eligible for such action (for example, export buttons will not show up).

Select the controls you wish to re-configure and click Finish to complete the operation.

Hide BUTTON or Tab container

You can easily hide a BUTTON or tab container using the “Control visible” property in the Property Sheet.

By default, the SaveAndNewButton has a visible property, = URL(“SaveAndNewVisible”).  The Tab Containers has a visible formula, = URL(“TabVisible”).  As a result, when SaveAndNewVisible or TabVisible is passed as False through the URL parameter, the corresponding button or tab containers will be invisible.

 

Configuring Master Pages

In addition to a default master page you can configure two additional master pages for modal pop-up and new window redirects. These master pages are used only when this page is shown in the modal pop-up or new window. By default Iron Speed Designer assigns the special Popup.master and Blank.master pages for this purpose. Popup.master has a special ‘Close’ button on the upper right corner.

Configure appearance of the modal pop-up

To resize all modal pop-up globally in the application except Quick Selector pages, you need to define these CSS classes in Style.css which will override the classes in BaseStyles.css:

CSS class name

Description

Default values

Example of new values

. QPageSize

Size of pop-up. 

height: 500px;
width: 780px;

height: 700px;
width: 1080px;

.QSContainer.scrollRegion.pageButtonsContainer

Top position of the footer.  The default is. 

top:460px;

top:660px;

. QSContainer.scrollRegion

Height of the scroll region. 

height: 428px;
width:785px;

height: 628px;
width:1085px

 

To resize one particular pop-up page, you need to first duplicate Master Pages/Popup.master, locate QSContainer in the PageBody section of duplicated master page, right click any cell on Layout Editor and select Styles-Table to bring up dialog for table attributes. Change the class from QSContainer to QSContainer1.

Now you need to change top position of the footer with buttons, i.e. replace QPPageButtonsContainer style. Select  the pop-up page in the Application Explorer in Iron Speed Designer, navigate to the page level section where you can see “PageButtons”, select the page button cell and set the cell attribute to your new style (ex QPPageButtonsContainer1).
And finally you need to replace QPageSize style. Select Page properties for the pop-up page.
Replace QPageSize with your new style (ex. QPageSize1):

Now you need to define your new styles in the Styles.css file and your job is done.