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:

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("
"
);

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

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s