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.

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