HOWTO: Create nice looking popup message boxes in Sugar

sugarcrmdevelopers —  March 18, 2011 — 37 Comments

The javascript functions alert() and confirm() are probably the most popular ways to flash a dialog box at a user. The only problem is that the boxes that display are quite ugly, as they take on the display theme of the browser and OS and not of your application. Fortunately, if you are developing customizations or add-ons for SugarCRM, you can use some javascript functions we’ve developed to create more native looking popup widgets.

The method is called YAHOO.SUGAR.MessageBox.show(), and is available anywhere inside Sugar ( provided the library is loaded, see note below ). Take a look at some of the examples listed below.

This method is based off of the YUI 2 SimpleDialog component, and many of the properties that can be set on it can also be passed to this component as well.

Edit 3/22/2011. Adding picture of the nice looking pop-up in action

Edit 4/10/2011. It appears that the javascript libraries needed are loading in certain situations in the application, so you should load the include/javascript/sugar_grp_yui_widgets.js script before using any of these javascript calls. Sorry for the confusion.

Edit 6/8/2012. If you are using Sugar 6.4 or later, the include/javascript/sugar_grp_yui_widgets.js file is now located at custom/include/javascript/sugar_grp_yui_widgets.js. Sorry for all the confusion.

37 responses to HOWTO: Create nice looking popup message boxes in Sugar

  1. 

    Can you post a picture of one of these good looking pop-ups in action?

  2. 

    Added! Thanks for the recommendation Clint :-).

  3. 

    Hi John:
    Thanks for the information. But is include/javascript/sugar_grp_yui_widgets.js always loaded or do we have to specify that it needs to be loaded?
    Thanks,

    Jeff

  4. 

    Great article.  I just want to mention that if if you are using Smarty as your template engine and you are adding this script directly to your template, then you need to make sure that the Smarty delimiter, {, will not conflict with the javascript.

  5. 

    is there a 6.4 or 6.5 version of this?

  6. 

    Hi to All,

    I am using sugarcrm 6.4 but geting error.
    Error: YAHOO.SUGAR is undefined

    I am  calling this function.
    YAHOO.SUGAR.MessageBox.show({msg: ‘Test box’, title:’Hrishikesh’});in my custom js.

    I am using this in subpanel of one of custom module detail view.D

    o I have to include some other helping JS file also?

    Second thing, how can is include, include/javascript/sugar_grp_yui_widgets.js?? And where should I include this?

    Waiting for response.

    • 

      SugarCRM made some changes in 6.4 and 6.5 that doesn’t have the YAHOO.SUGAR available everywhere you have to tell the specific view to load include/javascript/sugar_grp_yui_widgets.js

      • 

        Thanks Jeff.

        But include/javascript/sugar_grp_yui_widgets.js not exists in my sugarcrm (version 6.4 CE). But I  found, there is a file with same name in cache (path: cache/include/javascript/sugar_grp_yui_widgets.js). Should I include this cache file or there some other file? 

        I want to include this file in custom//metadata/detailviewdefs.php. I have also included the jquery 1.7 libray file in this detailviewdefs.php. Will it create any problem in future like conflict or something else?

        Waiting for Response.

        Hrishikesh Mishra

        • 

          Apparently the sugar_grp_yui_widgets.js has moved in SugarCRM 6.4. @jmertic:disqus care to reply? As jquery you should be able to also include for this particular screen or you can get it to load globally.  I believe that jquery will be part of the product in 6.6

  7. 
    facetoface101 July 4, 2012 at 11:24 am

    Hi, 
    I am using 6.4 CE but cannot get the popup to show – 

    I have included: 
     at the top of my custom .js . Along with:
     YAHOO.SUGAR.MessageBox.show({msg: ‘Test’} ); under a certain condition. However, it never shows…

    Any suggestions?

    • 

       Are you seeing any javascript errors?

      • 
        facetoface101 July 6, 2012 at 2:19 pm

        Didn’t see any errors, I did find that Chrome was blocking pop-ups but this didn’t solve it. Tested on Firefox + IE. I can of course settle for alert() and confirm() but it would be nice to get something that fits the scheme 🙂

  8. 

    Hi john, jeff and friends,
    I need to make the ugly jsAlerts.php popup with “OK” and “Cancel” to the nice looking customizable yahoo box , how it can done ? is it possible , please reply ASAP.
    I am using SugarCE v 6.5.4 .
    Thanks,
    Anes

  9. 

    How can i write a prompt box using this syntax

    • 

      You can only do ‘alert’ dialogs with this out of the box. However, the method is defined in include/javascript/include.js, so you could extend it to support this sort of dialog as well.

  10. 

    Is this only for simple messages? How can I have a new window (popup window) with more specialized code (like upload files to a server)?

  11. 

    I’m guessing this is outdated? I need to do a popup modal/confirmation type box and I am not sure if I need to use my own library or if something is already being loaded into the page that I can and should tap into, any ideas anyone?

  12. 

    Hello , I have this and I want to get the result value from YAHOO.SUGAR.MessageBox.show:

    Here my code

    function check_form(formname)
    {
    bValid = false;
    if(typeof(siw)!=’undefined’&&siw&&typeof(siw.selectingSomething)!=’undefined’&&siw.selectingSomething) return false;
    bValid = validate_form(formname,”);
    var result;
    if(!bValid) return false;
    YAHOO.SUGAR.MessageBox.show({msg: ‘hello’, title: ‘warning’, type: ‘confirm’, width: 550,close: false,fn: function(confirm) {
    if (confirm == ‘yes’) {
    //do something if ‘Yes’ was clicked
    result = true;
    }
    if (confirm == ‘no’) {
    //do something if ‘No’ was clicked
    result = false;
    }
    } });

    return result;
    }

    I got this issue, no value for result

    Help please

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s