Customizing the look of a cfform alert

Jun
02

Customizing the look of a cfform alert

40 comments Posted by: Laura

As a follow up from the post Alert box for cfform, we would like to show how to change the appearance and size of an alert popup.

First, we will create the alert using a different technique that will give us a pointer to the created alert so that we can change the size. All the other style properties can be set globally and will apply to all alerts, no matter how they were created (either by Alert.show() or by alert()).

var myAlert = mx.controls.Alert.show("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, this, myClickHandler);

after that, we can change the size of the window by

myAlert.width = 300;
myAlert.height = 150;

Note that setting the width and height may create a scrollbar if the text is too long.

Or change a specific css property:

myAlert.setStyle("fontStyle", "italic");

We can also change other properties of all alerts before they are created:

//we can set any css value such as fontWeight or fontSize
_global.styles.Alert.setStyle("color", 0xFF0000);

//to change the labels of the buttons:
mx.controls.Alert.cancelLabel = "Don't!";
mx.controls.Alert.yesLabel = "Sure";

//to change the size of the buttons:

mx.controls.Alert.buttonWidth = 100;

//set the style of the title only with a named style declaration
mx.controls.Alert.titleStyleDeclaration = "windowStyles";

Live Example

Donload the source for the complete code

Update: See follow up post

Category: CFForm | ColdFusion |

40 Comments so far

Write yours

1. Steve Walker wrote on June 02, 2005 at 9:51 AM

This is great and so simple. Thank you.

2. Brian Sloan wrote on June 02, 2005 at 10:26 AM

Is there a way to append an image to the alert? Such as a stop sign or something?

3. Steve Walker wrote on June 02, 2005 at 10:50 AM

Your example works get, but mine has a problem. Any idea why the width of the text area in the alert box might be dictated by the length of the title or if the title is short by the button? In all instances, it is doubling the width.

Here is my version of your code:

<cfsavecontent variable="showAlert">

//set the style of the title only with a named style declaration
   mx.controls.Alert.titleStyleDeclaration = "windowStyles";
   mx.controls.Alert.cancelLabel = " Close ";
   
var myAlert = mx.controls.Alert.show
      (dc_grid.selectedItem.ecri_definition, dc_grid.selectedItem.dc_nomenclature, mx.controls.Alert.CANCEL);
      
//change this alert's style only   
myAlert.width = 500;
myAlert.height = 350;
myAlert.setStyle("fontStyle", "italic"); 
myAlert.setStyle("cornerRadius","0");
myAlert.setStyle("fontSize", "11"); 
</cfsavecontent>

4. The Scarecrow wrote on June 02, 2005 at 8:19 PM

Hi All,
Great site with plenty of insperation.

Not sure if you know but I thought I would try the following and it worked. I downloaded the source and moved the as code to an as file to be included.

<cfsavecontent variable="showAlert">
#include "showAlert.as"
</cfsavecontent>

5. Sven Delporte wrote on June 03, 2005 at 4:51 AM

this is great thx

6. sven wrote on June 03, 2005 at 5:40 AM

i have a question about the submitForm()

this doesn't work with me

i use this code.

<cfsavecontent variable="showAlert">
   var myClickHandler = function (evt){
      if (evt.detail == mx.controls.Alert.OK){
         submitForm()
      }
   }
   alert("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>

<cfform name="myform" height="200" width="400" format="Flash" action="test.cfm">
   <cfformgroup type="hbox">
      <cfinput type="Button" name="myBtn" onClick="#showAlert#" value="Show Alert" />           
   </cfformgroup>
</cfform>

but the form doesn't submit or doesn't generate an error

thx for the help

7. Todd wrote on June 03, 2005 at 7:54 AM

rather then reference the cfsavecontent, copy and paste your entire text into the onsubmit of your cfform as follows:

<cfform onsubmit="
var turd = something;
var furguson = somethingelse;

if (turd <> furguson) { alert(Turd must equal Furguson. Please Correct.', 'Warning', mx.controls.Alert.OK); return false;}">

That will prevent the form from submitting until turd = furguson.

Now onto my question - Laura - Can you help me figure out how to add a .wav file as a notifier when the alert box is triggered?

8. Todd wrote on June 03, 2005 at 7:55 AM

btw sven - make sure to use single quotes (') in the onsubmit - not double quotes.

9. Laura wrote on June 03, 2005 at 5:01 PM

sven,
Your code is fine, just do
_root.submitForm();

instead of just submitForm();

10. sven wrote on June 05, 2005 at 11:37 PM

thanks Laura,

why didn't i came up with that

11. Steve Walker wrote on June 06, 2005 at 3:59 PM

Any idea why the width of the text area in the box would be dictated by the length of the title? I have looked in the Flex documentation and cannot find anything. If you go to http://www.clinfrastructure.com/clineng/maintenance/dcodes/index.cfm, select an item in the grid, and then "Show Definition" you will see the problem. Not all the items have definitions so try a few to see the difference. Thanks

12. Wayne wrote on June 13, 2005 at 12:00 AM

Hi there guys,

Thank you for all your great work. I have a question? Is it possible to import a full actionscript.as page into a cf flash page. So that you dont have to have cfsavecontent for each component. I would like some components to be disabled when the page loads etc.

13. Wraith-CF wrote on August 26, 2005 at 12:12 PM

I am also having a problem with the .width not working. In my case the text is not spanning the full width that i set my alert box to be. I set my width to 500 and it is much wider than the text, but the text still continues to wrap.

Any ideas?

14. Laura wrote on August 26, 2005 at 1:23 PM

Steve and Wraith,
Try adding
myAlert.contentAlert.width = 290 (a number slightly less than the alert width)

15. Steve Walker wrote on August 26, 2005 at 3:46 PM

Laura,

Thank you. Although it doen't completely solve my problem it is much better. Out curiosity, where did you find the contentWidth property. I have looked in Flex and AS documentation with no luck.

Steve

16. Laura wrote on August 31, 2005 at 2:36 PM

Steve,
Yes, it is not in the docs and it took me a while to find. I went over all the properties to see if I could find the reason why the content wouldn't span the whole window.
But you know: undocumented = unsupported and subject to change.
:)

17. Mary wrote on September 08, 2005 at 1:43 PM

The alert appears but the action page loads (and the record is deleted) regardess of any input to the "ok" or "cancel" on the popup box. Any ideas?

18. Raúl wrote on October 29, 2005 at 11:56 PM

Hmmm I just found out by this page about the "_root.submitForm();" but that doesn't seem to work when I dont use an action="processForm.cfm" which I dont like.. I like to use <cfif isDefined("btn_submit")> and then place all my coding... that _root.submitForm(); doesn't seem to send the form object to the page... any ideas? thanks

19. Raúl wrote on October 30, 2005 at 12:02 AM

Hmmm actually the thing that doesnt get passed is the boton object to the page... any way to send it??

20. Neil Bailey wrote on November 18, 2005 at 9:39 AM

Is there any way to control WHERE the alert box is actually displayed? I have played with the x & y properties, as well as the move() method, with no success whatsoever.

Has anyone managed to do this successfully? Or am I the only bonehead actually making the attempt?

Thanks!

21. Kiley wrote on November 21, 2005 at 5:46 PM

Has anyone found a way to pass the button object to the page? I want to do the same thing as Mary does (I think): post to the same page and test if "form.button" exists. form.button won't work but something like that. You can pass form.submit but it will ignore the actionscript. If you use the "button" type input, you can't tell what was pressed (say you had a save button and a delete button).

How can you differentiate which button was pressed?

22. Mike Kaminsky (ICF Consulting) wrote on December 19, 2005 at 11:01 AM

"Is there any way to control WHERE the alert box is actually displayed? I have played with the x & y properties, as well as the move() method, with no success whatsoever."

Yes there is ...

<cffunction name="ConfirmSubmit" returnType="string" output="true">
  <cfargument name="myCanvas" type="string" required="yes" hint="Area to center alert message.">

  <cfsavecontent variable="myScript" >
  var myClickHandler = function ( event )
  {
    if (event.detail == mx.controls.Alert.OK)
    {
      _root.submitForm(); 
    }
  }

  var myAlert = mx.controls.Alert.show( "Are you sure you are ready to submit this survey?", "WARNING",
                mx.controls.Alert.OK | mx.controls.Alert.CANCEL, #ARGUMENTS.myCanvas#, myClickHandler, "" );
  </cfsavecontent> 

  <cfreturn myScript> 
</cffunction>

Where "myCanvas" is the object to center within. By default, the alert will center in the middle of the cfform object. But, as demonstrated in this function, if you pass the id of a specific component (such as the name of a particular grid or vbox or tabnavigator), it will center in that area instead.

23. jas48324 wrote on January 17, 2006 at 6:40 AM

I know how to change the styling of the alert box by taking advantage of cfformitem type script:

_global.styles.Alert.setStyle("color", 0x9C0000);

But how can I use the same procedure to control the validation popups that are generated when requiring fields and using onsubmit validation?

I've searched and searched and can't find the appropriate attribute name (ie Alert, ErrorTip, etc.)

24. Gerry Fontaine wrote on February 10, 2006 at 7:10 PM

Here is sample code to move alert message in actionsript.

import mx.controls.Alert;
var msg:Alert;
msg=Alert.show("Message", "Title");
msg.move(285,100);

25. Rick wrote on March 15, 2006 at 9:29 AM

How do you create a named style declaration that can be used by the titleStyleDeclaration property of the alert box? Every place I've looked explains how to do it outside of the limited actionscript that is supported within cfform. For example:

import mx.styles.CSSStyleDeclaration;
var titleStyles = new CSSStyleDeclaration();
titleStyles.setStyle("titleBackground", "0x0066cc");

However, it's obvious that you can't use "import" and you can't use "new". So, for those of us who may have missed it somewhere, could you explain how to create a style that can be used to skin an alert box title bar? Thanks! :-)

26. Rick wrote on March 17, 2006 at 9:03 AM

Well, it took me a little playing around and stumbling across a tutorial that shows you <a href="http://cfsilence.com/blog/client/index.cfm/2006/1/4/Embedding-a-Yahoo-Map-in-a-Flash-Form">how to embed a Yahoo Map (new version) within a cfform</a>. He found that at least in the current version of cfform's AS implementation, the keyword "new" is allowable within an external .as file. You can't create the necessary CSS variables outside of the function scope so inside my external .as file I created the following function:

function loadCSSStyle():Void {
   // Create a new Style Declaration
   var styleObj = new mx.styles.CSSStyleDeclaration();
   // Name the new style object
   styleObj.styleName = "newStyle";
   // Add the new style object to the list of global styles
   _global.styles.newStyle = styleObj;
   //Set the style attributes
   styleObj.setStyle("fontWeight","bold");
}

Then I called the loadCSSStyle function from within my onFormLoad function, which IS included in the cfforms <cfformitem type="script"> block. Once the loadCSSStyle function is loaded in this method, the global styles that are assigned within it become available. Through trial and error I found that following way of declaring an alert box allowed me to apply the new global styles.

var myAlert = mx.controls.Alert;
myAlert.titleStyleDeclaration = "newStyle";
myAlert.show("Are you sure you want to add an action?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, _root.oActionPanel, confirm);

As a result I am now able to apply custom created styles to my alert boxes, and I'm sure just about anything else that you can assign a style declaration to.

Hopefully this will help anybody else who runs into this issue and in addition, hopefully Macromedia / Adobe won't remove this "exploit" in another revision as it'll break the solution. Then it'll boil down to having to run an external .swf hack to get this functionality. I honestly don't see why they have a problem with us being able to skin an alert box within cfform, I mean, you can pretty much skin everything else.

27. scot wrote on April 04, 2006 at 11:25 AM

I'm trying to get the contents of myID inside the function and if statement. Man it is killing me. Any advise?

<cfsavecontent variable="callingCFC">
var myID = id.text;

var myObj = {};

var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
* HERE *
}
}
alert("Are you sure you want to remove this record?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);

</cfsavecontent>

28. Neil wrote on April 04, 2006 at 11:47 AM

Scot,

Why on EARTH are you using cfSaveContent? Why not just write the function and pass in the value?

29. George wrote on April 27, 2006 at 9:34 PM

How can I pass form field value to the alert box? I'd like to create an alert box when user click on submit button then pop up an alert box display with all data they have just entered.

Thanks,
George

30. Michael White wrote on September 13, 2006 at 8:24 AM

I am trying to combine this article with another and I'm getting a weird alert box that pops up on top of my custom alert that only says "_level0.depthChild3" with an "ok" button I can click through it and continue on. I'm not sure what's causing this extra alert and how to get rid of it. here is the code i'm using:

<cfformitem type="script">
      function validateUserLogin() {
       var UserLogin = UserLogin;
       var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://affinity.cove.com/flashservices/gateway/";);
       var myService:mx.remoting.NetServiceProxy;
         var myAlert = mx.controls.Alert.show('UserLogin ' + UserLogin.text + ' is already taken! Please select an alternate UserLogin.','Duplicate User Name Error'); 
       var responseHandler = {};
       
       responseHandler.onResult = function( results: Object ):Void { 
           if (results == 0) {
              _root.tnav.selectedIndex=0;
              UserLogin.setFocus();
                alert(myAlert);
              return;
           }
           _root.submitForm();
       }

         myAlert.setStyle("themeColor", "0x7979AC");
         myAlert.setStyle("headerColors", "0x9999CC","0xADADDF");
         myAlert.setStyle("backgroundColor", "0xF5F5F5");
         myAlert.setStyle("fontSize", "12");
         myAlert.setStyle("panelBorderStyle","default");
       
       responseHandler.onStatus = function( stat: Object ):Void { alert('Error while calling cfc:' + stat.description); }
       myService = connection.getService("components.lookup", responseHandler );
       myService.checkUserLogin(UserLogin.text);
   }
   </cfformitem>

I'm sure it has something to do with the way i'm calling the alert but I have no idea what I'm doing...

31. Laura wrote on September 16, 2006 at 6:55 PM

Michael,
The problem you have is that you do:
var myAlert = mx.controls.Alert.show('blah');

and then later you do:
alert(myAlert);

The alert() function expects a string, not an instance of an alert, and that is why is trying to convert this instance into its string representation.

mx.controls.Alert.show() does the same thing as alert(). Use either one of them inside the onResult function. If you want to customize it, do everything inside the function and use show()

32. Michael White wrote on November 10, 2006 at 11:06 AM

Laura, are you saying I can leave the:
var myAlert = mx.controls.Alert.show('blah')
and then later use
show(myAlert); instead of alert(myAlert);
or are both illegal?

33. Michael White wrote on November 10, 2006 at 11:09 AM

ok, I've transferred all this to a cfformitem script. When I click the "Yes" button to confirm the action, how to I call another function in the script. the function I want to call is a remoting function that I based on your real estate app so it has a separate handler routine and remoting initialization routine.

34. Michael White wrote on November 10, 2006 at 12:54 PM

I think I got #41 figured out. I used _root.functionName(); but I thought I had tried that already and it didn't work (or it took forever to work) but this time it seemed to go fine.

35. Ed wrote on January 29, 2007 at 7:53 AM

Hi Guys,
I was wondering if anyone has an answer for changing the style of the cold fusion generated errors? I have looked as has jas48324 in his post to try and find the right handle to these errors but have not been able to find anything. I am trying to control the color and header of the automatic alert boxes that pop up in white with no header upon a coldfusion validation error. Perhaps this is easy but I am just not getting it.
Any help would be greatly appreciated and as usual, You guys contiue to ROCK!!!
Thanks in advance,
Ed

36. Jon wrote on January 30, 2007 at 1:13 PM

I know that this is a repeat question, but I cannot get it to work properly.

Is there any way to control WHERE the alert box is actually displayed? I have played with the x and y properties, as well as the move() method, with no success whatsoever.

I have a form with 5 CFFORMGROUP Type=Panel. Inside of each panel is a grid. A user can remove rows from each grid seperately. I cannot get the Alert PopUp to occur in the correct Panel.

I have used reply 28 by Mike Kaminsky posted on December 19, 2005 at 11:01 AM, but the Alert only shows in the center of my first Panel CFFORMGROUP.

Any ideas?

Thank you in advance.

37. Maggie wrote on February 05, 2007 at 2:41 PM

Hello,

Just wondering if there is an easy way to close the alert box by itself, using alert.hide() or something. I would like the alert box to close on it's own after a few seconds, without the user having to click "ok".

38. Simon wrote on February 26, 2007 at 8:16 AM

Hi all, like jon in post #45 Im struggling to position my alert in my cfform :0(

Does anyone have any ideas ?

39. Mallek wrote on March 11, 2007 at 2:07 PM

I am having problems passing the button name with the form is there a way to create a field in actionscript with the name delete as my action page (that the form is submited to) looks for the button name to execute the proper action

add
update
or delete

since i am trying to confirm the delete I changed the type from submit to button to fire off the actionscript without submitting the form but the delete button field is not passed with the form.

Thanks in advance,

Mallek

40. Alvarez wrote on July 16, 2008 at 9:07 AM

Is there a way to customize the look of the alert box for the required field alerts.

Leave your comment

Comment etiquette: As a gesture to those subscribed to this post, please keep your comments relevant to the post.

Preview:

Refresh Preview

1. You wrote on

AsFusion