機械翻訳について

カスタム・コンテンツ・フォームのedit.html

edit.htmlファイルは、カスタム・コンテンツ・フォームの実装を開始する場所です。 これは必須ファイルです。 このファイルは、コンテンツ・アイテムの作成時や編集時に、iframe内のカスタム・コンテンツ・フォームをロードするために呼び出されます。 一般に、コンテンツ・アイテムのフィールドおよびメタデータのレンダリングに必要なHTMLマークアップ、スタイルおよびコード実装が扱われます。 このファイルは、content-form-sdk-1.0.js JavaScriptライブラリをロードして、ユーザー・インタフェースのコンテンツ・アイテム・ページと通信します。 また、このファイルは、ユーザー・インタフェースへのフィールド値の変更を通知し、インタフェースからの更新をリスニングします。 スタータ・フォームにデフォルトで実装されているこのファイルは、アイテムのシステム・メタデータ・フィールド・エディタをレンダリングします。 これは、タイプ固有のフィールド・エディタを含めるか、必要に応じてシステム・フィールド・エディタを変更するために編集できます。

SDKライブラリのインポート

Oracleには、iframe要素に存在するカスタム・フォームのJavaScript APIが用意されており、ユーザー・インタフェースのコンテンツ・アイテム編集ページと通信できます。 したがって、このライブラリはedit.htmlに含める必要があります。 <script>タグまたはrequireJSを使用して、content-form-sdk-1.0.jsライブラリをロードします。 このSDKには、contentFormSDKというグローバル・オブジェクトがあります。

<script>タグの使用

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

requireJSの使用

<!-- using requireJS -->
<script>
    requirejs.config({
        paths: {
            contentFormSDK: '/documents/static/gemini/api/content-form-sdk-1.0'
            }
        });
        require(['contentFormSDK'],
            function (contentFormSDK) {
            });
</script>

フォームの初期化

contentFormSDK.init()を起動し、コールバック関数を渡してフォームを初期化し、インタフェースとの通信を開始します。 このコールバック関数は、ユーザー・インタフェースでフォームをレンダリングする準備ができたときにSDKのインスタンスで呼び出されます。 SDKインスタンスでは、作成または編集中のアイテムにアクセスでき、カスタム・フォーム・コードがインタフェースと通信できます。

次に、コールバック関数のサンプルinitFormを示します。

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

        function initForm(sdk) {

            // type
            var type = sdk.getType();

            // item being rendered in the form
            var item = sdk.getItem();

            // current locale of the UI
            var locale = sdk.getLocale();

            // fields of the item
            var fields = item.getFields();

            // item properties
            var itemProps = item.get();
        }

        // this is the entry point to initialize the form sdk.
        contentFormSDK.init(initForm);

        })();
</script>

アイテム名および説明の取得と設定

アイテム名および摘要は、item.get()メソッドから取得できます。 これらのエディタがそれぞれのエディタで設定されると、次のサンプルに示すように、item.setName()およびitem.setDescription()をコールして、エディタの変更イベント・リスナーがアイテム内の更新された値を設定できます。

        // item properties
        var itemProps = item.get();

        // name field
        var nameField = itemProps.name ? itemProps.name :'';
        nameField.addEventListener('change', function(e) {
            item.setName(nameField.value);
        });

        //description field
        var descField = document.getElementById('description-input');
        descField.value = itemProps.description ? itemProps.description : '';
        descField.addEventListener('change', function(e) {
            item.setDescription(descField.value);
        });

フィールド値の取得と設定

カスタム・フィールドは、item.getFields()メソッドから取得できます。 返されるのは、フィールド・オブジェクトの配列です。 これらのフィールド・オブジェクトは、フィールド値へのアクセスやその値の変更に役立ちます。

//  fields of the item
    var fields = item.getFields();

    fields.forEach(function(field){
        var fieldDefn = field.getDefinition(),
            fieldName = fieldDefn.name,
            dataType = fieldDefn.datatype;

        // handle updating a field of datatype 'text'
        if(dataType === sdk.dataTypes.TEXT){
            var titleInput = document.getElementById('title');    
            titleInput.value = field.getValue() ? field.getValue() : '';
            titleInput.addEventListener('change', function(e) {
                field.setValue(titleInput.value);
              });
            }
         });
        

システム値およびカスタム・フィールド値の検証

フィールド値の検証はオプションです。 アイテムまたはフィールドに値を設定する前に値を検証する場合は、それぞれの検証メソッドを起動して、値が有効かどうかを確認できます。 これらの検証メソッドは、すぐに使用可能なコンテンツ・フォームの検証と同様に機能します。

// validating name of the item
var nameField = document.getElementById('name-input');
nameField.value = itemProps.name ? itemProps.name : '';
nameField.addEventListener('change', function (e) {
  item.validateName(nameField.value).then(function (validation) {
        if(validation && validation.isValid) {
            // set name of the item
            item.setName(nameField.value);
        } else {
            // display name validation error
        }
    }).catch(function (error) {
        // handle  error
    });
});

// validating a field value
var titleInput = document.getElementById('title');
titleInput.value = field.getValue() ? field.getValue() : '';
titleInput.addEventListener('change', function (e) {
    field.validate(titleInput.value).then(function (validation) {
        if(validation && validation.isValid) {
            field.setValue(titleInput.value);
        } else{
            //display field validation error
        }
    }).catch(function (error) {
        // handle error
    });
});

複数値フィールドの場合、特定の索引の値を検証する場合は、追加のパラメータ{index: <index>}を渡すことができます。

field.validate(value, {index:2}).then(function (validation) {
// handle validation result
});

フォームの検証

コンテンツ・フォームSDKは、検証コールバック機能を登録して、フォームのカスタム検証を実装するメカニズムを提供します。 これは、sdk.registerFormValidation(callback)を介して実行できます。 そのような登録とコールバック関数がある場合は、そのコールバック関数が、フォームの保存時にインタフェースから呼び出されます。 このコールバック関数は、フォームの検証を処理し、フォームが有効かどうかを返します。

var item;
 
function initForm(sdk) {
  item = sdk.getItem();
 
  // validation callback registration
  sdk.registerFormValidation(validateForm);
 
  // ... rest of the form init code
}
 
function validateForm() {
  var isValid = true,
      message = '';
  if (!item.get().name) {
    isValid = false;
    message = 'Name is required'
  }
  return {
    isValid: isValid,
    message: message
  }
}

フォームからのアセットのプレビュー

コンテンツ・フォームSDKには、アイテムが参照するその他のアセットをプレビューするオプションがあります。 これを行うには、sdk.previewAsset({id: <assetId>})を起動し、プレビューするアセットのIDを渡します。 これにより、アセットがプレビュー・ドロワーで開かれます。

sdk.previewAsset({id: <asset_id>});