XRM 2011 - JavaScript 101 in Microsoft Dynamics CRM 2011

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:

• http://msdn.microsoft.com/en-us/library/gg328255.aspx
• http://www.w3schools.com/js/
• http://crmbusiness.wordpress.com/2011/02/17/crm-2011-javascript-xrm-page-basics/

 

Hope you enjoy!

Creating Cross-Tab Data Inputs in Microsoft Dynamics CRM 2011

I recently was asked if there was a way to put inputs that are of similar manor on a form in a cross-tab grid format. Similar to this:

	Col 1	Col 2	Col 3
Row 1
Row 2

Let’s see how this can be done. Start by creating your attributes. For simplicity sake I created 6 attributes:

• row1col1
• row1col2
• row1col3
• row2col1
• row2col2
• row2col3

From there I added them to a section of my form. Making sure the new section is formatted for 4 columns. I then add the attributes to the section but leave the first column empty. Also make sure to turn the labels off for each attribute. Here is what the form looks like in the designer.

From there you will need to add jquery to your webresouces and add it to the form properties. If you do not have jquery you can download it at www.jquery.com. It is a very powerful javascript library that makes working with the DOM much cleaner and more precise. Once you have jquery you will need to create an onload function to be called. Here is what the code would look like:

Form_OnLoad = function () {

               $("#jm1_row1col1_d").prev('td').html("<br><span style='font-weight:bold; float:right;'>Row #1</span>");

               $("#jm1_row2col1_d").prev('td').html("<span style='font-weight:bold; float:right;'>Row #2</span>");

               $("#jm1_row1col1_d").prepend("Column #1").css("color","#333").css("text-align","center").css("font-weight","bold");

               $("#jm1_row1col2_d").prepend("Column #2").css("color","#333").css("text-align","center").css("font-weight","bold");

               $("#jm1_row1col3_d").prepend("Column #3").css("color","#333").css("text-align","center").css("font-weight","bold");

               $("#jm1_row1col1_d").parent().css("height","40px");

};

What you will notice here is that I use the jquery selector function to select the label and textbox td’s that CRM uses to layout the form. At first I select the empty td cell using the prev() function in jquery to put in some html text. Notice I put a <br> tag before the text for row 1. This is used to move the first row header down a little to accommodate the height difference when we put in a column header. For row 2 I do not add the <br> tag as it will line up fine. After that I get each row 1 textbox and prepend text with some css styles. This text will be the headers for your columns. After I add all the header text I will set the height of the <tr> for row 1 to 40px to allow for the textbox to show properly. Here is what the resulting form looks like after the onload function fires.