CRM Development


XRM 2011 – Microsoft Dynamics CRM 2011 Style Buttons

Adding a button to a Form is a great way to add additional functionality right where the user is already focused. Today we are looking at a few different approaches to adding a button. First, we’re looking at handling the upgrade for those of you who have already used the 4.0 button inside of 2011 or if you had a 4.0 environment and are upgrading. If you have a clean 2011 environment, then feel free to skip down to the “From Scratch” section.

There is already some code floating around to create a 4.0 style button inside of CRM 2011. The button we’re creating will instead create a CRM 2011 style button (i.e. “Example Button”).



The CRM 2011 button starts gray and then when the user hovers over it, the button will look like:


Read More »


CRM 2011 – iFrames & Saving

After spending time on several of the CRM forums, I noticed a few people having trouble with iFrames and saving data inside of the iFrame. While a forum post is a little difficult to write a full response, I wanted to share some insight on capturing the form save event to then trigger a save event inside of your iFrame.

From a business case, this is a fantastic way to tie multiple systems together. If all you are doing is syncing data, then look first at a plugin or scribe. However, if you are looking for the user to interact with multiple systems simultaneously, then an iFrame is a wonderful way to integrated with an existing system. A good example might be where CRM is only storing the summary information and the iFrame contains the details. The user may update the details which should save both the CRM record and the details of the web site.


First, let’s assume you have an iFrame inside an entity.

Secondly, we need to uncheck the “Restrict cross-frame scripting” check box on the iFrame properties.


Lastly, it’s a good idea to make sure our iFrame is using HTTPS to prevent mixed mode security warnings.


Talking Directly

If you try to talk directly to the iFrame via something like:


Unless you are On-Premise, you may encounter the “Access is Denied” warning. This will show itself when dealing with URLs on a different domain (or subdomain). Cross domainscripting is a security feature within the browser. Now an easy fix is to disable the browser settings, but this isn’t a good solution.



Instead of talking directly, we need send a messages to our iFrame. To send a message, we’d do something like:

Xrm.Page.ui.controls.get(‘IFRAME_opp’).getObject().contentWindow.postMessage(‘test’, “*”)

To receive the message on the iFrame, you need to listen for the message event. Let’s take a look at the JavaScript on our example iFrame page:


It is very important to check the origin and the message if you are dealing with publicly facing sites.

If the idea of messaging is new to you, here are some additional resources:


The OnSave

To initiate the message from the CRM 2011 form, you need to register an OnSave event from within the “Form Properties”.



How about .NET Pages?

If your iFrame is an ASPX page, all of this still applies. The only difference is that you want to have an ASP.Net button on your page to call the server side code. Instead of the saveForm event, simply call the click event of the button.

When dealing with server side saves though, you can either post a message back to say “I’m done” which will then complete the CRM save or you can put a set timeout in the onSave on the CRM side.



Hopefully you have seen how easy it is to integrate with another web site while inside of CRM 2011. If you have had problems with iFrames in the past, I really encourage you to use iFrames for your integration needs as they can really enhance your users experience and can allow for improved data across systems. I hope you enjoy!


CRM 2011–Excessive Sub-Gridding

Sub-grids enhance the user experience by conveniently providing associated information.  Within a sub-grid the user can easily view, create, or modify a related entity.  By default, Microsoft will auto-populate up to four sub-grids.



One thing to note however is that if the form contains more than four sub-grids, then sub-grids 5+ will contain a message inside the sub-grid “To load x records, click here”.  To populate the sub-grid, the user has to click the refresh button or the link.



CRM 2011 does this intentionally to make sure the User is presented with the Form as quickly as possible.  Each sub-grid is another Fetch call to the database, so reducing those inherently speeds up the form.

Now what if you only need a few more sub-grids and you are ok with the potential performance trade-off?  Well, let’s add a little JavaScript to auto load all of our sub-grids that didn’t auto load already:

function getLinksWithClassName(classname)  {
var bdy = document.getElementsByTagName(“body”)[0];
var els = [];
var re = new RegExp(‘\\b’ + classname + ‘\\b’);
var lnks = bdy.getElementsByTagName(“a”);

for(var i=0,j=lnks.length; i<j; i++)

return els;

var lnksUnloaded = getLinksWithClassName(‘ms-crm-List-LoadOnDemand’);

for (var i = 0; i < lnksUnloaded.length; i++){


Now adding the bottom four lines to our OnLoad event will cause all of our sub-grids to auto-load.  Hope you enjoy!


CRM 2011 Form Customization (Part 2)

A while back we looked at customizing the CRM 2011 header and footer.  I got some really positive feedback, but some people were tripped up.  Troubleshooting via blog is difficult, so whenever you have problems feel free to tweet me (@paul_way).  Today, I’m going to go into great detail of changing the form again, but this time we’re going to add a new twist.  Take a look at the before and after:










Now some of you may be wondering what I changed.  First, we still have the light blue shading on the header.  Secondly, we moved the footer to the left navigation.  User’s may never request changing the color of the forms, but that was intended to show you that you could style the forms any which way you wanted.  Moving the footer to the left hand navigation is quite practical.  Some users may be faced with smaller screen resolutions and this will really free up space if  you intend to put a lot of information in the footer (especially if you are adding to the header already).



Setting up our Web Resources

The first thing you’ll need to do is create a solution.  I called mine “Form CSS Customization”.  In it we are going to add two web resources.



For our initial web resource we’ll create is a CSS file:

Take note of the name of  your CSS file, as we’ll use this in a minute.  The CSS file contains the shading on the header as well as some custom table formatting that we’ll use with our JavaScript file.

Now, let’s add our JavaScript file:

function load_css_file(filename) {
var fileref = document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)

function myFormOnLoad() {
load_css_file(‘/WebResources/cei_/css/case.css’); // don’t forget to change the file!

function moveFooterToNav() {

var tbl = document.getElementById(‘crmNavBar’);
var row = tbl.insertRow(tbl.rows.length);
var cFoot = row.insertCell(0);
var txt = document.createTextNode(‘testing…’);
cFoot.appendChild(txt); = ‘myCustomNav’;
document.getElementById(‘myCustomNav’).innerHTML = “<table class=’myNavFoot’ cellspacing=’0′ cellPadding=’0′>” +
“<tr><td class=’ftLabel’>Created</td></tr>” +
“<tr><td class=’ftValue’>” + document.getElementById(‘footer_createdby_d’).childNodes[0].innerHTML +
“<br />” + document.getElementById(‘footer_createdon_d’).childNodes[0].innerHTML + “</td></tr>” +
“<tr><td class=’ftLabel’>Modified</td></tr>” +
“<tr><td class=’ftValue’>” + document.getElementById(‘footer_modifiedby_d’).childNodes[0].innerHTML +
“<br />” + document.getElementById(‘footer_modifiedon_d’).childNodes[0].innerHTML + “</td></tr>” +


The JavaScript file is doing two important things.  First, it is injecting the CSS file into the header of the page.  This basically tells the browser to pickup the CSS file as if it was always part of the page.  After loading the CSS file, the JavaScript will append a table to the left area nav bar.  This table is completely custom and you can style it any which way you want.  Be careful using Xrm.Page.getAttribute() here, because even though the field is in the footer it may not be accessible to the Xrm object.  In my case, the attributes I’m using were not on any of my tabs.

Changing the JavaScript

You must change the “load_css_file” function to contain your specific web resource.  To find the web resource name, it’s easiest to look at the CSS web resource inside of CRM:



Configuring the Form

Now we need to go to the form we are customizing.  The first step is to add everything we want to onto the footer.



Next, we’ll edit the form properties.


When editing the Form Properties, we’ll need to add the JavaScript library and add our onLoad function to the Form OnLoad.  In our example, the function we’re using is called “myFormOnLoad”.

After this, we simply hit OK, Save, and Publish.


Reviewing the Finished Product


As you can see, we made subtle changes to improve the overall look and feel for the user.  We also provided a real-life situation where you may need to squeak out some additional room for the user.  Hope you enjoy!


CRM 2011–Changing the Form Header and Footer Colors

CRM 2011 has a beautiful default theme.  Microsoft has already organized the CRM 2011 folder structure to support themes, but currently only supplies the Silver theme.  Office 2010 on the other hand contains Silver, Blue, and Black.



Today we aren’t going to modify the entire theme, but modify the form header and footer.  The code I’m going to include is a small gradient, but you could choose a solid background or any color you’d like.  I was going to use a Clemson, I mean Customer Effective, Orange, but instead focused more on the blue theme look.








Adding our CSS Web Resource

Granted this change was very minor, but you could do about anything you wanted to with it.  To accomplish this basic change you must first upload a CSS web resource (I named mine new_header.css) with the following styling:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffB3CAEC, endColorstr=#fff6f8faE);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffB3CAEC, endColorstr=#fff6f8faE);
background-image: none;

Note: The filter property is an IE specific CSS attribute.  It isn’t supported in any other browsers (they will just ignore it), but Internet Explorer 7+ supports it just fine.


Modifying the OnLoad

Our next step is to modify the onLoad to inject the CSS file.  We’ll do this by adding the following JavaScript to a web resource:

function load_css_file(filename){
var fileref = document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)

function myFormOnLoad(){


Changing the Form Properties

Finally we need to change the form properties to include this JavaScript web resource in the library and add our “myFormOnLoad” function to the OnLoad Event for the Form:




After going through this blog, hopefully you will see how easy it is to change the form header, footer, or anything else.  By embedding a CSS file, our ideas are our only limits.  Hope you enjoy!

© Copyright 2012-2014, All Rights Reserved