Setting Taxonomy and URL fields in JavaScript Form Templates

Recently, I’ve had a need to build a custom New and Edit form in an Office 365 system. Often I’d approach this with a little custom Application page to use as the form, but that isn’t available in Office 365. I had been about to start writing reams of JQuery and JavaScript until one of my colleagues introduced me to JSLinks.

JSLinks is really just a way of adding links to your JavaScript file into pages. That’s nice, but not that exciting. However, you can use it to add JavaScript to override the rendering of fields on your forms, allowing you change how the fields are displayed, and you can tie into things like the validation and value submission systems of the for, so you can check the field is valid, and save the right value. Neat.

CaptureThe highlighted fields all have overridden rendering in the above screenshot. Martin Hatch has a good series of posts about this – Part 2 and Part 3 are particularly relevant, and well worth a look.

However, what he doesn’t describe is what format of values does your JavaScript have to return? For example, rather than saving just text, what if you’d a Taxonomy Field, or a URL field? Well, I had to do some investigation, and I found:

  • URL fields need to be saved as a string in the format URL + ", " + LinkText
  • Taxonomy (Managed Metadata) fields are strings in the form:
    • TermTitle + "|" + TermGUID for single valued fields, and
    • TermTitle + "|" + TermGUID + ";" + TermTitle + "|" + TermGUID for multi-valued fields.

Note the departure from the ;# separator you normally see in the server object model.

Therefore, to plagiarise from Martin’s example, field callback functions to return the values might read:

mjh.getUrlFieldValue = function (fieldName) {
var linkText = "...";
var linkHref = "http://www.example.com";
return linkHref + ", " + linkText;
};

mjh.getTaxonomyFieldValue = function (fieldName) {
var termText = "...";
var termGuid = "...";
return termText + "|" + termGuid;
};
Advertisements
Setting Taxonomy and URL fields in JavaScript Form Templates

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s