Creating a Field Editor

A field editor is an HTML document that displays an editable representation of the data stored in a content item field. Javascript code is used to provide the editing functionality, and this code is able to make use of a built-in field-editor that can:

Retrieve data from the field.
Retrieve a VDF model defining the structure of the data stored in the field.
Write modified data back to the field.
Fire an event whenever the value in the field changes.
Display a pop-up dialog (useful for custom fields that have a large interface requiring a lot of screen space).

The field editor must be a valid and complete HTML document. The following example defines a field editor consisting of a slider control:

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(window).load(function () { 
        var editor = require("field-editor");
        $("#thefield").val(editor.value);
        editor.on('value-changed', function() {
           $("#thefield").val(editor.value);
         });
      $('#thefield').change(function(){
          editor.value = $(this).val();
        });              
      });
    </script>
    <style>
      #viewport {margin: 0; padding: 0;}
      .spacer {padding: 10px;}
      #thefield {width: 100%;}
    </style>
  </head>
  <body id="viewport" style="height: 80px; overflow: hidden;">
    <div class="spacer">
      <input id="thefield" type="range" max="100" min="0" value="0"><br/>
    </div>
  </body>
</html>

Here is what this field editor looks like in Content Studio:

The important points to note here are:

A field-editor object called editor is created in the window.load() event code.
The editor.value property is used to retrieve the field value and initialize the slider input element (called thefield).
editor.value is also used in thefield.change event to write changes back to the content item field.
editor.on() is used to listen for value-changed events and update the slider input element. This ensures that the editor will respond if changes are made to the field by other users.

This is obviously a very simple example, but it is possible to make much more sophisticated editors that allow the editing of complex fields containing many different atomic values, or fields that contain structured data stored in JSON format. The field-editor object has a model property that returns the field's VDF model. This may be useful for creating editors that can handle a variety of different complex field types. For a full description of the field-editor object, see the on Content Studio Javascript API Reference.

In order to be able to use the field editor, you must then deploy it to some location on the net that is accessible from Content Studio. The recommended location is http://content-engine-domain/webservice-extensions.