Dashboards in Dynamics CRM 2011 are a great way to visualize data. Did you know that they can also be used to view pretty much any other web content?
I’ve recently had a requirement to add the CRM Calendar to a dashboard. I could have simply added a list of appointment activities to the dashboard, but the actual calendar control looks a lot nicer.
To do this, first we need to get the URL of the Calendar page. Load up the IE developer tools (F12 in IE9) and start a profiler. Now navigate to the calendar in CRM and click on ‘Month’, ‘Week’ and ‘Day’ (we want the URL for each page).
Stop the profiler and take a look at the results
As you can see, we’ve got the URLs of the 3 calendar views needed for the dashboard. The URL seems to contain a parameter for the current date in ISO8601 format (YYYY-MM-DDThh:mm:ss). We’ll have to deal with that inside of our web resource.
Now we need to create the web resource which we’ll add to the dashboard. We’ll create a simple HTML page with an iframe containing the calendar. We’ll also provide some simple navigation to choose between the daily, weekly or monthy calendars.
Edit: Some of the onclick code in the links is refusing to display properly below. You can either copy and paste it using the ‘Copy to clipboard’ link or view the real code here.
Edit 2: It’s been pointed out in the comments that some people are getting javascript errors. If you get them also, try this version of the web resource.
<html>
<head>
<script type="text/javascript">
function ISODateString(d){
function pad(n){return n<10 ? '0'+n : n}
return d.getUTCFullYear()+'-'
+ pad(d.getUTCMonth()+1)+'-'
+ pad(d.getUTCDate())+'T'
+ pad(d.getUTCHours())+':'
+ pad(d.getUTCMinutes())+':'
+ pad(d.getUTCSeconds())+'Z'}
function loadCal(calType){
var today = new Date();
var formattedDate = ISODateString(today);
var objFrame = document.getElementById("calendar_iframe");
var calSource = "/calendar/" + calType.toString() +".aspx?date=" + formattedDate;
objFrame.src=calSource;
}
</script>
</head>
<body "loadCal('Month')">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<a href="#">Day </a>
<a href="#">Week </a>
<a href="#">Month</a>
<td>
</td>
</tr>
<tr id="topTR" >
<td>
<table class="ms-crm-Home-Cal-Body" width="100%" height="100%" style="table-layout:fixed;" cellspacing="0" cellpadding="0">
<col /><col width="0" />
<tr height="0" class="ms-crm-Home-Cal-Header">
<td class="ms-crm-Home-Cal-Header ms-crm-Bold-Header"><span id="CalendarTitle"></span></td>
<td class="ms-crm-Home-Cal-Refresh"></td>
</tr>
<tr height="100%">
<td colspan="2">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<col /><col width="0" />
<tr>
<td class="ms-crm-Home-Cal-View">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
</tr>
</table>
</td>
<td style="padding:0px;" width="0" align="center" valign="top">
<div id="MiniCalendar" class="ms-crm-Home-Cal-MiniCal" style="display: none"></div>
<br />
<div class="ms-crm-Home-Cal-Views-Title ms-crm-Bold-Header" style="display: none"></div>
<table id="CalendarViews" class="ms-crm-Home-Cal-Views-Items" width="0%" cellspacing="0" cellpadding="0">
<tr id="MonthView">
<td class="ms-crm-CalendarViews"><span class="ms-crm-AlignTo16Image"></span></td>
</tr>
<tr id="WeekView">
<td class="ms-crm-CalendarViews"><span class="ms-crm-AlignTo16Image"></span></td>
</tr>
<tr id="DayView">
<td class="ms-crm-CalendarViews"><span class="ms-crm-AlignTo16Image"></span></td>
</tr>
</table>
<br />
<div id="CreateNewArea" class="ms-crm-Home-Cal-CreateNew-Title ms-crm-Bold-Header" style="display: none">
<table width="100%" cellspacing="1" cellpadding="0" class="ms-crm-Home-Cal-CreateNew-Items">
<tr id="CreateAppointmentRow">
<td class="ms-crm-CalendarViews"><nobr></nobr></td>
</tr>
<tr>
<td class="ms-crm-CalendarViews"><nobr></nobr></td>
</tr>
</table>
</div>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The loadCal() JavaScript function allows us to pass in the calendar type and changes the iframe according to the selected type. When the dashboard first loads, the monthly calendar will be displayed. 3 links appear above the iframe allowing the user to choose which calendar they want to view.
The ISODateString() function has been borrowed from Mozilla in order to get the date into the correct format.
Now we need to add our HTML page to the web resource. Edit your dashboard and click on Insert ‘Web Resource’
Now click on the lookup and select ‘New’ from the popup window. Give your resource a name, an optional description and a type of ‘Web Page (html)’.
Click on the Upload File ‘Browse’ button and select the HTML file which we’ve just created.
Click on ‘Save’ and then ‘Preview’. You should now see a working preview of the calendar page.
Close the preview and click on Publish. Once the Publish has completed, just Save and Close the window.
Now just fill in the rest of the web resource form and click Ok
Clik here to view.
You should now be back at the Dashboard designer where you can position and resize your web resource as required.
Save and Close when done and take a look at your new dashboard!
As you can see, using the IE developer tools, some simple HTML and JavaScript, you can add a number of items to a dashboard which may not be obvious when using the dashboard designer.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
