Retrieve data from OData using jQuery.getJSON and jQuery.map
Dynamics CRM 2011 exposes an OData service that can be used for easy retrieval of data from client side code. Here is an example on how you can use jQuerys $.getJSON to retrieve data, and $.map to map the data to a javascript object.
The goal of this example is to create a "phone-book" of all accounts in the system. This will be presented in a html webresource on a dashboard. It will not have any sorting, paging etc, but this is merely a simple example on how to retrieve data in a clean manner.
First you have to create a htm file and add a reference to jQuery. I have chosen the CDN hosted version in this example, but you could also upload it as a web reference and reference it from there.
<html> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="ClientGlobalContext.js.aspx"></script>
I have also added a reference to ClientGlobalContext.js.aspx. This is included as default in Dynamics CRM 2011 and gives you access a function called GetGlobalContext() that you in turn use, among other things, to get the server url for your CRM installation.
var context = GetGlobalContext(),
serverUrl = context.getServerUrl(),
odataEndpoint = "/XRMServices/2011/OrganizationData.svc";
function Account(data) {
this.name = data.Name;
this.telephone = data.Telephone1;
this.email = data.EMailAddress1;
}
In addition to setting necessary variables we also define a structure for Accounts that we are going to retrieve from CRM.
Now we are ready to retrieve the data:
var query = "/AccountSet?$select=*";
$.getJSON(serverUrl + odataEndpoint + query, function (data) {
// Run when data returns
var accounts = $.map(data.d.results, function (item) { return new Account(item); });
displayAccountList(accounts);
});
TIP: Use this tool ( OData Query Designer ) if you need help building your OData queries.
Note that we use $.map to iterate the result from the query. The alternative to this would be something like this:
var accounts = [];
for (var i = 0; i < data.d.results.length; i++) {
accounts.push(new Account(data.d.results[i]));
}
At my opinion $.map gives a much cleaner code. The use of the helper method $.getJSON also saves allot of code compared to for example using $.ajax directly.
To finish it off we must have some code to inject the result into the DOM:
function displayAccountList(accounts) {
$.each(accounts, function (index, account) {
$("#accountsTable").append("<tr><td>" + account.name + "</td><td>" + account.email + "</td><td>" + account.telephone + "</td></tr>");
});
}
And voila!
The same method for retrieving OData can just as well be used in a script on a form. I have only chosen a html webresource for simplicity.
You can download the a complete example html file and play with it here. Just upload is as a webresource and add it to the dashboard.
CDN hosted JavaScript in Dynamics CRM 2011
Dynamics CRM 2011 introduced a new concept called web resources. This makes life a lot easier for JavaScript developers and makes JavaScript customizations a lot more managable. But what if you want to use the CDN hosted version of a script instead of hosting it yourself, like for example JQuery? From what I can see there is no way to add a reference to a script like this in GUI.
So, we have to look back at some lessons learned from writing JavaScript for Dynamics CRM4. The common way of centralizing JavaScript was to only use the form script to include a JavaScript from a folder on the server. A lot of pople have blogged about this over time. So, even if the problem with centralizing JavaScript is solved in 2011, we can still take adventage of this method for including externally hosted JavaScript. Here is an example on how to include JQuery from Google CDN in your JavaScript:
var scriptElement = document.createElement("<script type=text/javascript>");
scriptElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js";
document.getElementsByTagName("head")[0].insertAdjacentElement("afterBegin", scriptElement);
There is one more thing before you are ready to use JQuery. My experience is that $(document).ready(function() {... simply don't work because the JQuery library ($) isn't ready when the script is first loaded. To work around this, you have to make your code execute after the forms onLoad event.
Add this code to your script, and you should be able to use CDN hosted JQuery:
function Start() {
// Verify that JQuery is loaded
$(document).ready(function () {
alert("JQuery!");
});
}
You can also use this method to make your own CDN hosted JavaScripts, and include them in multiple CRM installations. This way you don't only get one place to change the script for one installation, but one place to change for multiple installations. This does not fit all solutions, but I've found several places where this is very useful!
I have attached a sample that you can download and try on your own. This sample hides all input fields on the form were it's included as a "proof of concept".
