Dynamics CRM 2011 Xrm.Page Object Model Learning Resources and Examples – Part 1

Vincent Zhong, 10 July 2012

I have been working with Microsoft Dynamics CRM 2011 for more than 6 months now. Same as many people, I started with from customization and JavaScript. And I believe Xrm.Page Object Model is one of the most important new features of Dynamics CRM 2011 and a must have tool for your Dynamics CRM programming toolbox.

*

There are already lots of resources and tutorials showing you how to use this Object Model. The most official ones of course will be the MSDN articles. But as my journey with Dynamics CRM goes, I more and more found those tutorials don’t suit what I need. I think the information and knowledge just too disperse. I can’t seems to have a full picture of what I am learning. So I decided to create my own diagram, which is this one:

You can download the full size diagram here.

As you can see from the Xrm.Page Object Model diagram at the beginning of this post, there are 3 child objects under the Xrm.Page object, which are “Xrm.Page.context”, “Xrm.Page.data.entity” and “Xrm.Page.ui”. The diagram above just for “Xrm.Page.ui”.  I think it is quite self-explained. To use it you just need to look at all the child functions and decide what you want to achieve, then you will know how to use it by following the path.

Here is a quick example:

Say we have an entity called Patient, with the following fields on the form:

The “Title” field is an Option Set with the following Option Set Values:

Let’s say for some reason we need to hide “Professor” from the “Title” dropdown list using JavaScript, we just need to look at my diagram, and we should be able to see the “removeOption” method is the one we are going to use.

First we find out the scheme name of the “Title” field, which is “new_title”

Then we just need to do:

Xrm.Page.ui.controls.get(“new_title”).removeOption(“100000005”);

“new_title” is the scheme name of field that we are going to edit, and “100000005” is the value of the Option Set Item we are going to remove.

And I also added a shortcut on the top left corner of my diagram to remind myself there is a easier way to do this, which is:

Xrm.Page.getControl(“new_title”). removeOption(“100000005”);

Now let’s have a look at the result:

I think that’s what we are look for. So once you done some reading about Xrm.Page Object Model and completed couple of tutorials, this diagram can work as a very handy reference. You don’t need to keep googling how to use a specific function. All you need to do is find the one you need and follow the line.

I will show you some examples next time to demonstrate how to use some less common functions. 

* Image from: http://i.msdn.microsoft.com/dynimg/IC443895.png