Displaying Popup Windows in PHPRunner and ASPRunner.NET applications

Runner.displayPopup() provides a convenient way to display an application page or custom HTML in a popup window. The examples below cover the core options and common ways to use the function in PHPRunner and ASPRunner.NET.

You can use this JavaScript function in places such as the JavaScript OnLoad event or the ClientBefore event of a custom button.

The simplest example requires only the URL of the page to display. Here is how to open the Add page of the Products table:

Runner.displayPopup({
	url: "products_add.php"
});

For the current API reference and additional examples, see the
PHPRunner documentation for Runner.displayPopup()
or the
ASPRunner.NET documentation for Runner.displayPopup().

Runner.displayPopup() options

The function supports the following options:

url: URL of the page to be displayed.

html: HTML code to display instead of loading a URL.

header: content displayed in the popup header.

footer: content displayed in the popup footer.

afterCreate: function called after the popup window is created.

beforeClose: function called before the popup window is closed. Return false to prevent the popup from closing or true to allow it to close.

width: popup width in pixels.

height: popup height in pixels.

Simple popup window

var win = Runner.displayPopup({
	url: "products_add.php",
	width: 700,
	height: 500,
	header: 'Add new product'
});

Using HTML instead of a URL

You can display HTML directly instead of loading another application page:

var win = Runner.displayPopup({
	html: "<h1>Hello world!</h1><p>It works</p>",
	header: 'Custom popup text'
});

Using close()

Runner.displayPopup() returns a Popup object. You can save that object in a variable and close it later:

var win = Runner.displayPopup({
	url: "products_add.php",
	width: 500,
	height: 300,
	header: 'Add new product'
});

alert('That was an example of popup window');

win.close();

Using afterCreate()

The afterCreate function runs after the popup has been created. For example, you can use it to change the popup dimensions:

var win = Runner.displayPopup({
	url: "products_add.php",
	header: 'Add new product',
	afterCreate: function(win) {
		win.setWidth(700);
		win.setHeight(500);
	}
});

Add a “Close window” link to the footer

var win = Runner.displayPopup({
	url: "products_add.php",
	header: 'Add new product',
	footer: '<a href="#" onclick="window.win.close();return false;">Close window</a>',
	afterCreate: function(win) {
		window.win = win;
	}
});

Using beforeClose()

The beforeClose function lets you decide whether the popup can be closed. Return false to prevent it from closing.

The following example prevents the popup from closing if the Product Name field is empty:

var win = Runner.displayPopup({
	url: "products_add.php",
	header: 'Add new product',
	footer: '<a href="#" onclick="window.win.close();return false;">Close window</a>',
	afterCreate: function(win) {
		window.win = win;
	},
	beforeClose: function(win) {
		if ($('iframe').contents().find("input#value_ProductName_1").val()=="")
			return false;
		else
			return true;
	}
});

Show a “View customer” button on each row of the Orders List page

Insert a button into the Orders List page grid.

Server code

$record = $button->getCurrentRecord();
$result["CustomerID"] = $record["CustomerID"];

ClientAfter code

var win = Runner.displayPopup({
	url: "customers_view.php?editid1="+result["CustomerID"],
	width: 700,
	height: 500,
	header: 'View customer'
});

Show an Add page in a popup, close it after Save and refresh the List page

A common use of Runner.displayPopup() is to open an Add page from a List page, save the new record, close the popup and refresh the List page.

The current PHPRunner documentation uses the following approach.

Button’s ClientBefore code

window.popup = Runner.displayPopup({
	url: Runner.pages.getUrl("carsmake", "add"),
	width: 700,
	height: 700,
	header: 'Add Category'
});

AfterAdd event

$pageObject->setProxyValue('saved', true);
$pageObject->stopPRG = true;

JavaScript OnLoad event of the Add page

if ((proxy['saved']) && window.parent && window.parent.popup) {
	window.parent.location.reload();
	window.parent.popup.close();
}

If you want to close the popup without refreshing the List page, remove or comment out this line:

window.parent.location.reload();

For more details, see the
PHPRunner Runner.displayPopup() documentation,
ASPRunner.NET Runner.displayPopup() documentation,
PHPRunner Popup object API reference,
and
ASPRunner.NET Popup object API reference.