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">
<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:
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:
Gold Coast 