I was asked how to implement the following scenario in a CRM 2011 form (paraphrased):

  • Show an alert notification indicator in the header
  • When the user to click the notification indicator, show a dialog with the details of the alert

Here’s how I did it.  The code below assumes you’ve already wired up jQuery and jQuery UI to the form.

Add an html web resource to the header:

image

Configure the web resource properties:

imageimage

Here’s the markup for the html web resource:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <script src="../ClientGlobalContext.js.aspx" type="text/javascript"/>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"/>
        <script src="scripts/dialogfromheader.htm.js" type="text/javascript"/>
        
        <!-- TODO: move the needed styles into our own stylesheet.  The CRM team doesn't support referencing their styles because they can change -->
        <link href="/_common/styles/fonts.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>  
        <link href="/_common/styles/global.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>  
        <link href="/_common/styles/select.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>  
    </head>
    <!-- TODO: move the style info into our own stylesheet. -->
    <body style="background-color: rgb(246, 248, 250); border-width: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-left: 0px; padding-top: 0px;">
        <img id="alert" src="images/alert_icon_red.jpg" alt="alert icon"
             width="25px" height="25px" style="cursor:pointer"/>
    </body>
</html>

Here’s the code for the referenced dialogfromheader.htm.js script file:

$(document).ready(function () {
    // Execute an OData ajax query to determine if there are alert records (stored in a related entity)
    // You probably need to pass entity id to the page from the CRM form to compose a proper query
    // If alerts exist show the alert UI, otherwise do nothing
    // I am not doing that here, but it should be obvious enough
 
    // If you have results, build up the html to put in the dialog to represent the alerts information
    var htmlForTheDialog = "<p>PLACED HOLDER FOR THE ALERT HTML</p>";
 
    $("#alert").click(function() {
        window.parent.dkdt_showDialog(htmlForTheDialog);
    });
});

Add a JavaScript web resource to the form:

image

Here’s the code for the referenced dialogsetup.js script file:

function dkdt_wireupDialog() {
    // NOTE: This clearly deviates from the 
    // "don't touch the HTML generated by the CRM UI" guidance from the SDK
    // Typically, I urge people not to do this because it is technically unsupported.
    // However, in this case we're not really modifying the generated UI.
    // We are just adding a div to the body of the html.
    // I'm accepting that I am doing something that's unsupported, but still relatively low risk of side effects
    $("body").append("<div id='dkdt_dialog' title='I am a dialog'></div>");
    $("#dkdt_dialog").dialog({ autoOpen: false, position: "top" });
}
 
function dkdt_showDialog(dialogHtml) {
    $("#dkdt_dialog").html(dialogHtml);
    $("#dkdt_dialog").dialog("open");
}

Now, when an end user clicks on the alert icon they will see the alert details:

image

@devkeydet