When it comes to CRM 2011, knowing JavaScript opens up a whole new world for what you are able to do. Whether it’s a functional piece like address verification or a cosmetic change like shading the form, it’s all possible through JavaScript. I’ve been to several CRM events and when it comes to JavaScript, it’s always light on the details. So I’ve decided to put together a small series of learning JavaScript for CRM 2011. If right now JavaScript sounds a little frightening, realize that pretty soon it will be just another tool in your arsenal.
Where oh where do we begin? 
First of all, there is more to JavaScript then just JavaScript. With CRM 4, we used crmForm.all.?. With CRM 2011, we use Xrm.Page.?. Those are JavaScript objects or libraries built to make your life easier. When it comes to JavaScript as a whole though, there is jQuery, Dojo, Sencha, Prototype and countless other libraries out there. We are only going to focus on CRM 2011 and basic JavaScript.
In today’s lesson, we’re going to look at the value of an Option Set and toggle a section based on the value. When the Relationship Type is set to Customer, we’re going to show the “Policy Info” section. When the Relationship Type is set to Prospect, we’re going to hide the “Policy Info” section. The purpose for this is to only show to the user what is important for the contact. In the case of a Prospect, they don’t have a policy with us, so it doesn’t provide any value to our users.
Getting Prepared
To start, we need to three different schema names: the field, the tab and the section. One way to get the schema names is to click the “Customize” tab and select “Form”.
Once the Form Editor opens up, select the field you want to use (in our case we’re using a custom field). Once you’ve clicked the field, click on the “Change Properties” button on the ribbon at the top of the screen.
A new window should pop-up. Click on the Details tab, to see the “Name”. This is the schema name.
To find the schema name for the tab, click just to the right of the text. A light blue border should now be on the tab. At this point, it’s selected so let’s click the “Change Properties” button again.
Tip: To move around a section, use your arrows
For tabs and sections, the Display tab contains the schema name we need.
Note: If you have a GUID for the name, feel free to rename it to something recognizable. Typically, I prefix tabs with “tab” and sections with “section”.
Next, get the name of the section we are hiding.
Now we should have our schema names
- Relationship Type – customertypecode
- General Tab – general
- Section – sectionPolicy
Ode to the Code
Getting a Field
To do this, you’ll want to call:
Xrm.Page.getAttribute(“CRM_Field_SchemaName”)
So for our example, I’m going to use the “Relationship Type” attribute called customertypecode. To get this attribute, we’re going to call:
Xrm.Page.getAttribute(“customertypecode”)
Getting the Fields Value
Now that we have the field, let’s get the value:
Xrm.Page.getAttribute(“customertypecode”).getValue()
Our Logic (Pseudo code)
When writing code, I like to talk my way through it and pseudo code and comments are two easy ways to do this. A comment in JavaScript can be done with the double slash “//”.
// function togglePolicyInfo(){
// if policy info equals Customer
// show section
// else
// hide section
// }
Showing the Real Code
Our psuedo code is just the plan of what we want to do. Here’s the code, you’ll actually need.
function togglePolicyInfo(){
if (Xrm.Page.getAttribute('customertypecode').getValue() == 100000000){
// Customer - show policy information
Xrm.Page.ui.tabs.get("general").sections.get("sectionPolicy").setVisible(true);} else {
// hide policy information
Xrm.Page.ui.tabs.get("general").sections.get("sectionPolicy").setVisible(false);
}
}
Adding the Code
We need to add the code to a Web Resource and then to two events: OnLoad of the Form and OnChange of the Field.
Summary
Now whenever I choose the relationship type Customer, I can see the applicable sections. Although this was a bit on the light side, hopefully this can get you started.
Here are some additional resources:
Hope you enjoy!
Post by: Paul Way,
