How do I access Managed Metadata Fields with jQuery?

I had busy times the last months due to conferences and a lot of customer projects. Unfortunately, there was not much time left for writing blog posts. Nonetheless, I am back again for blogging and start today with a solution to a problem I faced in one of my customer projects.

In this project it was necessary to access managed metadata columns in a NewForm.asxp and an Editform.aspx and populate them with values. I did it by using jQuery (for simplicity) to access the desired field. It was important for me avoiding doing any changes to the forms themselves. Fortunately, I was able to use my Codeplex project LFM framework to address the desired form and fields accordingly (need to do some advertisement ).

At this stage of Codeplex project there is no direct managed metadata field integration. I am going to change this soon. In that way, everything can be directly addressed by the LFM framework. Just wait a little bit for the next release.

First of all, we have to identify the correct field on the form. To do this we are going to use as “unique identifier” the display name of the field. Unfortunately, I did not find a better solution to this problem due to different rendering behaviors from browsers (the world is not governed by IE only). Therefore, there does not seem to be a reliable way to address the fields with the internal names of the columns.

Now let us see how we are going to reference the managed metadata field by using the display name shown in the form:

var displayName = "Put the Display Name here";
var inputControl = $('div[class="ms-taxonomy-fieldeditor"][title^="' + displayName + '"]');

if (inputControl.length == 0) {
  inputControl = $('div[class="ms-taxonomy-fieldeditor ms-taxonomy-writing"][title^="' + displayName + '"]');
}

The first line hast to be changed with the desired display name of your form you want to address (e.g., Places, People, Organizations). Since the managed metadata field that we are going to reference has two possible states, we have to live with two jQuery queries:

• the first query is valid for managed metadata fields without mouse focus “ms-taxonomy-fieldeditor”
• the second query is necessary when the managed metadata field has a mouse focus. The class of this DOM element changes to “ms-taxonomy-fieldeditor ms-taxonomy-writing”

Now, that we have a referenced managed metadata field, we are going to populate it with some values.

If you want to populate the field with multiple values, then separate them with a semicolon

var value = "put your value here. Multi valued fields separated by ;"
var editableRegion = inputControl.find('div[id$="editableRegion"]');

if (editableRegion.length > 0) {
  editableRegion.html(value);
  var taxonomyParent = editableRegion.parent().parent().parent();
  if (taxonomyParent.length > 0) {
     var taxonomyObject = new Microsoft.SharePoint.Taxonomy.ControlObject(taxonomyParent.get(0));
     taxonomyObject.validateAll();
  }
}

From the code snippet above it is possible to see that we write the values into the editable region of the managed metadata column. Unfortunately, this is not enough to populate managed metadata columns with the common ID-Value pairs that this column is expecting. Therefore, we have to use the Taxonomy.ControlObject Javascript class from Microsoft to validate the field values. (Credits to this blog post of Thomas Zepeda McMillan for giving the necessary hints). This fancy class takes the values that we just populated in the editableRegion element and validates them by using some taxonomy web services in the background. This validation corrects the necessary ID-Value combinations needed by the column.

I am going to integrate this code in the LFM framework soon. So stay tuned.

Hope this helps,

Patrick