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


    $("#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:



Leave a Reply

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

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

Facebook photo

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

Connecting to %s