Adding Pop-up Windows Using Page Extensions

The following article outlines how to add Pop-up windows in the EngageIP AdminPortal using Page Extensions.

Example

Click on the Setup tab
Click on Page Extensions
Click the Add button
Enter the following information:
Name - Pop-up Page Extension
Page - userpackage/ajaxpackageselectlist
Script - (see below)
```
alert('hello page extension');
```
Click Save

There are several places in EngageIP where an overlay or popup window loads overtop of the current view. This page is fetched over AJAX and added dynamically to the page. Our model for page extensions requires that you declare the page that your script targets. If you want to add custom script to that pop-up, we need to first identify the page that is being requested via AJAX.

This article will walk you through the steps required to identify the page requested by the AJAX call and setup a simple page extension.

Identifying the AJAX Page

You can use any of the major browsers to monitor network requests, the process for each will be slightly different. In IE9+ or Chrome you can press F12 to access the developer tools and in FireFox you can install the FireBug plugin.

Whichever browser you're using, start your developer tools inspection window and open the Network profiling tool.

In our example we're going to setup a page extension on the Add Packages dialog. Navigate to a user in your test environment and go to the packages tab. After the user package list loads, use your developer tools to turn on network profiling. This will start monitoring network requests. Click the Add button (bottom right of the grid). Your browser will pick up the AJAX request to the page we're looking for.

In this case, we see that the complete URL of the request is:

/boss/userpackage/AJAXPackageSelectList.rails?id=0&controlID=

So, to specify this in our page extension definition, we are interested in what we call the Controller and Action portion of the URL, which is:

userpackage/AJAXPackageSelectList

This is the information that we need for our script to be invoked.

Creating the Page Extension

We need to go to the settings page on the branded owner for which you wish to add the page extension. For the most part, you can just to this user by typing =admin in the search box on any page, then click on the Settings tab on the top right.

Create a new page extension. For our example, we need simply to put the following in place:

Save the page extension and return to your user package list. When you click Add you will see the hello world sample we just implemented.

Extended Development Considerations

You can also use your browser's development tools to examine the page DOM and find elements you wish to modify, move, or suppress. You can add new DOM elements or extract or supplement information on the page.

To find out more about the page DOM that came back, again, in our instance it was for adding a package, simply inspect the Response Body for the AJAX request in your developer tools window.

From here, you can see any of the elements on the page that was loaded from the AJAX call and create your script accordingly.

Adding a Pop-up Requiring the Admin to Add a Package on Add Account

The following example outlines how to use a Page Extension to display a pop-up on add account if a package has not been selected.

Click on the Setup tab
Click Page Extensions
Click the Add button

Enter the following information:
Name - RequirePackageOnAddAccount
Page - User/add(to apply the same option to the ticket edit screen this value should be ticket/edit)
Script - see below, same for both the add and edit screens

var onClick = jQuery("#SaveButton")[0].onclick = null;
jQuery("#SaveButton, #SaveNewButton").click(function(){
  if(jQuery("#PackageCount").val()=="0"){
    alert('Please add at least one package');
    return false;
  }
  if (checkvalidation(document.getElementById('EditForm'), 0)) {
    DisableSubmitButtons();
    new Ajax.Updater('overDiv', 'AJAXPrevalidate.rails', {asynchronous:true, evalScripts:true, parameters:Form.serialize(document.getElementById('EditForm'))}); 
    return false;
  } 
  else {
    return false;
  });

Click Save