view.html for Custom Field Editor
The view.html contains html markup, styles and JavaScript code for the custom viewer
implementation. This file is executed for the field using the custom field editor when the
user switches the content form to view mode. The view.html file gets called only when
useDefaultFormView is not present or set to false in the
appinfo.json file, otherwise the system default viewer is used for the custom field editor.
Unlike the edit.html file, the view.html file is invoked only once whether or not the field is
single valued or multi-valued.
Below is a sample view.html file that displays the field value within an inner HTML of a div element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
font: normal 100% "Helvetica Neue", 'Segoe UI', sans-serif-regular, Helvetica, Arial, sans-serif;
color: #666;
}
div {
font-size: .875rem;
}
span {
font-style: italic;
}
</style>
</head>
<body>
<div id="inputValue"></div>
</body>
<!-- load the attribute editor SDK -->
<script src="/documents/static/gemini/api/field-editor-sdk-1.0.js"></script>
<script>
/* globals editorSDK */
(function() {
var textElement = document.getElementById('inputValue');
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();
if (value) {
textElement.innerText = value;
} else {
textElement.innerHTML = '<span>No value specified</span>';
}
}
editorSDK.initSDK(initEditor);
})();
</script>