Visualforce - Beyond Basics Series 38 - Show Custom Popup

How to show a popup ?

A popup dialog will be very useful in cases where an temporary information needs to be shown to the user for either user Input/Output.

How to load a  page in popup ?

There's no standard popup techniques in Visualforce. So, we need to create a custom Popup & load a visualforce page on that using window.open API method.

How to interact with popup & parent page ?

From the popup, its possible to interact with parent page in two ways,

1.   By manipulating parent DOM directly.
2.   By triggering events to parent body component

Where is the Code ?

I have illustrated the custom popup through  a parent page where we have a Text Field that will be populated when the user selects the account in the dialog box.

	<apex:page standardController="Opportunity">
	<apex:form>
	<apex:outputLabel value="Account Name"/>
	<apex:inputText value="{!Opportunity.Account.Name}" Id="AccNameId"/> &nbsp;
	<!-- Custom Lookup for Account Record -->
	<apex:outputLink value="javascript:void(0);" onclick="openDialog('{!$Component.AccNameId}');">
	find
	</apex:outputLink>
	</apex:form>
	<script>
	function openDialog(fieldId) {
	window.open('{!URLFOR($Page.myDialogPage)}' + '?accTagId=' + fieldId,
	'Popup',
	'height=500,width=800,resizable=no,left=100,top=100');
	}
	</script>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:page standardController="Account" recordSetVar="recs" sidebar="false" showHeader="false">
	<apex:form>
	<apex:pageBlock title="Select a Account from the list">
	<apex:pageBlockSection>
	<apex:pageBlockTable value="{!recs}" var="rec">
	<apex:column>
	<apex:inputCheckbox onchange="onchecked(this, '{!rec.Name}')" />
	</apex:column>
	<apex:column value="{!rec.Name}"/>
	<apex:column value="{!rec.TickerSymbol}"/>
	<apex:column value="{!rec.Website}"/>
	<apex:column value="{!rec.AccountSource}"/>
	<apex:column value="{!rec.Industry}"/>
	</apex:pageBlockTable>
	</apex:pageBlockSection>
	</apex:pageBlock>
	</apex:form>
	<script>
	function onchecked(elmt, accName) {
	if (!elmt.checked || !window.parent || !accName) return;
	var document = (window.opener && window.opener.document) ||
	(indow.parent.opener && window.parent.opener.document);
	var accTag = document.getElementById('{!$CurrentPage.Parameters.accTagId}');
	accTag.value = accName;
	window.close();
	}
	</script>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Parent Page

Custom Lookup Dialog box

After user selected,

Walk through in a video ?