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);