Visualforce - Beyond Basics Series 35 - Build own Dialog Box

What is dialog box ?

Dialog box is a container where a message is displayed to the user & they can either Accept or Cancel the message.

Is there a standard dialog box component ?

There's no standard component to achieve that. so, we need to build a custom one.

How normally developers achieve this ?

Normally developers would use some third party libraries like Jquery, backbone etc to get the dialog box for their use case. But, it's not necessary, as it is very simple to build one & reuse for all your projects.

What is my solution ?

I build a component to create the dialog box & it can be used by pages when they wish to display a message to the user.

Where is the Code ?

I have illustrated with a page including the dialogbox component that i have created. Dialogbox component will accept the message to be displayed & Ok/Cancel action that will be executed. And also it accepts the rerender list of ids for each Action. It's possible to do everything that we could do with a dialog box.

	<apex:component >
	<apex:attribute type="String" name="value" description="The message to be displayed to the user"/>
	<apex:attribute type="ApexPages.Action" name="OkAction" description="The action method which needs to be invoked when user press OK button"/>
	<apex:attribute type="Object" name="reRenderOnOK" description="Either a comma seperated Id's list (Or) Apex list of Id's that needs to be rendered after the Ok Action"/>
	<apex:attribute type="ApexPages.Action" name="CancelAction" description="The action method which needs to be invoked when user press OK button"/>
	<apex:attribute type="Object" name="reRenderOnCancel" description="Either a comma seperated Id's list (Or) Apex list of Id's that needs to be rendered after the Cancel Action"/>
	<apex:form>
	<apex:actionFunction name="OK_JS" action="{!OKAction}" reRender="{!reRenderOnOK}"/>
	<apex:actionFunction name="Cancel_JS" action="{!CancelAction}" reRender="{!reRenderOnCancel}"/>
	</apex:form>
	<script>
	if (document.readyState == 'complete') {
	if(window.confirm('{!value}')) {
	OK_JS();
	} else {
	Cancel_JS();
	}
	}
	</script>
	</apex:component>

view raw gistfile1.txt hosted with ❤ by GitHub

	<apex:page >
	<apex:form >
	<!--
	Show Box After an Action from Button, Link, JS Action Function call, etc
	All you need to do is, add the Id of the dialog box in the reRender list.
	-->
	<apex:commandButton value="Show DialogBox" reRender="MyDlgBox"/>
	</apex:form>
	<c:dialogbox value="Would you like to show Hidden Password ?" id="MyDlgBox"
	reRenderOnOK="MyPasswordBox"/>
	<c:alertbox value="Password is **Password1**" id="MyPasswordBox"/>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

After clicking 'Show Dialogbox'

After clicking 'OK'

Walk through in a video ?