Our Blog

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

Laura

Laura

40 Comments

  1. Brian Sloan

    Brian Sloan

    Is there a way to append an image to the alert? Such as a stop sign or something?
  2. Steve Walker
    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>
  3. The Scarecrow

    The Scarecrow

    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>
  4. sven
    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
  5. Todd
    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?
  6. Todd
    btw sven - make sure to use single quotes (') in the onsubmit - not double quotes.
  7. Laura
    sven,
    Your code is fine, just do
    _root.submitForm();

    instead of just submitForm();
  8. Steve Walker
    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 &quot;Show Definition&quot; you will see the problem. Not all the items have definitions so try a few to see the difference. Thanks
  9. Wayne
    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.
  10. Wraith-CF

    Wraith-CF

    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?
  11. Laura
    Steve and Wraith,
    Try adding
    myAlert.contentAlert.width = 290 (a number slightly less than the alert width)
  12. Steve Walker

    Steve Walker

    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
  13. Laura
    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.
    :)
  14. The alert appears but the action page loads (and the record is deleted) regardess of any input to the &quot;ok&quot; or &quot;cancel&quot; on the popup box. Any ideas?
  15. Raúl
    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
  16. Raúl
    Hmmm actually the thing that doesnt get passed is the boton object to the page... any way to send it??
  17. Neil Bailey

    Neil Bailey

    Is there any way to control WHERE the alert box is actually displayed? I have played with the x &amp; 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!
  18. Kiley
    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 &quot;form.button&quot; 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 &quot;button&quot; 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?
  19. Mike Kaminsky (ICF Consulting)

    Mike Kaminsky (ICF Consulting)

    "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.
  20. jas48324

    jas48324

    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.)
  21. Gerry Fontaine

    Gerry Fontaine

    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);
  22. Rick
    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! :-)
  23. Rick
    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.
  24. scot
    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>
  25. Neil
    Scot,

    Why on EARTH are you using cfSaveContent? Why not just write the function and pass in the value?
  26. George
    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
  27. Michael White

    Michael White

    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...
  28. Laura
    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()
  29. Michael White

    Michael White

    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?
  30. Michael White

    Michael White

    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.
  31. Michael White

    Michael White

    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.
  32. Ed
    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
  33. Jon
    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.
  34. Maggie

    Maggie

    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".
  35. Simon
    Hi all, like jon in post #45 Im struggling to position my alert in my cfform :0(

    Does anyone have any ideas ?
  36. Mallek
    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
  37. Alvarez

    Alvarez

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