Contents

Introduction

Visualforce is a powerful UI framework, and by now the design concept called Model, View, Controller is not new. When Developers work with Visualforce for a while they will often comment that many things are easy and even simple, but occasionally I've heard that getting Popups right is difficult. This short article will introduce a method that allows developers to build popup functionality into their Visualforce pages and still retain the simplicity of working in a single page.

Problem Statement

Building a link or button to popup a new Visualforce page is actually quite simple, and getting this popup to be modal and above the current page is also quite easy. The problem occurs when you would like to collect information in the popup and pass that information back to the page that launched the popup.

The issue is that the new window is launched as a separate browser request when you use window.open(). Since this is a separate request to the server, the new page does not share the same controller context/session. Even if the two pages both use the same controller!. This is due to the fact that these are two different requests at the browser level.

So, how do you pass information from one page to another in this case ? You would be forced to use a query string parameter, from the popup window back to the opener window. The issue here is that the parent page will reload and lose it's context, ouch.

DHTML Solution

While it sounds serious, there is a straight forward method to build a popup, and make it modal if required. This technique is sometimes called In-Page DIV or Hidden DIV. There is a good example of this in the YUI toolkit, but the one that I've found easy to use is provided by Matt Kruse and is located here: Javascript Toolbox. Matt provides this code as open source with a donation button to support his habit of writing books and giving away code.

We can develop a simple solution around his Javascript code to implement a nice popup that lives in the same page, with the same context and controller, so that all the information gathered is available in one place. Really an elegant solution, i think.

There are several examples provided here Popup Examples

Visualforce Code

I've taken the next step for you, all you need to do is read through this code and you can easily see the tricks and solutions to get it working for you.

Let's look at the code, then I'll describe the steps

 <apex:page controller="varController">

	<!-- 
   read : http://www.javascripttoolbox.com/lib/popup/example.php
  download JS from:  http://www.javascripttoolbox.com/libsource.php/popup/combined/popup.js
   -->
	<apex:includeScript value="{!$Resource.popup}" />

	<apex:form id="theform">

		<apex:outputPanel id="modal"
			style="border:1px solid black; width:250px; display:none;">
			<apex:pageBlock > 
    This is a modal popup!<br />
    Enter your new value here, click Done. 
    <apex:inputText value="{!inputVar}" />
				<apex:commandButton value=" Done "
					onClick="Popup.hide('{!$Component.modal}')" rerender="resul" />
			</apex:pageBlock>
		</apex:outputPanel>

		<apex:pageBlock >
			<apex:pageBlockButtons >
			<apex:commandButton onclick="Popup.showModal('{!$Component.modal}');return false;"
				value="Show Modal Popup" />

			<apex:commandButton onclick="Popup.showModal('{!$Component.modal}',null,null, {'screenColor':'#999999','screenOpacity':.6});return false;"
				value="Show Modal Popup With A Custom Screen"></apex:commandButton>
			</apex:pageBlockButtons>

			<apex:outputPanel id="resul"  >


Summary

I've only tested this on one browser, and there are many other libraries that demonstrate this technique, such as YUI.

We will update this article with a YUI example some time soon, check back !

thanks Ron Hess 08:16, 5 February 2009 (PST)

Summary

I've only tested this on one browser, and there are many other libraries that demonstrate this technique, such as YUI.

We will update this article with a YUI example some time soon, check back !

thanks Ron Hess 08:16, 5 February 2009 (PST)

Summary