Jaimie Ji’s XRM Service Toolkit provides a comprehensive set of JScript libraries for interacting with the SOAP and REST SDK through JavaScript. While Option 1 in this particular use case is fairly simple, when you start needing to do more advanced things, you may want to look at using that kit. It is fairly comprehensive and he keeps it up to date.

Option 1: Using the REST SDK and JSON2

Using the REST SDK is great, and there are some really good examples in the CRM SDK help file. Now in order to use the below code-block, you need to use JSON.

JSON, or JavaScript Object Notation, is a text format that is used to interchange data. JSON2.js is a lightweight javascript that convert the strings to javascript objects and vice-versa. The CRM REST SDK can return data in JSON format.

To get the code for JSON2, you can go here. You will need to embed this code into your javascript file or include json2.js along with the code below. Without it, you will not be able to parse the data properly, and the code below uses the JSON library in json2.js.

Ok, below we have 3 functions:

• getServerUrl : which gets the server URL – taken from the CrmRestKit
• Lookup_Changed : what you call when a lookup is changed
• retrieveReqCallBack : the callback function that performs any actions

You would put Lookup_Changed in the change event of a lookup field and specify the attributes like one of the following:

• ‘contactid’,'Contact’,'contactlookup’
• ‘contactid’,'Contact’,'contactlookup’,['Telephone1']
• ‘contactid’,'Contact’,'contactlookup’,['Telephone1','FullName]

Then you’d put your actions inside the retrieveReqCallBack.

function getServerUrl() {
    // From CrmRestKit.js
    var localServerUrl = window.location.protocol + "/" + window.location.host;
    var context = parent.Xrm.Page.context;

    if (context.isOutlookClient() && !context.isOutlookOnline()) {
        return localServerUrl;
    }
    else {
        var crmServerUrl = context.getServerUrl();
        crmServerUrl = crmServerUrl.replace(/^(http|https):\/\/([_a-zA-Z0-9\-\.]+)(:([0-9]{1,5}))?/, localServerUrl);
        crmServerUrl = crmServerUrl.replace(/\/$/, "");
    }
    return crmServerUrl;
}

function Lookup_Changed(attributeName, entityName, callbackId, columns) {
    var serverUrl = Xrm.Page.context.getServerUrl();
    var ODataPath = serverUrl + "/XRMServices/2011/OrganizationData.svc";

    var lookup = Xrm.Page.data.entity.attributes.get(attributeName).getValue();
    if (lookup===null) {
        return false;
    }

    var id = lookup[0].id;
    if (id == null) {
        return false;
    }

    var retrieveReq = new XMLHttpRequest();

    var url = ODataPath + "/"+entityName+"Set(guid'" + id + "')";
    if (columns !== undefined && columns !== null) {
        url = url + "?$select=" + columns.join(',');
    }

    retrieveReq.open("GET", url, true);
    retrieveReq.setRequestHeader("Accept", "application/json");
    retrieveReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    retrieveReq.onreadystatechange = function () {
        if (this.readyState == 4 /* complete */) {
            if (this.status == 200) {
                var data;
                var jData;
                jData = JSON.parse(this.responseText);
                if (jData && jData.d && jData.d.results && jData.d.results.length > 0) {
                    data = jData.d.results[0];
                } else if (jData && jData.d) {
                    data = jData.d;
                }

                if (data == null) {
                    return;
                }
                retrieveReqCallBack(callbackId, data);
            }
        }
    };
    retrieveReq.send();
    return true;
}

function retrieveReqCallBack(calltype, data) {
    var toLookup=function(data) {
        if (data==null || data=="" || (data.Id==null)) {
            return null;
        }

        var result=new Array();
        result[0] = {};
        result[0].id = data.Id;
        result[0].name = data.Name;
        result[0].entityType = data.LogicalName;
        return result;
    }

    switch (calltype) {
        case 'pricelookup':
            Xrm.Page.data.entity.attributes.get("new_pricecategorylookup").setValue(toLookup(c.new_pricecategorylookup);
            break;
        case 'contactlookup':
            Xrm.Page.data.entity.attributes.get("insp_poctelephonenumber").setValue(c.Telephone1);
            break;
        default:
            break;
    }
}

Option 2: Using the XrmServiceToolkit with similar functions

Ok, now let’s assume you are using the XRM Service Toolkit, and you want to do the same thing, using a Lookup_Changed function and the retrieveReqCallBack function. Instead of embedding JSON and a method to get the server url, you can use the following:

function Lookup_Changed(attributeName, entityName, callbackId, columns) {
    var lookup = Xrm.Page.data.entity.attributes.get(attributeName).getValue();
    if (lookup===null) {
        return false;
    }

    if (lookup[0].id == null) {
        return false;
    }

	XrmServiceToolkit.Rest.Retrieve(
        entityName,
        lookup[0].id,
        columns,
		null,
        function (result) {
            retrieveReqCallBack(callbackId, result);
        },
        function (error) {
            throw error;
        },
		true
    );
}

function retrieveReqCallBack(calltype, data) {
    var toLookup=function(data) {
        if (data==null || data=="" || (data.Id==null)) {
            return null;
        }

        var result=new Array();
        result[0] = {};
        result[0].id = data.Id;
        result[0].name = data.Name;
        result[0].entityType = data.LogicalName;
        return result;
    }

    switch (calltype) {
        case 'pricelookup':
            Xrm.Page.data.entity.attributes.get("new_pricecategorylookup").setValue(toLookup(c.new_pricecategorylookup);
            break;
        case 'contactlookup':
            Xrm.Page.data.entity.attributes.get("insp_poctelephonenumber").setValue(c.Telephone1);
            break;
        default:
            break;
    }
}

The XRM Service Toolkit does a lot, and I would suggest checking it out.

If you are interested in this solution, you can download the following:

• Managed Solution (this is the only thing you need)
• Unmanaged Solution (in case you want to modify mine, like add grid support, it is on my to-do list)
• Source Code (this is in case you would prefer to use a WCF service or if you just want to play around with my code)

Once you’ve installed the managed solution, you’ll need to do the following to create / setup an InfoPath form:

1. For this particular InfoPath integration, you need to create InfoPath Forms that mirror a CRM Entity.
   Note: You can always create a new entity for the form data.

   

2. Rename the default form Group to the name of the entity (ex: Contact)

   

3. Inside CRM create the InfoPath form (it is an entity included in the solution), select the entity and save the form.

   

4. Once it has been saved, you can copy the ID using the “Copy ID” link in the header.
   
   Note: If you do not select the Allow Any CRM Field checkbox, you will need to add the individual Fields, which can be found in the left navigation.

5. In the InfoPath Form Designer, add a field named SubmissionCode with the Default Value as the ID you just copied.
   
   Note: Using the submission code allows us to check and see if the form is valid, active, and allowed.

   

6. Add a field for each of the fields in CRM that you want to be available, selecting the appropriate data type.
   
   Note: Unfortunately I have not had the time to test the fields and have been using the checkbox on the infopath form record to enable any/all CRM fields. However, I did not want to delay releasing the code and information as it currently is. If someone identifies a problem with this or any other section of the code, I’ll be happy to look into it and work on resolving the issue.

   

7. Layout the fields on the form, then click File > Submit Options > To Email

   

8. Enter the Queue email or where you want new forms to be submitted.

   

9. Click Next.

   

10. Click Finish.

    

11. Save and close the form designer.

12. Open the form and test submission.

    

Once the email comes into CRM, the process of reading the form is easy; you just open it up and click the Import InfoPath button on the ribbon.

Usually I would post the source-code and comment on how it works in great detail, but this time, it really depends on which component. There is a plugin and WCF service written in C# as well as two Jscript files, one for the buttons and one for the InfoPath form inside CRM that creates a drop-down of the entities in CRM. I would suggest downloading the unmanaged solution and source-code if you want to delve into those items.

Now, for complex situations or form conversions, binding the InfoPath schema is the way to go. Using that method (the one described in detail on Philo’s Weblog) you can import the InfoPath form schema into Visual Studio:

1. Create an InfoPath form and lay it out the way you want it.
2. Extract the form files (File | Extract Form Files) to a location you can find later.
3. Close the InfoPath form designer.
4. Open the Visual Studio command prompt.
5. Change to the directory where you extracted the files
   cd c:\myinfopathfiles
   
6. Run xsd against the myschema.xsd in that directory, and specify the namespace you would like to use.
   Note: My WCF namespace is CrmInfoPathService and my plugin namespace is InfoPathPlugin.
   xsd.exe myschema.xsd /classes /l:cs /n:InfoPathPlugin
   
7. Then you can deserialize the xml into the object and store it in CRM or any other system using the logic embedded in your code.

The key point to my solution was not to do something that everyone does on occasion, but to make something so that I can leverage it in the future and not have to create a new integration every time I wanted to leverage a new form. Now, on that note, here are the list of things that if you delve into, I’d like to know, a.k.a. my to-do list for this project:

• Add a button onto the grid for activities
• Create a way to handle child entities.
• Modify the plugin/WCF code to link the created entities to the form email using connections.
• Change the button on the form to monitor for the results (success/failure) and report back to the user.
• Any great ideas my readers think should be added!

This technet page shows the methods available for the different types of controls.

Here is an example of how to change the optionset based on a yes/no field:

function BuildOptionSet(picklist, valuelist)
{
	picklist.clearOptions();
	for(var i=0; i<valuelist.length; i++)
	{
		var listitem = valuelist[i];
		picklist.addOption(listitem[0], listitem[1]);
	}
}

var lista = new Array();
lista[0] = new Array('Alpha',0);
lista[1] = new Array('Beta',1);

var listb = new Array();
listb[0] = new Array('Charlie',2);
listb[1] = new Array('Delta',3);

var uselista = Xrm.Page.data.entity.attributes.get("YesNo").getValue();
var optionset = Xrm.Page.ui.controls.get("OptionSet");

if (uselista==true) {
   BuildOptionSet(optionset, lista);
} else {
   BuildOptionSet(optionset, listb);
}

You just need to change the values of lista and listb and the YesNo and OptionSet lines to reflect the fields on your form, and add it to the onchange event of the dropdown Yes/No form field.

Below is an example of the slider control in action, and you can click here to download a solution to import the web-resources into your CRM deployment (it is a managed solution with no entities, just like the star rating control). If you want the unmanaged solution you can download it here.

Ok, once you have the web-resource loaded into your CRM deployment, you’ll need to create a new field to store the slider value and put it on the form, but uncheck the visible box.

Add the Web-Resource to the form, check the box to display the label on the form, and then enter your parameters. I like using a pipe separator. The available parameters are:

• min: minimum value
• max: maximum value
• field: the CRM field to store the value in
• step: the step increase
• stepoverride: don’t use the step when a value is manually entered

Make sure to click on the formatting tab and set the number of rows to 1, scrolling to Never, and uncheck the box to display the border.

Then move the hidden field down and out the way. If you have a lot of fields you are accessing through form scripts you could just drop them into a hidden section.

Here is the code for the slider control HTML web resource.

<html>
<head>
  <title>Slider Control</title>
  <script type="text/javascript">
var Settings = {};
Settings.Min = 0;
Settings.Max = 100;
Settings.Step = 5;
Settings.Value = 50;
Settings.Field = null;
Settings.AllowStepOverride = false;

var Slider = {};
Slider.Drag = false;

Slider.Initialize = function Slider(id,min,max,step,value,onchange) {
  Settings.Min = min;
  Settings.Max = max;
  Settings.Step = step;
  Slider.Value = value;

  var ihtml = "";
  ihtml += "<table width='100%' cellspacing='0' cellpadding='0'><tr>";
  ihtml += "<td class='left-bracket'>&nbsp;</td><td class='value'>";
  ihtml += "<input class='value' id='value' type='text' onchange='Slider.SetValue();' />";
  ihtml += "</td><td class='right-bracket'>&nbsp;</td>";
  ihtml += "<td class='slider-left' /><td class='slider-area' id='"+id+"-area' >";
  ihtml += "<div id='"+id+"-selector' class='slider-selector' /></td>"
  ihtml += "<td class='slider-right' /></tr></td></table>";
  var p = document.getElementById(id);
  p.innerHTML = ihtml;

  Slider.Element = document.getElementById(id+"-area");
  Slider.Element.attachEvent("onmousedown",Slider.OnMouseClick);

  Slider.Id = id;
  Slider.Selector = document.getElementById(id+"-selector");
  Slider.Selector.attachEvent("onmousedown",Slider.OnMouseDown);
  Slider.Selector.attachEvent("onmousemove",Slider.OnMouseMove);
  Slider.Selector.attachEvent("onmouseup",Slider.OnMouseUp);
  Slider.Selector.attachEvent("onmouseleave",Slider.OnMouseUp);

  Slider.UpdatePosition();
}

Slider.SliderRatio = function() {
  var num =  Settings.Max - Settings.Min;
  var den = parseFloat(Slider.Element.offsetWidth)-parseFloat(Slider.Selector.offsetWidth);
  return den/num;
};

Slider.UpdatePosition = function () {
  Slider.Position = Math.round(Slider.Value*Slider.SliderRatio());
  Slider.SetPosition();
};

Slider.OnMouseClick = function(e) {
  Slider.Position = e.clientX - (8+Slider.Selector.offsetLeft-parseInt(Slider.Selector.style.left.replace("px","")));
  Slider.SetPosition();
  Slider.OnChange(Slider.Value);
}

Slider.SetPosition = function() {
  if (Slider.Position<0) Slider.Position = 0;
  var max = Slider.Element.offsetWidth-Slider.Selector.offsetWidth;
  if (Slider.Position>max) Slider.Position = max;

  Slider.Selector.style.left = Slider.Position + "px";

  var i = Math.round(Slider.Position/Slider.SliderRatio()) + Settings.Min;
  i = (Math.floor(i/Settings.Step))*Settings.Step;

  Slider.Value = i;

  var val = document.getElementById('value');
  if (val===null) return;
  val.value = i;
}

Slider.SetValue = function() {
  var val = document.getElementById('value');
  if (Settings.AllowStepOverride) {
    Slider.Value = val.value;
  } else {
    Slider.Value = Math.round(val.value/Settings.Step)*Settings.Step;
  }
  if (Slider.Value<Settings.Min) Slider.Value = Settings.Min;
  if (Slider.Value>Settings.Max) Slider.Value = Settings.Max;
  Slider.UpdatePosition();
}

Slider.OnMouseDown = function(e)  {
  Slider.Drag = true;
}

Slider.OnMouseMove = function(e) {
  if (Slider.Drag) {
    Slider.Position = e.clientX - (8+Slider.Selector.offsetLeft-parseInt(Slider.Selector.style.left.replace("px","")));
    Slider.SetPosition();
  }
};

Slider.OnMouseUp = function(e) {
  if (Slider.Drag) {
    Slider.Drag = false;
    Slider.OnChange(Slider.Value);
  }
};

Slider.OnChange = function(val) {
  parent.Xrm.Page.data.entity.attributes.get(Settings.Field).setValue(val);
};

var InitializeSlider = function() {
  var data = WebResource.GetDataParams();
  var sliderBox = document.getElementById("sliderBox");

  for (var i in data)
  {
    switch (data[i][0].toLowerCase())
	{
	  case 'min': Settings.Min = parseInt(data[i][1],10); break;
	  case 'max': Settings.Max = parseInt(data[i][1],10); break;
	  case 'step': Settings.Step = parseInt(data[i][1],10); break;
	  case 'value': Settings.Value = parseInt(data[i][1],10); break;
	  case 'field': Settings.Field = data[i][1]; break;
	  case 'stepoverride': Settings.AllowStepOverride = (data[i][1]=='true'); break;
	  default:break;
	}
  }

  Slider.Initialize("slider",Settings.Min,Settings.Max,Settings.Step,Settings.Value,null)

  if (Settings.Field!=null) {
    var val = parent.Xrm.Page.data.entity.attributes.get(Settings.Field).getValue();
	if (val!==null) {
	  var num = parseInt(val);
	  Slider.Value = num;
	  Slider.UpdatePosition();
	}
  }
};

var WebResource = {};

WebResource.GetDataParams = function()
{ //modified version of: http://technet.microsoft.com/en-us/library/gg327945.aspx
  //Get the any query string parameters and load them
  //into the vals array

  var vals = new Array();
  if (location.search !== "")
  {
    vals = location.search.substr(1).split("&");
    for (var i in vals)
    {
      vals[i] = vals[i].replace(/\+/g, " ").split("=");
    }

    //look for the parameter named 'data'
    var found = false;
        var datavals;
    for (var j in vals)
    {
      if (vals[j][0].toLowerCase() == "data")
      {
        found = true;
        datavals = decodeURIComponent(vals[j][1]).split("|");
        for (var k in datavals)
        {
          datavals[k] = datavals[k].replace(/\+/g, " ").split("=");
        }
        break;
      }
    }
    if (found) { return datavals; }
  }
  return null;
};
  </script>
  <style type="text/css">
html, body {
  padding: 0px;
  margin: 0px;
  border: 0px;
  background-color: rgb(246, 248, 250);
  overflow:hidden;
}
.slider-left, .slider-area, .slider-right {
  background-image:url(img/bar.png);
  background-repeat:repeat-x;
  height:17px;
  padding:0px;
  margin:0px;
  cursor:hand;
}
.slider-left, .slider-right {
  width: 7px;
}
div.slider-selector {
  background-image:url(img/selector.png);
  background-repeat:no-repeat;
  width:15px;
  height:17px;
  position: relative;
  cursor:hand;
}
td.left-bracket, td.right-bracket {
  background-repeat:no-repeat;
  height:17px;
  width:6px;
  display:inline;
}
td.left-bracket {
  background-image:url(img/left_bracket.png);

}
td.right-bracket {
  background-image:url(img/right_bracket.png);
}
td.value {
  background-image:url(img/val_bk.png);
  background-repeat:repeat-x;
  height:17px;
  width:30px;
}
input.value {
  border: none;
  font:11px segoe ui,tahoma,arial;
  height:17px;
  width:30px;
  background-color:transparent;
  vertical-align:top;
  padding-top:1px;
  text-align:center;
}
  </style>
</head>
<body onload="InitializeSlider();">
<div id="slider"></div>
</body>
</html>

Thanks to Manish Mistry comment on my star control for refreshing the iframe when you change the value, you could do the same on this control. However, you could also just set the value and update the position. The only reason I get the control’s object and it’s id is because I’m not 100% sure the id will always match, even though all my tests indicate it does.

var control = Xrm.Page.ui.controls.get('WebResource_Score');
var id      = control.getObject().id;
var frame   = document.frames[id];
frame.Slider.Value = 50;
frame.Slider.UpdatePosition();

One of my TODO’s is to join my web resources HTML form controls into a single library once I have enough of them so that people can leverage them in an easier manner. If anyone has any ideas for custom controls for Dynamics CRM, let me know and I’ll see if I can build it.

Below is an example of the star rating control in action, and you can click here to download a solution to import the web-resources into your CRM deployment (it is a managed solution with no entities).

Ok, once you have the web-resource loaded into your CRM deployment, you’ll need to create a new field to store the rating and put it on the form, but uncheck the visible box.

Add the Web-Resource to the form, and check the box to display the label on the form.

Then enter your parameters (I like using a pipe as a separator). The available parameters are:

• min: minimum star rating – really should always be 1
• max: maximum star rating – maybe 5 or 10
• field: the CRM field to store the value in
• showvalue: whether or not to display the numerical value

Make sure to click on the formatting tab and set the number of rows to 1, scrolling to Never, and check the box to display the border.

Then move the hidden field down and out the way. If you have a lot of fields you are accessing through form scripts you could just drop them into a hidden section.

Now that you know how to set it up, let’s go ahead and look at the code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Rating Control</title>
  <link href="/_common/styles/fonts.css.aspx?lcid=1033" rel="stylesheet" type="text/css" />
  <link href="/_common/styles/global.css.aspx?lcid=1033" rel="stylesheet" type="text/css" />
  <link href="/_common/styles/select.css.aspx?lcid=1033" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
var Rating = {};

// Default Values
Rating.ShowValue = false;
Rating.Max = 5;
Rating.Min = 1;
Rating.Field = '';
Rating.Value = null;

Rating.Highlight = function(index)
{
  var val = document.getElementById('rating_value');
  if (index===null) {
    index = -1;
    val.innerHTML = '[Not Set]';
  } else {
    val.innerHTML = '['+index+'/'+Rating.Max+']';
  }
  for(var i=Rating.Min; i<=Rating.Max;i++)
  {
    if (i<=index) {
      document.getElementById("rating_"+i).className = "staron";
    } else {
      document.getElementById("rating_"+i).className = "staroff";
    }
  }
};

Rating.HolderRollover = function() {
  if (Rating.Value !== null) {
    var r = document.getElementById('rating_remove');
    r.className = 'stardel';
  }
};

Rating.HolderRollout = function() {
  var r = document.getElementById('rating_remove');
  r.className = 'stardel2';
};

Rating.Rollover = function(index) {
  Rating.Highlight(index);
};

Rating.Rollout = function()
  {
  Rating.Highlight(Rating.Value);
};

Rating.Set = function(index) {
  Rating.Value = index;
  if (index<0) {
    parent.Xrm.Page.data.entity.attributes.get(Rating.Field).setValue(null);
  } else {
    parent.Xrm.Page.data.entity.attributes.get(Rating.Field).setValue(Rating.Value);
  }
  Rating.Highlight(index);
};

Rating.Initialize = function() {
  var data = WebResource.GetDataParams();
  for (var i in data)
  {
    switch (data[i][0].toLowerCase())
        {
          case 'min': Rating.Min = parseInt(data[i][1],10); break;
          case 'max': Rating.Max = parseInt(data[i][1],10); break;
          case 'field': Rating.Field = data[i][1]; break;
          case 'showvalue': Rating.ShowValue = (data[i][1] == 'true'); break;
          default:break;
        }
  }
  var d = document.getElementById('starholder');
  for (var j=Rating.Min;j<=Rating.Max;j++)
  {
    var el = "<span id='rating_"+j+"' " +
             "onmouseover='Rating.Rollover("+j+");' " +
             "onmouseout='Rating.Rollout();' " +
             "onclick='Rating.Set("+j+");' />";
    d.innerHTML += el;
  }

  var rel = "<span id='rating_remove' class='stardel2' " +
            "onclick='Rating.Set(null);' onmouseover='Rating.Rollover(null);' />";
  d.innerHTML += rel;

  var val = "<span id='rating_value' class='value' " +
            (Rating.ShowValue ? "" : "style='display:none' ") +
            "/>";
  d.innerHTML += val; 

  Rating.Value = parent.Xrm.Page.data.entity.attributes.get(Rating.Field).getValue();
  Rating.Highlight(Rating.Value);
};

var WebResource = {};

WebResource.GetDataParams = function()
{ //modified version of: http://technet.microsoft.com/en-us/library/gg327945.aspx
  //Get the any query string parameters and load them
  //into the vals array

  var vals = new Array();
  if (location.search !== "")
  {
    vals = location.search.substr(1).split("&");
    for (var i in vals)
    {
      vals[i] = vals[i].replace(/\+/g, " ").split("=");
    }

    //look for the parameter named 'data'
    var found = false;
        var datavals;
    for (var j in vals)
    {
      if (vals[j][0].toLowerCase() == "data")
      {
        found = true;
        datavals = decodeURIComponent(vals[j][1]).split("|");
        for (var k in datavals)
        {
          datavals[k] = datavals[k].replace(/\+/g, " ").split("=");
        }
        break;
      }
    }
    if (found) { return datavals; }
  }
  return null;
};
  </script>
  <style type="text/css">
.staroff,.staron,.stardel,.stardel2 {
	height:15px;
	margin:1px 1px 1px 2px;
	width:15px
}

staroff,.staron,.stardel {
	background:no-repeat
}

.starholder {
	background:#FFF;
	padding:1px
}

.stardel {
	background:url(remove.png)
}

.staron {
	background:url(staron.png)
}

.staron,.staroff {
	margin-right:5px
}

.staroff {
	background:url(staroff.png)
}

.value {
	font:11px segoe ui,tahoma,arial;
	color:#000;
	height:17px;
	vertical-align:middle
}
  </style>
</head>

<body onload="Rating.Initialize();">
  <table cellspacing="0"
         cellpadding="0"
         width="100%"
         summary="star table">
    <tr>
      <td id="cell_dd">
        <div id="starholder"
             style="width:100%;"
             onmouseover="Rating.HolderRollover();"
             onmouseout="Rating.HolderRollout();"></div>
      </td>
    </tr>
  </table>
</body>
</html>

These are the image files used:

(they are hidden in the managed solution)

In CRM 4.0 I had posted an article about changing the CRM Address State to a drop down box. While I had gone back and updated the code to work with CRM 2011, some people still had problems using it. Also, it wasn’t the best way to do it in CRM 2011. With the web-resources in CRM 2011 there is a completely supported way of creating a state drop down!

You can use an html web-resource! Below is the source for the html web resource, then you just need to hide the state drop down on your form and add the web resource and set the data parameter to the field id, such as address1_stateorprovince.

This helps by providing a set of default option in a drop-down box. It also supports (** Other) which will show a text box for entering something not in the drop down. This web-resource works on any entity where you need a state drop down.

Here is the configuration for the HTML Web Resource on the Contact form:

State Drop Down Web Resource Properties

StateDropDown.html:

<html>
<head>
<title>State Drop Down</title>
<link href="/_common/styles/fonts.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>
<link href="/_common/styles/global.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>
<link href="/_common/styles/select.css.aspx?lcid=1033" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var datafield;
function getQuerystring(key)
{
    var work = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+work+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if (qs == null) return null;
    return qs[1];
}

function onLoad()
{
    var updatefield = getQuerystring("data");
    if (top.location.href.indexOf("/print/print.aspx") != -1)
    {
        // While this part of the onload is unsupported, there is not another way to do it
        // because Xrm.Page.data.entity is not supported in print-preview
        var data_cell = document.getElementById("cell_dd");
        var crmField = top.frames[0].document.getElementById(updatefield+"_d");
        data_cell.innerHTML = crmField.innerHTML;
        return;
    }
    datafield = parent.Xrm.Page.data.entity.attributes.get(updatefield);
    var value = datafield.getValue();
    var dropdown = document.getElementById("custom_state");

    // fix for outlook issue identified by Ryan
    // do not pass null value to IsOptionInDropDown
    if (value==null || value=="") {
        dropdown.value = "!1"; // Set to select a state by default
        return; // stop processing - empty value
    }

    // If it is a dropdown value, set the dropdown and exit onload
    if (IsOptionInDropDown(value)) return;

    // no value found for drop down, value is not null or empty, therefor set other
    dropdown.value = "other";
    var other = document.getElementById("other_state");
    other.value = value;
    SetOtherVisible(true);
}

function IsOptionInDropDown(value)
{
    // Replace fixes for common name variants
    switch (value) {
        case "d.c.": value="dc";
            break;
        default:
            break;
    }

    // Change to lowercase
    var lvalue=value.toLowerCase();

    var dropdown = document.getElementById("custom_state");
    var options = dropdown.options;
    var i = 0;
    for(i=0;i<options .length;i++)
    {
        if (options[i].value.toLowerCase() == lvalue || options[i].text.toLowerCase() == lvalue)
        {
            dropdown.value = options[i].value;
            SetOtherVisible(false);
            return true;
        }
    }
    return false;
}

function DropDownChanged(value)
{
    if (value !== null && value!=="") {
        if (value.charAt(0)=='!') { // Fixed By Joseph Martine - charAt or substring not [0]
            StateChanged("");// Fixed By Joseph Martine
            return;
        }
        if (value=="other") {
            SetOtherVisible(true);
            return;
        } else {
            SetOtherVisible(false); // Fixed By Joseph Martine
        }
        var os = document.getElementById("other_state");
        os.value = value;
        StateChanged(value);
    }
}

function TextBoxChanged(value)
{
    StateChanged(value);
    IsOptionInDropDown(value); // This also updates the visible in its check...
    return true;
}

function StateChanged(value)
{
    // Update Xrm.Page data field
    datafield.setValue(value);
}

function SetOtherVisible(visibility)
{
    var ddcell = document.getElementById("cell_dd");
    var textcell = document.getElementById("cell_tb");
    if (visibility) {
        ddcell.style.width="50%";
        textcell.style.display="table-cell";
        textcell.style.width="50%";
    } else {
        textcell.style.display="none";
        ddcell.style.width="100%";
        textcell.style.width="100%";
    }
}

</script>
</head>
<body onload="onLoad();">
<table cellspacing="0" cellpadding="0" width="100%"><tr><td id="cell_dd">
<select name="custom_state" req="2" height="4" style="IME-MODE: auto;width:100%;"
class="ms-crm-SelectBox" id="custom_state" onChange="DropDownChanged(this.value)">
    <option value="!1">---Select a State-------</option>
    <option value="!2">---Canada---------------</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NL">Newfoundland and Labrador</option>
    <option value="NT">Northwest Territories</option>
    <option value="NS">Nova Scotia</option>
    <option value="NU">Nunavut</option>
    <option value="ON">Ontario</option>
    <option value="PE">Prince Edward Island</option>
    <option value="QC">Quebec</option>
    <option value="SK">Saskatchewan</option>
    <option value="YT">Yukon</option>
  <option value="!3">---United States--------</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DC">District of Columbia</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    <option value="other">** Other</option>
</select>
</td><td id="cell_tb" style="padding-left:15px;display:none;">
<input class="ms-crm-Text" style="ime-mode: auto;width:100%;" type="text"
maxLength="50" id="other_state" req="0" onChange="TextBoxChanged(this.value);" />
</td></tr>
</table>
</body>
</html>

First, in CRM 2011, when you make a field required by editing the field, you are making it required for all forms (that the field is on).

If you want to make a field required just for a particular form, you can use a form onload event to change the requirement level. One of the great things about CRM 2011 is just how much is exposed to JScript through Xrm.Page. There are methods on the attribute to get the required level and set the required level. Let’s suppose for example that we want to make the First Name required, but only on this form, then we could use the following onload function with the parameters ‘required’, ‘firstname’ to make the field required. If we needed to add multiple fields, then we would just specify them after ‘firstname’, such as ‘required’,'firstname’,'address1_city’.

function updateRequirementLevel()
{
    var level = arguments[0];
    for (var i=1; i < arguments.length; i++)
    {
        var attribute = Xrm.Page.data.entity.attributes.get(arguments[i]);
        attribute.setRequiredLevel(level);
    }
}

That will make each field you specify after the level, required or recommended based on the level you pass as the first parameter. Calling the function updateRequirementLevel('required','firstname'); will make the firstname required.

Do you want a drop down box for the state, but you don’t want to break core CRM functionality?

In CRM 4.0 I had posted an article about changing the CRM Address State to a drop down box. I have went back and updated the code a little (fixed a bug) and it will work with CRM 2011.

Ok, this script uses the same methods I used in CRM 4 to show the states for the United States and Canada (You can always modify it to have more options). This will help restrict what people put in the state field by providing them a drop down box. It will also allow them to view the old text box and enter any custom information just by clicking on ‘* ENTER A CUSTOM PROVINCE *’.

This script will work on the onload for a lead, contact, account, and sales-contact.

This script does use the _d html objects, which, to my knowledge is considered unsupported in CRM 2011. CRM 2011 does expose these data elements and control elements using Xrm.Page and this script doesn’t use them, and I may come back and update this script, but since it works in CRM 4 and in CRM 2011, I figured I’d repost it.

StateDropDown.js Jscript Code:

function ddlState ()
{

    // Get the state or province cell.
    var provinceid = 'stateorprovince';
    var statecell = document.getElementById(provinceid + '_d');

    if (!statecell)
    {
        provinceid = 'address1_stateorprovince';
        statecell = document.getElementById(provinceid + '_d');
    }

    var stateobject = document.getElementById(provinceid);
    stateobject.style.display = 'none';

    var statevalue = stateobject.value;

    var ddl = document.createElement('select');
    ddl.setAttribute('id','new_stateorprovince');
    ddl.setAttribute('class','ms-crm-SelectBox');
    ddl.setAttribute('req','2');
    ddl.setAttribute('height','4');
    ddl.setAttribute('style','IME-MODE: auto');

    // Build some lists.
    var CStateName = new Array();
    var CStateAbbr = new Array();
    var USStateName = new Array();
    var USStateAbbr = new Array();

    // If nothing is entered for state, show SELECT A STATE
    var found=false;
    if (statevalue.length<1)
    {
        stateoption=document.createElement('option');
        stateoption.setAttribute('value','');
        stateoption.innerHTML = ' ** SELECT A STATE ** ';
        ddl.appendChild(stateoption);
        found=true;
    }

    // Build Canada Array
    CStateName[0]  = "Alberta";                   CStateAbbr[0]  = "AB";
    CStateName[1]  = "British Columbia";          CStateAbbr[1]  = "BC";
    CStateName[2]  = "Manitoba";                  CStateAbbr[2]  = "MB";
    CStateName[3]  = "New Brunswick";             CStateAbbr[3]  = "NB";
    CStateName[4]  = "Newfoundland and Labrador"; CStateAbbr[4]  = "NL";
    CStateName[5]  = "Northwest Territories";     CStateAbbr[5]  = "NT";
    CStateName[6]  = "Nova Scotia";               CStateAbbr[6]  = "NS";
    CStateName[7]  = "Nunavut";                   CStateAbbr[7]  = "NU";
    CStateName[8]  = "Ontario";                   CStateAbbr[8]  = "ON";
    CStateName[9]  = "Prince Edward Island";      CStateAbbr[9]  = "PE";
    CStateName[10] = "Quebec";                    CStateAbbr[10] = "QC";
    CStateName[11] = "Saskatchewan";              CStateAbbr[11] = "SK";
    CStateName[12] = "Yukon";                     CStateAbbr[12] = "YT";

    // Build US Array
    USStateName[0]  = "Alabama";        USStateAbbr[0]  = "AL";
    USStateName[1]  = "Alaska";         USStateAbbr[1]  = "AK";
    USStateName[2]  = "Arizona";        USStateAbbr[2]  = "AZ";
    USStateName[3]  = "Arkansas";       USStateAbbr[3]  = "AR";
    USStateName[4]  = "California";     USStateAbbr[4]  = "CA";
    USStateName[5]  = "Colorado";       USStateAbbr[5]  = "CO";
    USStateName[6]  = "Connecticut";    USStateAbbr[6]  = "CT";
    USStateName[7]  = "District of Columbia"; USStateAbbr[7]  = "DC";
    USStateName[8]  = "Delaware";       USStateAbbr[8]  = "DE";
    USStateName[9]  = "Florida";        USStateAbbr[9]  = "FL";
    USStateName[10]  = "Georgia";       USStateAbbr[10]  = "GA";
    USStateName[11] = "Hawaii";         USStateAbbr[11] = "HI";
    USStateName[12] = "Idaho";          USStateAbbr[12] = "ID";
    USStateName[13] = "Illinois";       USStateAbbr[13] = "IL";
    USStateName[14] = "Indiana";        USStateAbbr[14] = "IN";
    USStateName[15] = "Iowa";           USStateAbbr[15] = "IA";
    USStateName[16] = "Kansas";         USStateAbbr[16] = "KS";
    USStateName[17] = "Kentucky";       USStateAbbr[17] = "KY";
    USStateName[18] = "Louisiana";      USStateAbbr[18] = "LA";
    USStateName[19] = "Maine";          USStateAbbr[19] = "ME";
    USStateName[20] = "Maryland";       USStateAbbr[20] = "MD";
    USStateName[21] = "Massachusetts";  USStateAbbr[21] = "MA";
    USStateName[22] = "Michigan";       USStateAbbr[22] = "MI";
    USStateName[23] = "Minnesota";      USStateAbbr[23] = "MN";
    USStateName[24] = "Mississippi";    USStateAbbr[24] = "MS";
    USStateName[25] = "Missouri";       USStateAbbr[25] = "MO";
    USStateName[26] = "Montana";        USStateAbbr[26] = "MT";
    USStateName[27] = "Nebraska";       USStateAbbr[27] = "NE";
    USStateName[28] = "Nevada";         USStateAbbr[28] = "NV";
    USStateName[29] = "New Hampshire";  USStateAbbr[29] = "NH";
    USStateName[30] = "New Jersey";     USStateAbbr[30] = "NJ";
    USStateName[31] = "New Mexico";     USStateAbbr[31] = "NM";
    USStateName[32] = "New York";       USStateAbbr[32] = "NY";
    USStateName[33] = "North Carolina"; USStateAbbr[33] = "NC";
    USStateName[34] = "North Dakota";   USStateAbbr[34] = "ND";
    USStateName[35] = "Ohio";           USStateAbbr[35] = "OH";
    USStateName[36] = "Oklahoma";       USStateAbbr[36] = "OK";
    USStateName[37] = "Oregon";         USStateAbbr[37] = "OR";
    USStateName[38] = "Pennsylvania";   USStateAbbr[38] = "PA";
    USStateName[39] = "Rhode Island";   USStateAbbr[39] = "RI";
    USStateName[40] = "South Carolina"; USStateAbbr[40] = "SC";
    USStateName[41] = "South Dakota";   USStateAbbr[41] = "SD";
    USStateName[42] = "Tennessee";      USStateAbbr[42] = "TN";
    USStateName[43] = "Texas";          USStateAbbr[43] = "TX";
    USStateName[44] = "Utah";           USStateAbbr[44] = "UT";
    USStateName[45] = "Vermont";        USStateAbbr[45] = "VT";
    USStateName[46] = "Virginia";       USStateAbbr[46] = "VA";
    USStateName[47] = "Washington";     USStateAbbr[47] = "WA";
    USStateName[48] = "West Virginia";  USStateAbbr[48] = "WV";
    USStateName[49] = "Wisconsin";      USStateAbbr[49] = "WI";
    USStateName[50] = "Wyoming";        USStateAbbr[50] = "WY";

    // Build the drop down
    var stateoption;
    stateoption=document.createElement('option');
    stateoption.setAttribute('value','');
    stateoption.innerHTML = '---United States--------';
    ddl.appendChild(stateoption);

    var i=0;
    for(i=0;i<USStateName.length;i++)
    {
        stateoption=document.createElement('option');
        stateoption.setAttribute('value',USStateAbbr[i]);
        if (USStateAbbr[i]==statevalue)
        {
            stateoption.setAttribute('selected','selected');
            found = true;
        }
        stateoption.innerHTML = USStateAbbr[i] +
        ' (' + USStateName[i] + ')';
        ddl.appendChild(stateoption);
    }

    stateoption=document.createElement('option');
    stateoption.setAttribute('value','');
    stateoption.innerHTML = '---Canada---------------';
    ddl.appendChild(stateoption);

    var i=0;
    for(i=0;i<CStateName.length;i++)
    {
        stateoption=document.createElement('option');
        stateoption.setAttribute('value',CStateAbbr[i]);
        if (CStateAbbr[i]==statevalue)
        {
            stateoption.setAttribute('selected','selected');
            found = true;
        }
        stateoption.innerHTML = CStateAbbr[i] + ' (' + CStateName[i] + ')';
        ddl.appendChild(stateoption);
    }

    stateoption=document.createElement('option');
    stateoption.setAttribute('value','customselection');
    stateoption.innerHTML = ' ** ENTER A CUSTOM PROVINCE ** ';

    if (found==false)
    {
        stateoption=document.createElement('option');
        stateoption.setAttribute('value',statevalue);
        stateoption.setAttribute('selected','selected');
        stateoption.innerHTML = statevalue + ' (Custom)';
        ddl.appendChild(stateoption);
    }

    ddl.appendChild(stateoption);

    // Add the drop down and size accordingly.
    statecell.appendChild(ddl);
    ddl.onchange = textState;
    ddl.style.width = '100%';
}

function textState()
{
    // Find drop down and real textbox
    provinceid = 'stateorprovince';

    var stateobject = document.getElementById(provinceid);
    if (!stateobject)
    {
        provinceid = 'address1_stateorprovince';
        stateobject = document.getElementById(provinceid);
    }
    var ddl = document.getElementById('new_stateorprovince');

    // if dropdown value is customselection, show real textbox
    if (ddl.value=='customselection')
    {
        // Get the state or province cell.
        var statecell = document.getElementById(provinceid + '_d');
        statecell.removeChild(ddl);
        stateobject.style.display = 'inline';
    } else {
        // if dropdown is not customselection,
        // put value from ddl into real textbox.
        stateobject.value = ddl.value;
    }

}

Then in the form’s onload event, just add the method ddlState with no parameters.

setVisibility('section','new_mypicklist','section_main',42);

This hides the section_main section if the value is not 42, which simplifies the process of hiding and showing relevant information.

I also like to use checkboxes to handle the visibility of elements, but checkbox values dont’ change until they lose focus. To work around the issue, I register an onClick event during the form load instead of using the onChange event. This unsupported method allows me to modify the value onClick and change the visibility immediately. To use this I just need to call it in the onload:

registerToggle('section', 'new_checkbox', 'section_main');

If you wanted to hide it when new_checkbox was false (or no), then you would need to specify the value, 0.

registerToggle('section', 'new_checkbox', 'section_main',0);

JScript: visibility.js

This is the main javascript file… visibility.js that you would need to add and reference as a web resource in CRM 2011, everything except for the registerToggle uses supported methods.

function registerToggle(t, attr, c, v) {
    if (typeof (v) === "undefined" || v === null) {
        var v = 1;
    }
    var ctrl = Xrm.Page.ui.controls.get(attr);
    var a = ctrl.getAttribute();
    var el = document.getElementById(attr);

    // Build Toggle Function
    var f = "var ef=function() { " +
              "var a = Xrm.Page.data.entity.attributes.get(attr); " +
              "a.setValue(!a.getValue()); " +
              "setVisibility('" + t + "','" + attr + "','" + c + "'," + v + ");" +
              " };";

    eval(f);

    // Attach to click event
    el.attachEvent('onclick', ef, false);

    // Set visibility
    setVisibility(t, attr, c, v);
}

function setVisibility(t, attr, c, v) {
    switch (t.toLowerCase().charAt(0)) {
        //tab
        case 't': setTabVisibility(attr, c, v);
            break;
        //section
        case 's': setSectionVisibility(attr, c, v);
            break;
        //control
        case 'c': setControlVisibility(attr, c, v);
            break;
        //navigation
        case 'n': setNavigationVisibility(attr, c, v);
            break;
    }
}

function setNavigationVisibility(attributename, navitemname, value) {
    var attribute = Xrm.Page.data.entity.attributes.get(attributename);
    var navitem = Xrm.Page.ui.navigation.items.get(navitemname);
    if (navitem === null)
    {
        return;
    }
    navitem.setVisible(attribute.getValue() == value);
}

function setTabVisibility(attributename, tabname, value) {
    var attribute = Xrm.Page.data.entity.attributes.get(attributename);
    var tab = Xrm.Page.ui.tabs.get(tabname);
    if (tab === null)
    {
        return;
    }
    tab.setVisible(attribute.getValue() == value);
}

function setSectionVisibility(attributename, sectionname, value) {
    var attribute = Xrm.Page.data.entity.attributes.get(attributename);
    var tabs = Xrm.Page.ui.tabs.get();
    for(var i in tabs) {
        var tab = tabs[i];
        var section = tab.sections.get(sectionname);
        if (section !== null) {
            section.setVisible(attribute.getValue() == value);
            return;
        }
    }
}

function setControlVisibility(attributename, controlname, value) {
    var attribute = Xrm.Page.data.entity.attributes.get(attributename);
    var control = Xrm.Page.ui.controls.get(controlname);
    if (control === null)
    {
        return;
    }
    control.setVisible(attribute.getValue() == value);
}

I have not figured out how to make the ribbon on the child grid know that it is a parented grid and have new items use the existing relationship maps. If you figure out a way to make the ribbon work that way, please let me know. This is an unsupported change, it does hack the CRM 2011 grid, but it does work and may save you from having to write a custom grid to drop on a page.

JScript Code:

Note: In CRM 2011 UR1, Xrm.Page.getControl(gridid) does not work for custom subgrids – the script below has been updated to work around this issue.

var GridClick = function(pgrid,sgrid,sfield,defaultid)
{
    //var ids = Xrm.Page.getControl(pgrid)._control.get_innerControl().get_selectedIds();
    var ids = document.getElementById(pgrid).control.get_selectedIds();
    var id = defaultid;
    if (ids.length > 0) {
        id = ids[0];
    }    

    var updateFetchXml = function(fetchxml, field, id)
    {
        var offset = 19;
        var fi = fetchxml.indexOf('<condition attribute="'+field+'" operator="eq" ');
        var nfetchxml = '';
        var closings = '';
        if (fi >= 0) {
            nfetchxml = fetchxml.substring(0,fi);
            offset = fetchxml.indexOf('/>',fi)-fi+2;
        } else {
            fi = fetchxml.indexOf('<filter type="and">');
            if (fi < 0) {
                offset = 0;
                fi = fetchxml.indexOf('<entity');
                fi = fetchxml.indexOf('/>',fi)+2;
                closings = '</filter>';
            }
            nfetchxml = fetchxml.substring(0,fi);
            nfetchxml += '<filter type="and">';
        }

        nfetchxml += '<condition attribute="' + field + '" ';
		nfetchxml += 'operator="eq" value="'+id+'" />';
        nfetchxml += closings;
        nfetchxml += fetchxml.substring(fi+offset);
        return nfetchxml;
    };

    var updateXml = function(grid,xmlfield,subgridfield)
    {
        try {
            //var g = Xrm.Page.getControl(grid)._control.get_innerControl();
            var g = document.getElementById(grid).control;
            var a = g.getParameter(xmlfield)
            var b = updateFetchXml(a, subgridfield, id);
            g.setParameter(xmlfield,b);
        } catch (e) { }
    };

    // Update the fetchXml

    updateXml(sgrid,"fetchXml",sfield);

    // It does not use either of these for filtering, but...
    // I'm not sure where else these could be referenced
    updateXml(sgrid,"effectiveFetchXml",sfield);
    updateXml(sgrid,"fetchXmlForFilters",sfield);

    // Refresh the grid
    //Xrm.Page.getControl(sgrid).refresh();
    document.getElementById(sgrid).control.refresh();

};

var registerSubGridUpdate = function(pgrid, sgrid, sfield) {
    var p = document.getElementById(pgrid);
    var s = document.getElementById(sgrid);
    if (p.readyState!="complete" || s.readyState!="complete") {
        // delay one second and try again.  This is required due to grids becoming asynchronous
        setTimeout('registerSubGridUpdate("' + pgrid + '","'+sgrid+'","'+sfield+'")', 1000); //'
        return;
    }
    var el = document.getElementById(pgrid);

    // Build Toggle Function
    var f = "var ef=function() { " +
              "GridClick('"+pgrid+"','"+sgrid+"','"+sfield+
              "','{00000000-0000-0000-0000-000000000000}');"+
              " };";

    eval(f);

    // Attach to click event
    el.attachEvent("onclick", ef, false);

    // Enable FetchXML in the grid
    document.getElementById(sgrid+'_filterSet').control.RefreshWithFilters();

    // Update to return nothing since it can't link to guid empty
    // or click on the first data row, selecting it.

    // The getControl for subgrids nolonger works in UR1.
    // var r = Xrm.Page.getControl(pgrid)._control.get_innerControl().get_allRecordIds();
    var r = document.getElementById(pgrid).control.get_allRecordIds();

    if (r.length==0) {
        GridClick(pgrid,sgrid,sfield, "{00000000-0000-0000-0000-000000000000}");
    } else {
        var row = document.getElementById('checkBox_'+r[0]);
        do {
            row = row.parentNode;
        } while (row.nodeName !== "TR");
        row.fireEvent("onclick");
    }
    try {
        document.getElementById(sgrid+"_filterSet").control.ToggleFilters(true);
    } catch (e) { }
    //Xrm.Page.getControl(sgrid).refresh();
    document.getElementById(sgrid).control.refresh();
};

You will need to reference the JScript Web-Resource that you are storing the above script, and enter the parameters:

• Parent Grid ID
• Sub-Grid ID
• Sub-Grid’s ID fieldname that refers to the parent grid’s primary id

You can find the grid id in the grid properties. It is the unique name of the grid.

This is where the grid's id field is in the grid properties.

If the parent’s primary id field is contactid, and the child grid’s lookup field is new_lookupid, then the sub-grid’s fieldname should be new_lookupid.

Below is a screenshot of how to setup the form onload.

This does hack the sub-grid and is considered an unsupported change.