A Visualforce Component that Beautifies actionStatus!

I have always liked to be able to have one of those fancy AJAX "loading..." messages for my AJAX postback calls. The background screen grays out, all components (textboxes, buttons, etc) become disabled and a little box says "Working on your request..." or "Running..." with that famous GIF animator of a spinning wheel and hey, I finally did it!

In this article I will show how to design the HTML to place the loading message into the center of the screen and gray out the background and the whole nine yards...

In this example I will first create a Visualforce component so that potentially I could use my beautiful "loading..." message on every page I desire, furthermore by forming it as a Component I can parameterize the look and feel of it and easily deploy it into different pages with different coloring styles.

In order to create a new Component click on the "setup" link on the right top corner of the page and find "Develop" item on the left hand-side and expand it, and click on "Components". Alternatively you can browse:
http://yourinstance.salesforce.ccom/apexcomponent/{YourComponentName}

Below you will be to get the code that goes into the component. The HTML code includes two Div elements, one for the gray background and the other for the actual box that the message is shown in and a javascript peice that adjusts the sizes of the div element based on the client browser's resolution and avialable place.

<apex:component >
<!-- Attribute Definitions -->
<apex:attribute name="BorderColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="Width" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="Height" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BorderSize" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="ImageUrl" type="String" required="false" description=""></apex:attribute>
<apex:attribute name="Message" type="String" required="false" description=""></apex:attribute>
<apex:attribute name="messageStyle" type="String" required="false" description="Message inline style"></apex:attribute>
<apex:attribute name="BorderStyle" type="String" required="false" description="Message box border style: solid, outset, inset, etc"></apex:attribute>

<div id="salesforceSource_blurybackground" style="position:absolute; left:1px; top:1px; width:100%; height:100%; text-align:center; vertical-align: middle; background-color: #dcdcdc; opacity:0.6;filter:alpha(opacity=60)">
</div>
<div id="salesFroceSource_StatusBox" style="position:absolute; left:100px; top: 100px;width: {!Width}; height:{!Height}; opacity:1;filter:alpha(opacity=100)">
<table border="{!BorderSize}" cellpadding="0" cellspacing="0" style="border-left-color: {!BorderColor};
border-bottom-color: {!BorderColor}; width: {!Width}; border-top-color: {!BorderColor}; height:{!Height};
border-right-color:{!BorderColor}; border-style:{!BorderStyle}; background-color:{!BackColor};">
<tr>
<td align="left" valign="top">
<table border="0" cellpadding="4" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td style="border-bottom-color:{!BorderColor}; border-bottom-width:1px; border-bottom-style:solid;vertical-align:middle;">
<img src="{!ImageUrl}"/></td>
<td style="border-bottom-color:{!BorderColor}; border-bottom-width:1px; border-bottom-style:solid;vertical-align:middle;{!messageStyle}">
&nbsp;{!Message}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var AgreementForm = document.getElementById("salesforceSource_blurybackground");
AgreementForm.style.height = window.screen.availHeight + "px";
AgreementForm.style.width = window.screen.availWidth + "px";

var ContainerElem = document.getElementById("salesFroceSource_StatusBox");
//ContainerElem.style.display = "block";
AlignToCenter(ContainerElem);

function AlignToCenter(Element)
{
var availableHeight = 0;
var availableWidth = 0;
if (Element.ownerDocument)
{
var docElement = Element.ownerDocument.documentElement;
availableHeight = parseInt(docElement.clientHeight);
if (availableHeight == "NaN") availableHeight = 0;

availableWidth = parseInt(docElement.clientWidth);
if (availableWidth == "NaN") availableWidth = 0;
}

if (availableHeight == 0 || availableHeight == "NaN")
availableHeight = window.screen.availHeight - 200;
if (availableWidth == 0 || availableWidth == "NaN")
availableWidth = window.screen.availWidth - 100;

var msgBoxTop = parseInt((availableHeight - parseInt(Element.clientHeight))/2);
var msgBoxleft = parseInt((availableWidth - parseInt(Element.style.width))/2);

if (msgBoxTop == "NaN" || msgBoxTop == 0)
msgBoxTop = 100;

Element.style.left = msgBoxleft + "px";
Element.style.top = msgBoxTop + "px";
}
</script>
</apex:component>

Pay a good attention to the Attribute section of the of the component those lines will empower you to change the look of the component entirely!

Ok, Now let's see how we can use this component. In Force.com in order to call your component you will need to call it a prefix tag called "c" and don't ask why because that's the way it is.

<apex:actionStatus id="status">
<apex:facet name="start">
<c:enhancedActionStatus BackColor="#efefef" borderColor="#336699" borderSize="3" height="50px" width="120px" ImageUrl="{!$Resource.AjaxAnimation}" Message="Loading..." messageStyle="color:darkred;font-size:11pt;font-weight:bold;"/>
</apex:facet>
</apex:actionStatus>