Visualforce - Beyond Basics Series 34 - Build own Alert Box

What is alert box ?

Alert box is a small container which displays user message in blocking mode that means user can't do any other action in the window.

Is there any standard way of doing it ?

As of now, there's no standard component to display the alert box in the page.

How to build a custom one ?

Traditionally, developers use window.alert function to display the box in the page. This is done different places in the project & it looks very cluttered to go through the code.

What are the alternatives ?

Some developers like to use some dialog box from javascript libraries like Jquery, Backbone in blocking mode. Though, it will give the necessary functionality, it's an additional overhead in the page.

Where is the code ?

	<apex:component >
	<apex:attribute type="String" name="value" description="The message to be displayed to the user"/>
	<script>
	if (document.readyState == 'complete') {
	window.alert('{!value}');
	}
	</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 alert box in the reRender list.
	-->
	<apex:commandButton value="Show AlertBox1" reRender="MyAlertBox1"/>
	<apex:commandButton value="Show AlertBox2" reRender="MyAlertBox2"/>
	</apex:form>
	<c:alertBox value="Message1 from AlertBox1" id="MyAlertBox1"/>
	<c:alertBox value="Message2 from AlertBox2" id="MyAlertBox2"/>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any screenshots ?

Walk through in a video ?