edit.html for Custom Field Editor

The edit.html file is where the custom field editor implementation goes. It is a mandatory file. In general it deals with html markup, styles and JavaScript code needed for the editor. This file loads the field-editor-sdk-1.0.js JavaScript library in order to communicate with the content item form. The edit.html file loads in an iframe inside the content item form for the field for which the custom field editor is configured. When you create a custom field editor, the default custom editor is a simple text field that demonstrates how the field editor can render within the form and get and set field values. If the custom field editor is configured for a multi-valued field, then the editor is implemented within the iframe for each entry.

To adapt a custom field editor you need to:

Edit the HTML markup
Import the SDK library
Get and set field values
Validate field values
Enable and Disable field editor

Edit the HTML Markup

Open edit.html in a text editor and make the required changes. For example:

<html>
    <head>
        <style>
            body {
            margin: 0;
            padding: 0;
            font: normal 100% "Helvetica Neue", 'Segoe UI', sans-serif-regular, Helvetica, Arial, sans-serif;
            }
            input {
            width: 100%;
            height: 32px;
            font-size: 14px;
            }
        </style>
    </head>
    <body>
        <!-- In this case the editor is a text field -->
        <input id="textInput" type="text">
    </body>

    .......
</html>

Import the SDK Library

Import the field-editor-sdk-1.0.js library either using the <script> tag or requireJS. This SDK has a global object called editorSDK.

<!-- load the field editor SDK -->
<script src="/documents/static/gemini/api/field-editor-sdk-1.0.js"></script>

Get and Set Field Values

Initialize the editorSDK and pass a callback function and optional container DOM element. This callback function is called by the editorSDK's initSDK() method with an instance of the SDK. With the SDK instance, the field being edited can be accessed. With the field instance in place, the value of the field being edited can be obtained and a new value can be set.

Below is the sample callback function initEditor that gets the field object corresponding to this custom editor from the SDK instance, then gets the value of the field and sets in the text field editor. It then listens to field value change, and updates field's value.

<script>
        /* globals editorSDK */
        (function() {

        function initEditor(sdk) {
            // retrieve the field object rendered by this custom editor
            var field = sdk.getField();

            // retrieve the current field value
            var value = field.getValue();

            var inputField = document.getElementById('textInput');

            // set the current field value in this editor
            inputField.value = value;

            // when the editor value changes, set the changed value
            // to the field
            inputField.addEventListener('change', function(e) {
              field.setValue(inputField.value);
            });

            // if the field is updated externally, keep the editor in sync
            field.on('update', function(value) {
              inputField.value = value ? value : '';
            });
        }

        // this is the entry point to initialize the editor sdk.
        editorSDK.initSDK(initEditor);

        })();
</script>

Validate Field Values

In addition to getting and setting field values, if the custom field editor needs to validate the values entered, then it can use the sdk.setValidation() function and pass a callback function that handles the editor validation. In the example below, setValidation passes the callback function validateValue. This works when the validation property is set to true in the appinfo.json file.

        // sample validation function that
        // validates whether entered length of the string is more than 10
        function validateValue(value) {
            var isValid = true;

            if (value && value.length > 100) {
            isValid = false;

            return {
                isValid: false,
                title: getTranslatedString('validation.title', currentLocale),
                message: getTranslatedString('validation.message', currentLocale)
            };
            }
            return isValid;
        }

        function initEditor(sdk) {
            // retrieve the field object rendered by this custom editor
            var field = sdk.getField();
            ....
            ....

            // register a custom validation function for this editor
            sdk.setValidation(validateValue);
            ....
            ....
        }

        // this is the entry point to initialize the editor sdk.
        editorSDK.initSDK(initEditor);

Enable and Disable Field Editor

Content item form field editors get enabled and disabled. For example, each field editor goes into the disabled mode when annotation starts, and when the user comes out of annotation mode the form field editors get enabled again. Custom field editors also need to follow this rule, so the custom field editor implementation should handle the enabling and disabling of the editors when the form broadcasts to do so. This is handled by calling the registerDisable method of the SDK and passing a callback function that handles enabling the editor.

        //
        // disable/enable call back that gets called if the content form
        // needs to enable/disable this editor
        function renderDisabled(value) {
            if (value) {
            document.getElementById('textInput').disabled = true;
            } else {
            document.getElementById('textInput').disabled = false;
            }
        }

        function initEditor(sdk) {
            // retrieve the field object rendered by this custom editor
            var field = sdk.getField();
            ....
            ....

            //register render disabled function for this editor
            sdk.registerDisable(renderDisabled);
            ....
            ....
        }

        // this is the entry point to initialize the editor sdk.
        editorSDK.initSDK(initEditor);