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!

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());
  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)

It stored the images in the notes (still does – and currently does not have an option for storing elsewhere…). I still have not figured out how to put buttons on the ribbon that can fire the upload control, etc. Although, I recently found out that Marco Amoedo (blog: marcoamoedo.com, twitter: marcoamoedo) had leveraged the ImageTools for Silverlight to add WebCam support and I was already starting to play with it to add Gif support. I was able to work with him to get his modifications and add gif support. Now you have even more useful features that you can enable with a simple configuration change and a new silverlight web-resource.

Now, if you look in the bottom right, there is a webcam button next to the upload button that allows you to take a picture instead of uploading one. When you try and take the picture you will receive the following request for access.

So you may be asking: what is ImageTools for Silverlight? where did it come from?, and why are you using it? The answers are simple. According to the codeplex page for the ImageTools for Silverlight, it is "a library, which provides additional functionality for loading, saving and [manipulating] images from different sources and with different formats.&quot The reason to use it is simple, it is open-source, and it’s license allows me to use it (it is realeased under Ms-PL – the same license as my control on codeplex).

If you already use the CRM Attachment Image, you can just overwrite your xap file with the one from codeplex, but you will still need to edit the properties of the web-resource on your form to include |webcam=true. The new example syntax is:

field=new_imageattachmentid|subject='Contact''s Image'|prefix='img-'|webcam=true

So a special thanks to Marco for his help, this is a great change that I think a lot of people will be able to use.

If you need assistance in setting up the image control, I have it documented on codeplex, but here is a simple set of directions that work at the time of this article bieng posted:

1. Create a solution
2. Upload the xap as a web-resource
3. Add your entity to the solution, and create a new text field on the entity that is 50 characters long, not searchable, preferably called something like attachmentid or savedattachmentid – it will be used to store the annotationid or the note that stores the attached image.
4. Add the field to the form and make it not visible.
5. Add the Web-Resource to the form
   • Check the checkbox to pass the id and type, etc.
   • In the parameters add the fields and their values seperated by a pipe |
6. Save and publish the form.
7. Test it!

The example config for the web-resource is before the instructions, and are very useful because you can just copy them and change the field new_imageattachmentid to your field name and it should work. There are a number of fields available to you if you want to change how the control functions, they are documented on codeplex, and they are:

• field – The name of the field you are using to store the annotationid of the attachment. It is required, and the field MUST BE ON THE FORM (it does not need to be visible).
• subject – The subject for attachments – the following substitutions are available (%s will be replaced with the name of the file )
• prefix – The prefix for all attachment images (this is used to filter the results, etc)
• hidebuttons – Used to hide the buttons that are in the silverlight control so that you can use the ribbon to control the application
• savefirst – Used to set the message that is displayed on a form that is in Create Mode
• webcam – Set to true if you want to enable the webcam it is not currently tide to hidebuttons

I added the following parameters at Bill’s request (Thanks Bill):

• max-width: maximum width for all images
• max-height: maximum height for all images
• max-webcam-width: maximum webcam image width, overrides max-width for web-cam images
• max-webcam-height: maximum webcam image height, overrides max-height for web-cam images

Here is what my bing translator integration looks like.

You can download an unmanaged solution to implement the bing translator for cases, letters, tasks, and emails, you can download it here: Translate_1_0.zip. It will not modify your forms, but if you have unmanaged ribbon buttons on those entities, it will remove them. So to avoid that problem you can install the unmanaged solution with the JScript (that you need to edit to set your bing api key) and the images, and then follow the RibbonDiff guide in the SDK to add the buttons, or install the managed solution to add the button to the ribbons for cases, letters, tasks, and emails.

To start, I created a JScript file to include as a web-resource that I could leverage when a button is clicked on the ribbon. This JScript file utilizes the Bing Translation WebServices to translate text.

YOU WILL NEED TO EDIT THE JSCRIPT FILE AND CHANGE ‘YOUR API KEY GOES HERE’ TO CONTAIN YOUR API KEY.

var bing = {};
bing.popup = {};
bing.language = {};

bing.appId = 'YOUR API KEY GOES HERE';
bing.language.text = '';
bing.language.from = '';
bing.language.to = 'en';

bing.language.detect = function (text,oncomplete)
{
  var src = "https://api.microsofttranslator.com/V2/Ajax.svc/Detect?oncomplete=" +
      oncomplete + "&appId="+ bing.appId + "&text=" + text;
  var s = document.createElement("script");
  s.src = src;
  s.id = "bingdetect";
  document.getElementsByTagName("head")[0].appendChild(s);
}

bing.language.translate = function(from,to,text,oncomplete)
{
  var src = "https://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=" +
      oncomplete + "&appId=" + bing.appId + "&from=" + from +
      "&to=" + to + "&text=" + text;

  var s = document.createElement("script");
  s.src = src;
  s.id = "bingtranslate";
  document.getElementsByTagName("head")[0].appendChild(s);
}

bing.popup.show = function(text)
{
  var idiv = document.createElement('div');
  idiv.id = "bingtext";
  idiv.style.height = "265px";
  idiv.style.width = "306px";
  idiv.style.align = "left";
  idiv.style.textAlign = "left";
  idiv.style.backgroundColor = "white";
  idiv.style.overflow = "auto";
  idiv.style.padding = "2px";
  idiv.style.margin = "2px";
  idiv.style.border = "1px solid black";
  idiv.innerHTML =  "<p>"+text+"</p>";

  var iurl = Xrm.Page.context.getServerUrl();
  iurl += "WebResources/tran_img/translatelogo.gif";

  var img = document.createElement('img');
  img.src = iurl;

  var div = document.createElement('div');
  div.id = "bingpopup";
  div.appendChild(img);
  div.appendChild(idiv);
  div.innerHTML += "<button style='text-align:center;width:60px;' onclick='bing.popup.copy();'>Copy</button>&nbsp;&nbsp;";
  div.innerHTML += "<button style='text-align:center;width:60px;' onclick='bing.popup.hide();'>Close</button>";
  div.style.position = "absolute";
  div.style.backgroundColor = "#20415F";
  div.style.border="1px solid black";
  div.style.left = "50%";
  div.style.top = "50%";
  div.style.color = "black";
  div.style.padding = "5px";
  div.style.width = "320px";
  div.style.height = "340px";
  div.style.marginLeft = "-160px";
  div.style.marginTop = "-170px";
  div.setAttribute("align","center");
  document.getElementsByTagName("body")[0].appendChild(div);
}

bing.popup.hide = function()
{
  var deleteElement = function(id) {
    var el = document.getElementById(id);
    el.parentNode.removeChild(el);
  }

  deleteElement("bingpopup");
  deleteElement("bingdetect");
  deleteElement("bingtranslate");
}

bing.popup.copy = function()
{
  var el = document.getElementById('bingtext');

  if (window.clipboardData && window.clipboardData.setData)
  {
    window.clipboardData.setData("Text", el.innerText);
  }
}

bing.getSelectedText = function (p)
{
  if (p.getSelection)
  {
    text = p.getSelection();
  }
  else if (p.selection)
  {
    text = p.selection.createRange().text;
  }
  return text;
}

// get current control
bing.language.toolbarClick = function (ctrl)
{
  var text = '';
  if (window.getSelection)
  {
    text = window.getSelection();
  }
  else {
    text = bing.getSelectedText(document);
  }

  if (text==null || text=='') {
    if (ctrl==null) {
      ctrl = Xrm.Page.ui.getCurrentControl();
    }

    var entityName = Xrm.Page.data.entity.getEntityName();
    if (ctrl==null && entityName.match(/letter|email|task/)) {
      ctrl = Xrm.Page.ui.controls.get('description');
    }

    if (ctrl==null) {
      alert('Please highlight the text to translate.');
      return;
    }

    if (ctrl.getControlType()!="standard") {
      return; // only standard
    }

    if (ctrl.getName()=="notescontrol") {
      text = bing.getSelectedText(document.frames['notescontrol'].document);
      if (text==null || text == "") {
        alert('Please highlight the text to translate.');
      }
    }

    if (text == null || text == "") {
      var attr = ctrl.getAttribute();
      if (attr!=null) {
        var t = attr.getAttributeType();
        if (t.match(/string|memo/))
        {
          text = attr.getValue();
        }
      }
    }
  }

  if (text == null || text == "") {
    // Nothing to translate
    return;
  }  

  text = encodeURIComponent(text);
  bing.language.text = text;

  bing.language.from = '';
  bing.language.detect(text,"translate");
}

window.translate = function (response)
{
  bing.language.from = response;
  bing.language.translate(bing.language.from,bing.language.to,bing.language.text,"translated");
}

window.translated = function (response)
{
  bing.popup.show(response);
}

The JScript uses the Bing Translate logo image (WebResources/tran_img/translatelogo.gif – you may need to change the path in the JScript):

I added some images for Microsoft Translate button images:

16×16 image tran_icontranslate_16x16.png

32×32 image tran_icontranslate_32x32.png

Then I added the buttons to the ribbons on the entities I wanted to have bing translation capabilities by following the SDK guidelines to add a button. Here is the RibbonDiffXml for a case. You can follow the guide to change it to be on different entities.

<RibbonDiffXml>
  <CustomActions>
    <CustomAction Id="bing.incident.form.Bing.CustomAction"
                  Location="Mscrm.Form.incident.MainTab.Groups._children"
                  Sequence="110">
    <CommandUIDefinition>
      <Group Id="bing.incident.form.Bing.Group"
             Command="bing.incident.form.Bing.Command"
             Title="$LocLabels:bing.incident.Bing.Title"
             Sequence="39"
             Template="Mscrm.Templates.Flexible2"
             Image32by32Popup="$webresource:tran_icon/translate_32x32.png">
      <Controls Id="bing.incident.form.Bing.Controls">
        <Button Id="bing.incident.form.Bing.Button.BingTranslator"
                Command="bing.incident.Bing.Button.BingTranslator.Command"
                Sequence="10"
                LabelText="$LocLabels:bing.incident.Bing.Button.BingTranslator.LabelText"
                ToolTipTitle="$LocLabels:bing.incident.Bing.Button.BingTranslator.LabelText"
                ToolTipDescription="$LocLabels:bing.incident.Bing.Button.BingTranslator.Description"
                TemplateAlias="isv"
                Image16by16="$webresource:tran_icon/translate_16x16.png"
                Image32by32="$webresource:tran_icon/translate_32x32.png" />
      </Controls>
      </Group>
    </CommandUIDefinition>
    </CustomAction>
    <CustomAction Id="bing.incident.form.Bing.Popup.CustomAction"
                  Location="Mscrm.Form.incident.MainTab.Scaling._children"
                  Sequence="140">
    <CommandUIDefinition>
      <Scale Id="bing.incident.form.Bing.Popup.1"
             GroupId="bing.incident.form.Bing.Group"
             Sequence="85"
             Size="Popup" />
    </CommandUIDefinition>
    </CustomAction>
    <CustomAction Id="bing.incident.form.Bing.MaxSize.CustomAction"
                  Location="Mscrm.Form.incident.MainTab.Scaling._children"
                  Sequence="120">
    <CommandUIDefinition>
      <MaxSize Id="bing.incident.form.Bing.MaxSize"
               GroupId="bing.incident.form.Bing.Group"
               Sequence="21"
               Size="LargeLarge" />
    </CommandUIDefinition>
    </CustomAction>
  </CustomActions>
  <Templates>
    <RibbonTemplates Id="Mscrm.Templates"></RibbonTemplates>
  </Templates>
  <CommandDefinitions>
    <CommandDefinition Id="bing.incident.Bing.Button.BingTranslator.Command">
    <EnableRules />
    <DisplayRules />
    <Actions>
      <JavaScriptFunction Library="$webresource:tran_js/bing.translate.js"
                          FunctionName="bing.language.toolbarClick">
      <CrmParameter Value="SelectedControl" />
      </JavaScriptFunction>
    </Actions>
    </CommandDefinition>
    <CommandDefinition Id="bing.incident.form.Bing.Command">
    <EnableRules></EnableRules>
    <DisplayRules />
    <Actions />
    </CommandDefinition>
  </CommandDefinitions>
  <RuleDefinitions>
    <TabDisplayRules />
    <DisplayRules />
    <EnableRules />
  </RuleDefinitions>
  <LocLabels>
    <LocLabel Id="bing.incident.Bing.Title">
    <Titles>
      <Title languagecode="1033"
             description="Bing" />
    </Titles>
    </LocLabel>
    <LocLabel Id="bing.incident.Bing.Button.BingTranslator.LabelText">
    <Titles>
      <Title languagecode="1033"
             description="Translate" />
    </Titles>
    </LocLabel>
    <LocLabel Id="bing.incident.Bing.Button.BingTranslator.Description">
    <Titles>
      <Title languagecode="1033"
             description="Translate text area with bing!" />
    </Titles>
    </LocLabel>
  </LocLabels>
</RibbonDiffXml>

Here are the files to download if you want to use it:

• Option A
  • Complete unmanaged solution: Translate_1_0.zip
• Option B
  • Unmanaged Image and JScript solution: Translate_1_0-ImageJS.zip
    • You will need to edit the JScript to set your Bing API key.
  • Managed Solution for the Ribbons on cases, letters, tasks, and emails: Translate_1_0-Ribbon-Managed.zip

A while back Christian asked about this image control I had in a screenshot on one of my posts. And while it was ok, it was far from being something I would throw into a production environment. It was a starting point. I am proud to say that I have put the Silverlight control on codeplex at CRMAttachmentImage.CodePlex.com. It is in beta because I am still working on putting the buttons on the ribbon instead of in the control.

** If anyone has any ideas for loading a file in JavaScript and sending it to the Silverlight control to load the data, I’m open to suggestions.

The image itself is stored as an attachment in the notes. This way the control is utilizing CRM and not an external system to handle the images. Simply put in order to use this your users will need to be able to read notes and create them. They will also need the "Customization > ISV Extensions" permission. If you are not seeing the images, and everything else is right, then try checking the permissions.

Instructions are posted on the codeplex site, but it is fairly straight forward to add to a form. First, you just upload the web-resource and create a text field to store the guid for the not (annotationid). It MUST BE ON THE FORM, but it does not need to be visible, and you probably don’t want to make it searchable. The web resource does require the id and type to be passed, and some additional parameters.

The parameters are separated by a pipe | instead of a comma. An example parameter is:

field=new_imageattachmentid|subject='Contact''s Image'|prefix='img-'

Check out the full parameter list at CRMAttachmentImage.CodePlex.com. If you have any suggestions or comments, please let me know.

In essence, the SilverCrmSoap library objectifies FetchXml allowing you to modify it easily in code, adds an XrmHelper for calling the context and page functions from a Silverlight application, a FormHelper for setting values on a form, and a SoapHelper for making all of your SOAP calls. It becomes a real time saver because you don’t have to recompile it. And, if your curious where/when to use it, it’s pretty straight forward. If you need SOAP for CRM, then use the library and save time.

How do you know to use SOAP vs REST?

Use SOAP when…

• You need to use late binding to create a dynamic Silverlight application that works with any (or multiple) entities.
• You need to execute a message.
• You need to assign records.
• You need to retrieve metadata.

There are benefits to using the REST endpoint too, and being able to quickly leverage both end points in a project can be extremely helpful.

Use REST when…

• You need to early bind to objects.
• You want to leverage LINQ with the early bound objects.
• You want compile time type support and IntelliSense.

You can check out the SilverCrmSoap library on CodePlex or read more about it on the CRM Team Blog.

Enjoy!

-MSCRMBlogger

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);
}

function LoadTemplate(templateid, objectid, objecttypecode)
{
    var command = new RemoteCommand("EmailTemplateService", "GetInstantiatedEmailTemplate");
    command.SetParameter("templateId", templateid );
    command.SetParameter("objectId", objectid);
    command.SetParameter("objectTypeCode", objecttypecode);

    var result = command.Execute();

    if (result.Success)
    {
        var o = new Object();
        o.EmailBody = "";
        o.EmailSubject = "";
        if(typeof(result.ReturnValue) == "string")
        {
            oXml = CreateXmlDocument(false);
            oXml.loadXML(result.ReturnValue);
            o.EmailBody = oXml.selectSingleNode("template/body").text;
            o.EmailSubject = oXml.selectSingleNode("template/subject").text;

            crmForm.all.description.InsertValue( o.EmailBody  );
            if( !IsNull( o.EmailSubject ) && o.EmailSubject.length > 0 )
            {
                crmForm.all.subject.DataValue =
                    CrmEncodeDecode.CrmHtmlDecode(o.EmailSubject).substr(0, crmForm.all.subject.MaxLength);
            }
        }
    }
}

To set the default template, you need the templateid, you can get this by opening the template and hitting CTRL-N, or you can just operate in tab mode and see all the id’s and urls at all times. I prefer that view… The below code uses the templateid to set a default email template when a new email is created from a case, account, and contact. You could easily extend this for other templates and entities. Currently I am setting them all to the same template, which won’t work.

var CRM_FORM_TYPE_CREATE = 1;
if (crmForm.FormType==CRM_FORM_TYPE_CREATE)
{
    var otype = 0;
    var tmpid = '';
    switch (crmForm.all.regardingobjectid.DataValue[0].typename)
    {
        case 'incident': otype=112; tmpid='{F8E179BF-8E7C-DA11-BF9A-00142216345E}'; break;
        case 'account':  otype=1;   tmpid='{F8E179BF-8E7C-DA11-BF9A-00142216345E}'; break;
	case 'contact':  otype=2;   tmpid='{F8E179BF-8E7C-DA11-BF9A-00142216345E}'; break;
        default: return;
    }

    var oid = crmForm.all.regardingobjectid.DataValue[0].id;

    if (tmpid==undefined || tmpid==null) return;

    LoadTemplate(tmpid, oid, otype);
}

This could be extended using my business unit lookup or getting roles assigned to a user..

Let me know if you have any questions – or if you figure out a way to get the id of a template from the name of one…

First, we need a set of functions to facilitate our our process. We need to get the roles of the current user, GetCurrentUserRoles. Then we need to see if the user has the role, UserHasRole. Finally we can hide the fields (HideFieldByRole) or tabs (HideTabByRole).

GetCurrentUserRoles
The first thing we need to do is get a list of roles according to the current user. There are a couple of different ways to do this. You could use the RemoteCommand to get the current user and then their roles, a blog post by Zahara Hirani on Hide Show Fields in CRM 4 based on security role outlines this. However, I do not want to make multiple request for the same information. I want to get the roles for the current user in one line. Below shows the GetCurrentUserRoles that implements a RetrieveMultiple query to get the names of the roles that a user has in one request.

function GetCurrentUserRoles()
{
  var xml = "" +
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
    "<soap:Envelope xmlns:soap=\"" +
    "http://schemas.xmlsoap.org/soap/envelope/" +
    "\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" +
    " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\">" +
    GenerateAuthenticationHeader() +
    " <soap:Body>" +
    " <RetrieveMultiple xmlns=\"" +
    "http://schemas.microsoft.com/crm/2007/WebServices\">" +
    " <query xmlns:q1=\"" +
    "http://schemas.microsoft.com/crm/2006/Query" +
    "\" xsi:type=\"q1:QueryExpression\">" +
    " <q1:EntityName>role</q1:EntityName>" +
    " <q1:ColumnSet xsi:type=\"q1:ColumnSet\">" +
    " <q1:Attributes>" +
    " <q1:Attribute>name</q1:Attribute>" +
    " </q1:Attributes>" +
    " </q1:ColumnSet>" +
    " <q1:Distinct>false</q1:Distinct>" +
    " <q1:LinkEntities>" +
    " <q1:LinkEntity>" +
    " <q1:LinkFromAttributeName>roleid</q1:LinkFromAttributeName>" +
    " <q1:LinkFromEntityName>role</q1:LinkFromEntityName>" +
    " <q1:LinkToEntityName>systemuserroles</q1:LinkToEntityName>" +
    " <q1:LinkToAttributeName>roleid</q1:LinkToAttributeName>" +
    " <q1:JoinOperator>Inner</q1:JoinOperator>" +
    " <q1:LinkEntities>" +
    " <q1:LinkEntity>" +
    " <q1:LinkFromAttributeName>systemuserid</q1:LinkFromAttributeName>" +
    " <q1:LinkFromEntityName>systemuserroles</q1:LinkFromEntityName>" +
    " <q1:LinkToEntityName>systemuser</q1:LinkToEntityName>" +
    " <q1:LinkToAttributeName>systemuserid</q1:LinkToAttributeName>" +
    " <q1:JoinOperator>Inner</q1:JoinOperator>" +
    " <q1:LinkCriteria>" +
    " <q1:FilterOperator>And</q1:FilterOperator>" +
    " <q1:Conditions>" +
    " <q1:Condition>" +
    " <q1:AttributeName>systemuserid</q1:AttributeName>" +
    " <q1:Operator>EqualUserId</q1:Operator>" +
    " </q1:Condition>" +
    " </q1:Conditions>" +
    " </q1:LinkCriteria>" +
    " </q1:LinkEntity>" +
    " </q1:LinkEntities>" +
    " </q1:LinkEntity>" +
    " </q1:LinkEntities>" +
    " </query>" +
    " </RetrieveMultiple>" +
    " </soap:Body>" +
    "</soap:Envelope>" +
    "";  

  var xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");  

  xmlHttpRequest.Open("POST", "/mscrmservices/2007/CrmService.asmx", false);
  xmlHttpRequest.setRequestHeader("SOAPAction",
    " http://schemas.microsoft.com/crm/2007/WebServices/RetrieveMultiple");
  xmlHttpRequest.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
  xmlHttpRequest.setRequestHeader("Content-Length", xml.length);
  xmlHttpRequest.send(xml);  

  var resultXml = xmlHttpRequest.responseXML;
  return(resultXml);
}

The next method is a simple method for searching the XML result from GetCurrentUserRoles. By passing it the roles you are looking for and the roles the user has, it will determine if there is a match. The roles it is passed is separated by a pipe (|).

function UserHasRole(roleNames, rolesXML)
{
  // split roleNames on pipe
  var matchon = roleNames.split('|');

  if(rolesXML != null)
  {
    //select the node text
    var roles = rolesXML.selectNodes("//BusinessEntity/q1:name");
    if(roles != null)
    {
      for( i = 0; i < roles.length; i++)
      {
        for (j = 0; j < matchon.length; j++)
	{
	  // If there is a match, return true, found
	  if (roles[i].text == matchon[j]) return true;
        }
      }
    }
  }
  //otherwise return false
  return false;
}

Finally, we can now implement helper methods to allow the hiding of a tab or a field if a user DOES NOT have a specific role.

function HideTabByRole(role, roles, tabnumber)
// Tab number starts on 0
{
  var tab = document.getElementById('tab'+tabnumber+'Tab');
  var usrRole = UserHasRole(role, roles);
  if(!usrRole)
  {
    tab.style.display = "none";
  }
}

function HideFieldByRole(role, roles, field,cfield,dfield)
{
  var usrRole = UserHasRole(role, roles);
  if(!usrRole)
  {
    field.style.visibility = 'hidden';
    field.style.position = 'absolute';
    cfield.style.visibility = 'hidden';
    cfield.style.position = 'absolute';
    dfield.visibility = 'hidden';
    dfield.style.position = 'absolute';
  }
}

To implement this process, all you have to do is put every piece of code in this article inside your onload with the following customized for your situation.

var UserRoles = GetCurrentUserRoles();

HideTabByRole('Account Managers|SystemAdministrators', UserRoles, 3);

HideFieldByRole('Account Managers', UserRoles,
                crmForm.all.parentcustomerid,
                crmForm.all.parentcustomerid_c,
                crmForm.all.parentcustomerid_d);

If you have any questions of problems implementing this in your environment, please let me know, and I’ll do my best to help you get it working