フィールド・テンプレートを使用したフィールドのレンダリング方法の制御

「フィールド・テンプレート」を適用することで、動的フォームまたは表のレイアウトでのフィールドのレンダリング方法をカスタマイズできます。フィールド・テンプレートには、テキスト・フィールドやイメージなどのUIコンポーネントが含まれ、スタイルの詳細などのプロパティを定義します。テンプレート内のコンポーネントは、レイアウトで定義された変数、定数、アクション・チェーンおよびイベント・リスナーにアクセスできます。

フィールドのデフォルト・テンプレートを定義すると、すべてのレイアウトでフィールドに適用されます。独自のテンプレートを適用する場合は、デフォルト・テンプレートを上書きできます。ビジュアル・アプリケーションが更新フィールドにBoldTypeというテンプレートを適用したとします。「アップデート」フィールドには、表示されているすべてのレイアウトでBoldTypeテンプレートが適用されます。ただし、Italicsというフィールド・テンプレートを作成し、特定のレイアウトまたは作成したすべてのレイアウトでBoldTypeテンプレートをオーバーライドできます。 Italicsテンプレートは、同じレイアウトの一部であれば、複数のフィールドに適用できます。

動的フォームまたは表のフィールドのフィールド・テンプレートを作成するには:

レイアウト「テンプレート」タブを開きます。

「テンプレート」タブには、アーティファクトにすでに定義されているフィールドおよびフォーム・テンプレートのリストが表示されます。
「+テンプレート」をクリックします。「フィールド」を選択し、ラベル(IDが生成されています)を指定して、「作成」をクリックします。

「図template-field.pngの説明」

新しいフィールド・テンプレートがテンプレート・エディタで開き、コンポーネント・パレット、構造ビュー、キャンバスおよびプロパティ・ペインが含まれます。 Structure(構造)ビューでは、新しいフィールド・テンプレートに自動生成された入力テキスト・コンポーネントが含まれていることがわかります。レイアウト内のフィールドにテンプレートを適用する際に、データおよび表示名を表示するために使用されます。
「
図template-field-inputtext.pngの説明」
テンプレート・エディタで、コンポーネント・パレットからキャンバスまたは構造ビューにドラッグして、テンプレートに表示する他のUIコンポーネントを追加します。

入力テキスト・コンポーネントの上または下にUIコンポーネントを追加したり、入力テキスト・コンポーネントを別のコンポーネントに置換して、たとえば、入力テキスト・コンポーネントのかわりに評価ゲージ・コンポーネントを使用してフィールドをレンダリングできます。

このイメージでは、テンプレートにアイコン・コンポーネントと入力テキスト・コンポーネントが含まれている構造ビューに表示されます:

「図template-field-adduicomps.pngの説明」
キャンバスまたは構造ビューでコンポーネントを選択し、プロパティ・ペインでそのプロパティを編集します。
ページ・デザイナで作業する場合と同様に、プロパティ・ペインにはコンポーネント・プロパティを編集するための複数のタブが含まれる場合があります。たとえば、アイコン・コンポーネントをテンプレートに追加した場合、イベント・タブでイベントも作成できます。これを行った場合は、イベント・リスナーおよびアクション・チェーンが作成されるため、アクション・チェーンを編集して動作を定義する必要があります。
または、コード・エディタでフィールド・テンプレート・コードを直接編集し、エディタのコード補完を使用して役立てることもできます。たとえば:
```

<template id="emailTemplate">
  <span class="vb-icon vb-icon-envelope"></span>
  <oj-input-text value="{{ $value }}" label-hint="[[ $metadata.labelHint ]]"></oj-input-text>
</template>
```

テンプレートを作成したら、「<テンプレート」をクリックして、テンプレート・タブのフィールド・テンプレートのリストに追加されたテンプレートを表示します。ここから、作成したテンプレートを開いて複製できます。