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

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

フィールドのデフォルト・テンプレートを定義すると、そのテンプレートは、フィールドが表示されるすべてのレイアウトのフィールドに適用されます。必要に応じて、デフォルトのテンプレートを別のテンプレートで上書きすることもできます。たとえば、BoldTypeというテンプレートが「更新」フィールドに適用されるデフォルト・テンプレートであるとします。イタリックというフィールド・テンプレートを作成し、それをフィールドに適用して、BoldTypeデフォルト・テンプレートをオーバーライドできます。特定のレイアウトのデフォルト・テンプレートを上書きしたり、イタリック・テンプレートを新しいデフォルト・テンプレートにして、作成したすべてのレイアウトに適用できます。斜体テンプレートは、同じレイアウト内にあるかぎり、どのフィールドにも適用できます。

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

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

「テンプレート」タブには、アーティファクトにすでに定義されているフィールドおよびフォーム・テンプレートのリストが表示されます。
「+テンプレート」をクリックします。「フィールド」を選択し、ラベル(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>
```

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