locked
CRM 2011: Showing custom Alerts in notifications area using javascript and CSS RRS feed

  • Question

  • Hi all,

    I was trying to display a custom alert in notification area using javascript and css

    So for example when a field is set to some value the alert is displayed

    My need is the following:

    1 - How to customize the alert using css ? (Text, Background color, etc...);

    2 - How to make i displayed in the form header ?

    Thanks and best regards..

    Sunday, October 14, 2012 12:00 PM

Answers

  • Dear All, Finally I did it :)

    Below are the steps to achieve this:

    1 - Create an HTML webresource with the following code:

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="../Styles/master.css" />
    <style type="text/css">
    div.lead { background-color: "FEEFB3"; width: 100%; height: 2px; padding: 0px }
    </style>
    </head>
    <body>
    <table border="0" cellpadding="1" cellspacing="1" bgcolor="#FEEFB3" BORDERCOLOR="#9F6000">
    <tr>
    <td><img src="/_imgs/error/notif_icn_warn.png" align="middle" /></td>
    <td style="width: 100%; height: 100%;"><span style="color:#9F6000";"><span style="font-size: 13px; "><strong>The Currency of this opportunity has been changed, please go to connections to review the new opportunity<strong></span></span></td>
    </tr>
    </table>
    </body>
    </html>

    and a CSS web resource with the following code:

    body
    {
        font-family: Segoe UI;
        font-size: 11px;
        margin: 0px;
        background-color: #F6F8FA;
        border: 0px;
    }

    2 - Create a new one column tab at the top of the form:

    3 - Insert a one column section under the tab

    4 - Insert the HTML webresource to the section

    VOILA ! You did it :)

    Sunday, October 21, 2012 9:40 AM

All replies

  • Hello,

    Recheck following article - http://rockstarbits.blogspot.com/2011/08/crm-2011-notification-area.html

    Provided article answers your question 2.

    Regarding your question number 1 I believe you will have do it by yourself because for me it is unclear what exactly do you need to change in styles of existing notification mechanisms.


    Freelance Developer for Dynamics CRM 4.0/2011

    Sunday, October 14, 2012 1:25 PM
    Moderator
  • You could try creating your own custom html webresource which would give you the ability to,

    -Customize with CSS

    -You could place it in the header

    The article below explains how to do this & gives an example,

    http://petecrm2011.wordpress.com/2011/12/13/crm-form-message-response-error-warning-area/

     

    John Grace (Founder, North52) Simplifying CRM & xRM development
    How? Check out the Free Community Edition of N52 Formula Manager at www.north52.com

    Sunday, October 14, 2012 1:36 PM
  • This is exactly what I/m trying to do, but I was trying to do it in a suported way, i.e creating a simple css webresource with a yellow background and black text and to make it displayed in the form header when needed
    Sunday, October 14, 2012 1:58 PM
  • I know the article is not exactly what you need but if you create your own custom html web resource & use most of the code in the article you can do this in a 100% supported manner.

    If you have not create a control like this before then review the code from this article & between the 2 articles you can achieve your goal.

    http://mscrmblogger.com/2011/09/20/crm-2011-star-rating-control/

    
    

    John Grace (Founder, North52) Simplifying CRM & xRM development
    How? Check out the Free Community Edition of N52 Formula Manager at www.north52.com

    Sunday, October 14, 2012 2:05 PM
  • The problem with HTML is that it can'tbe called from javascript, that's why I want to use a pure css web resource
    Sunday, October 14, 2012 2:12 PM
  • Hello,

    Recheck following article - http://rockstarbits.blogspot.com/2011/08/crm-2011-notification-area.html

    Provided article answers your question 2.

    Regarding your question number 1 I believe you will have do it by yourself because for me it is unclear what exactly do you need to change in styles of existing notification mechanisms.


    Freelance Developer for Dynamics CRM 4.0/2011


    This is the best approach IMO however may perceived as unsupported.

    Sheila S, MCTS in CRM 2011 Check out my shiny new blog: http://thexrmfactor.azurewebsites.net

    Monday, October 15, 2012 2:24 AM
  • Hi, it seems you should be able to write html to your iframe html document webresource triggered by onchange event on the form to achieve exactly as you wish in a supported way, although more work than re-using NotificationsList.htc.
    Monday, October 15, 2012 8:54 AM
  • I know the article is not exactly what you need but if you create your own custom html web resource & use most of the code in the article you can do this in a 100% supported manner.

    If you have not create a control like this before then review the code from this article & between the 2 articles you can achieve your goal.

    http://mscrmblogger.com/2011/09/20/crm-2011-star-rating-control/

    Here is what I've done till now:

    1 - I've inserted a tab at the top of the form to include an HTML webresource as follow:

    <HTML><HEAD><LINK rel=stylesheet type=text/css href="../Styles/master.css">
    <STYLE type=text/css>
            div.lead
            {
                background-color: #FEEFB3;
                width: 100%;
                height: 2px;
                padding: 0px;
            }
        </STYLE>
    
    <META charset=utf-8></HEAD>
    <BODY contentEditable=true>
    <DIV style="WIDTH: 100%; HEIGHT: 10px" class=lead></DIV></BODY></HTML>

    2 - A css file as follow:

    body
    {
        font-family: Segoe UI;
        font-size: 11px;
        margin: 0px;
        background-color: #F6F8FA;
        border: 0px;
    }

    The form now looks like:


    I need to display a warning like what is shown here

    Please advise..


    Monday, October 15, 2012 12:04 PM
  • So you just have to insert html inside your iframe that you have assigned an id to when inserting it onto the form.

    Use something like:

    var idoc = document.getElementById('myifrm').contentWindow.document;

    var firstDiv = idoc.getElementsByTagName('div')[0];

    firstDiv.innerHTML = [warning html];

    Monday, October 15, 2012 12:18 PM
  • Then get the id from your control name
    var control = Xrm.Page.ui.controls.get('control_name');
    var id      = control.getObject().id;
    var frame   = document.frames[id];
    var idoc = frame.contentWindow.document;
    Monday, October 15, 2012 12:42 PM
  • Hi Mostafa,

    Use the following code in javascript events.

    first,to create customnotifications in crm2011 , we have to find id of Notification area like document.getElementById('crmNotifications'); in javascript.

    var notificationsArea = document.getElementById('crmNotifications');
    
    
    
    To set message in Notification Area,
    
     notificationsArea.AddNotification(notificationid,2, 'source', 'Warning message');
    
    use following integer value as second parameter for respective message
     
        1 = Error
        2 = Warning
        3 = Info
    
    Note : notification id must be unique
    
    
    to Remove Notifications,
    
    
    notificationsArea.SetNotifications(null, null);
    

    example:

    function alert()
    {
        var contactname = Xrm.Page.getAttribute("fullname").getValue();
        var notificationsArea = document.getElementById('crmNotifications');
        if (notificationsArea == null)
        {
            alert('div not found');
            return;
        }
    
        else    {
            notificationsArea.AddNotification('mep2', 2, 'source', 'Warning message');
            notificationsArea.AddNotification('mep3', 3, 'source', 'Info message');
            notificationsArea.AddNotification('mep1', 1, 'source', 'Critical message');
          }
        }

    i hope this would be helpful to you.


    Wednesday, October 17, 2012 11:30 AM
  • Dear All, Finally I did it :)

    Below are the steps to achieve this:

    1 - Create an HTML webresource with the following code:

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="../Styles/master.css" />
    <style type="text/css">
    div.lead { background-color: "FEEFB3"; width: 100%; height: 2px; padding: 0px }
    </style>
    </head>
    <body>
    <table border="0" cellpadding="1" cellspacing="1" bgcolor="#FEEFB3" BORDERCOLOR="#9F6000">
    <tr>
    <td><img src="/_imgs/error/notif_icn_warn.png" align="middle" /></td>
    <td style="width: 100%; height: 100%;"><span style="color:#9F6000";"><span style="font-size: 13px; "><strong>The Currency of this opportunity has been changed, please go to connections to review the new opportunity<strong></span></span></td>
    </tr>
    </table>
    </body>
    </html>

    and a CSS web resource with the following code:

    body
    {
        font-family: Segoe UI;
        font-size: 11px;
        margin: 0px;
        background-color: #F6F8FA;
        border: 0px;
    }

    2 - Create a new one column tab at the top of the form:

    3 - Insert a one column section under the tab

    4 - Insert the HTML webresource to the section

    VOILA ! You did it :)

    Sunday, October 21, 2012 9:40 AM