フォームポータルコンポーネントのテンプレートのカスタマイズ customizing-templates-for-forms-portal-components

前提条件 prerequisites

フォームメタデータの管理

HTMLと CSS の実務知識

概要 overview

AEM Formsユーザーインターフェイスを使用すると、任意のフォームにメタデータを追加できます。 カスタムメタデータは、組織のフォームをリストおよび検索する際のユーザーエクスペリエンスを強化します。

Forms Portal では、フォームリストにカスタムメタデータを使用できます。 アセットのカスタムテンプレートを作成する際に、レイアウトを変更し、CSS スタイルセットでカスタムメタデータを使用することができます。

様々なForms Portal コンポーネントのカスタムテンプレートを作成できるように、次の操作を実行します。

カスタムテンプレートの作成 creating-a-nbsp-custom-template

  1. /apps の下で sling:Folder ノードを作成します。

    "fpContentType" プロパティを追加カスタムテンプレートを設定しようとしているコンポーネントに応じてプロパティの適切な値を指定します。

    • Search & Lister コンポーネント:"/libs/fd/fp/formTemplate"

    • ドラフト/送信コンポーネント:

      • ドラフトセクション: /libs/fd/fp/draftsTemplate
      • 送信セクション: /libs/fd/fp/submissionsTemplate
    • Link コンポーネント:"/libs/fd/fp/linkTemplate"

    レイアウトテンプレートの選択時に表示するタイトルを追加します。

    note note
    NOTE
    タイトルは、 作成したノード名「sling:Folder」と異なっていても問題ありません。

    次の画像は、Search & Listerコンポーネントの構成を示します。
    sling:Folderの作成

  2. このフォルダーに template.html ファイルを作成し、カスタムテンプレートとして使用できるようにします。

  3. 以下の説明に従って、カスタムテンプレートを記述し、カスタムメタデータを使用します。

作業例 working-example

以下は、Forms Portal が Search & Lister コンポーネントのカスタムGeometrixxGov カードレイアウトを取得したカスタムテンプレートの実装例です。

<div class="__FP_boxes-container __FP_single-color">
    <div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
 <div class="__FP_boxes-thumbnail">
     <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
        </div>
        <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
        <p>${description}</p>
        <div class="boxes-icon-cont __FP_boxes-icon-cont">
            <div class="op-dow">
                <a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
                <a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
            </div>
        </div>
    </div>
</div>

カスタムテンプレートの技術仕様 technical-specifications-for-custom-templates

すべてのフォームポータルコンポーネントのカスタムテンプレートには、繰り返し可能なエントリと繰り返し不可能なエントリが含まれています。繰り返し可能なエントリは、リスト表示の基本エンティティです。 繰り返し可能なエントリの例としては、Search & Lister、ドラフト&送信、Link コンポーネントがあります。

Forms Portal には、プレースホルダーがカスタム/標準のメタデータを表示するための構文が用意されています。 プレースホルダーは、フォーム、ドラフトまたは送信の結果を表示した後に入力されます。

繰り返し可能なエントリを含めるには、data-repeatable の属性の値を true に設定します。

この例では、2 つの Div 要素がカスタムテンプレートの一番上に存在します。 1 つ目は、「__FP_boxes-container」CSS クラスで、リストされるフォームのコンテナ要素として機能します。 2 つ目は、"__FP_boxes" CSS クラスで、基本エンティティのテンプレートです。この場合はフォームです。 Div 要素に存在する​ data-repeatable ​の属性の値は​ true ​です。

各プレースホルダーには、すぐに使用できる専用のメタデータセットがあります。 フォームの特定の場所でカスタムメタデータを表示するには、そこに ${metadata_prop} プロパティ を追加します。

この例では、metadata プロパティは複数のインスタンスで使用されています。 例えば、descriptionnameformUrlhtmlStylepdfUrlpdfStyle、および​ path ​で所定の方法で使用されます。

標準提供のメタデータ out-of-the-box-metadata

様々なForms Portal コンポーネントには、リスト表示に使用できる標準メタデータの排他的なセットが用意されています。

Search & Lister コンポーネント search-amp-lister-component

  • タイトル: ​フォームのタイトル

  • 名前:フォームの名前(ほとんどの場合、タイトルと同じです)

  • 説明:フォームの説明

  • formUrl:フォームを HTML としてレンダリングする URL

  • pdfUrl:フォームを PDF としてレンダリングする URL

  • アセットタイプ:アセットの種類有効な値は次のとおりです。 フォーム, PDFフォーム, 印刷フォーム、および アダプティブフォーム

  • htmlStyle& pdfStyle:HTML の表示スタイルと PDF アイコンはそれぞれレンダリングに使用されています。有効な値は、「__FP_display_none」または空白です。

NOTE
カスタムスタイルシートでは必ず __FP_display_none クラスを使用してください。
  • downloadUrl:アセットをダウンロードする URL です。

ローカリゼーション、ソート、ユーザーインターフェイス上での設定プロパティ使用のサポート(Search & Lister のみ):

  1. ローカリゼーションサポート:静的テキストをローカライズするには、属性を使用します ${localize-YOUR_TEXT} ローカライズされた値が存在しない場合は、その値を使用可能にします。
    上記の例では、属性 ${localize-Apply}${localize-Download} は、「Apply」と「Download」のテキストをローカライズするのに使用します。

  2. 並べ替えのサポート:検索結果を並べ替えるには、HTML要素をクリックします。 テーブルレイアウトでの並べ替えを実装するには、特定のテーブルヘッダーに「data-sortKey」属性を追加します。 さらに、ソートしたいメタデータとしてその値を加えます。例えば、グリッド表示の「タイトル」ヘッダーでは、「data-sortKey」ヘッダーの値が「タイトル」 です。見出しをクリックして、特定の列の値を並べ替えることができます。

  3. 設定プロパティの使用:Search & Listerコンポーネントには、ユーザーインターフェイスに使える設定がいくつかあります。例えば、編集ダイアログを通して保存された HTML ツールヒントテキストを表示するには、${config-htmlLinkText} 属性を使用します。同様に、PDF ツールヒントテキストにも、  ${config-pdfLinkText} 属性を使用します。

  • タイトル: ​フォームのタイトル
  • formUrl:フォームを HTML としてレンダリングする URL
  • ターゲット:リンクのターゲット属性有効な値は、「_blank」および「_self」です。
  • linkText:リンクキャプション

ドラフトと送信コンポーネント drafts-amp-submissions-component

  • パス:ドラフト/送信メタデータノードのパス。 URL として拡張子。HTMLと共に使用して、ドラフトまたは送信を開くことができます。
  • contextPath:AEMインスタンスのコンテキストパス。
  • firstLetter:ドラフトとして保存または送信されたアダプティブフォームのタイトルの最初の文字(大文字)
  • formName:ドラフトとして保存または送信されたアダプティブフォームのタイトル。
  • draftID:リストされたドラフトの ID(ドラフトセクションのテンプレートでのみ使用)
  • submitID:リストに表示される送信の ID(送信セクションのテンプレートでのみ使用)
  • ステータス:送信されたフォームのステータス。 (「送信」セクションのテンプレートでのみ使用)。
  • 説明:ドラフトまたは送信に関連付けられているアダプティブフォームの説明。
  • diffTime:現在の時刻とドラフトの最後の保存アクションとの差。 または、現在の時刻と送信時に最後に送信されたアクションの差を指定します。
  • iconClass:ドラフト/送信の最初の文字を表示するために使用される CSS クラス。 Forms Portal には、様々な色の背景を提供する、次のクラスが含まれています。
  • 所有者:ドラフト/送信を作成したユーザー。
  • 今日:でのドラフト作成日または送信日 DD:MM:YYYY 形式を使用します。
  • TimeNow:でのドラフト作成時または送信時刻 HH:MM:SS 24 時間形式

注意:

  1. ドラフト&送信コンポーネントの下のドラフトセクションにある削除のオプションについては、CSS クラスを "__FP_deleteDraft" と名付けます。さらに、対応するドラフトのドラフト ID である値 ${draftID} を持つ属性 "draftID" を含めます。

  2. ドラフトと提出を開くためのリンクの作成中に、アンカータグの href 属性の値として ${path}.htm を指定することができます。

ドラフトと送信ノード

A. コンテナの要素

B. 固定階層のある「path」メタデータで、各フォームに保存されたサムネールを取得します。

C. 各フォームのテンプレートセクションに使用する Data-repeatable 属性

D. "適用"文字列をローカライズする

E. pdfLink テキストの設定プロパティを使用する

F. 「pdfUrl」メタデータを使用する

ヒント、テクニックおよび既知の問題 tips-tricks-and-known-issues

  1. カスタムテンプレートでは一重引用符 (') を使用しないでください。
  2. カスタムメタデータでは、このプロパティは jcr:content/metadata ノードにのみ保存してください。他の場所に保存した場合、Forms Portal はメタデータを表示できません。
  3. すべてのカスタムメタデータまたは既存のメタデータの名前にコロン(:)が含まれていないことを確認してください。含まれている場合、ユーザーインターフェイスに表示することができません。
  4. data-repeatable は、リンク ​コンポーネントにとっては意味はありません。アドビシステムズ社は、お客様がこのプロパティのリンクコンポーネントのテンプレートにおける使用を避けることを推奨します。

関連記事

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2