カスタム・フィールド・エディタ用のview.html

view.htmlには、カスタム・ビューア実装のhtmlマークアップ、スタイルおよびJavaScriptコードが含まれます。ユーザーがコンテンツ・フォームを表示モードに切り替えると、このファイルがカスタム・フィールド・エディタを使用してフィールドに対して実行されます。 useDefaultFormViewが存在しないかappinfo.jsonファイルでfalseに設定されている場合にのみ、view.htmlファイルがコールされます。そうでない場合は、システム・デフォルトのビューアがカスタム・フィールド・エディタに使用されます。 edit.htmlファイルと異なり、view.htmlファイルはフィールドが単一値または複数値のいずれであるかに関係なく、1回のみ起動されます。

次に、div要素の内部HTML内にフィールド値を表示するサンプルview.htmlファイルを示します。

<!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>