Customizing a cfform alert with pictures and sound

I received a lot of questions from the post Customizing the look of a cfform alert so I thought I could respond to all. One problem people were having was that even though the alert was resized, the text inside was not changing accordingly. I do not have a solution for that specifically since it seems to be a bug. But if we only want to show text (and pictures) and an ok button (not a confirmation alert, but a simple alert), then we can use a different technique.


I received a lot of questions from the post Customizing the look of a cfform alert so I thought I could respond to all. One problem people were having was that even though the alert was resized, the text inside was not changing accordingly. I do not have a solution for that specifically since it seems to be a bug. But if we only want to show text (and pictures) and an ok button (not a confirmation alert, but a simple alert), then we can use a different technique.

Yes, there is yet another way to create an alert. In this case we can add html to the message, but bear in mind that it is really buggy! Pictures get cropped, and other strange things happen. In addition, this technique is highly dependant on the way validation errors are shown by CF (with a popup), meaning that if in the next version of ColdFusion that is changed, this code will brake. So you are warned. Now to the code:

Set up the message we want to show first:

var msg = '

Adding some html

';

Since we can write html, we can add a picture or a swf file in the message:

var msg = '';

Then create an object with the alert settings: the title, the message, the width, height, and x and y, the window's initial position.

var alertSettings:Object = {title:'Warning', message: msg, width:350, x: 60, y: 10, headerHeight: 27}

We then show it, making sure we use errorpopup as the alert variable name, otherwise we will not be able to close it.

errorpopup = mx.managers.PopUpManager.createPopUp(this, FormErrorException, true, alertSettings);

then center it if you want:

errorpopup.centerPopUp(this);

Hack level: Very high. Might very likely not be available in future versions

Live Example

Download the source for the complete code