Showing a jQuery UI dialog in a CRM 2011 form

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:


Configure the web resource properties:


Here’s the markup for the html web resource:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
        <script src="../ClientGlobalContext.js.aspx" type="text/javascript"/>
        <script src="" 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"/>  
    <!-- 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"/>

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() {

Add a JavaScript web resource to the form:


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) {

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



Comments (0)

Skip to main content