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

前提条件 prerequisites

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

HTML および CSS の実用的な知識

概要 overview

AEM Forms ユーザーインターフェイスでは、すべてのフォームにメタデータを追加することができます。カスタムメタデータにより、組織のフォームをリストおよび検索する際のユーザーエクスペリエンスを向上させることができます。

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

次の手順を実行して、様々なフォームポータルコンポーネントのカスタムテンプレートを作成することができます。

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

作業の例 working-example

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

<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 要素はカスタムテンプレートの一番上に存在します。最初に、"__FP_boxes-container" CSSクラスで、リストされているフォームのコンテナの要素として機能します。2 番目に、"__FP_boxes" CSSクラスで基本エンティティのテンプレート、この場合、フォームになります。Div 要素に存在する​ data-repeatable ​の属性の値は​ true ​です。

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

この例では、メタデータプロパティは複数のインスタンスで使用されています。例えば、description、name、formUrl、htmlStyle、pdfUrl、pdfStyle、および​ path ​で所定の方法で使用されます。

すぐに使えるメタデータ out-of-the-box-metadata

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

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

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

リンクコンポーネント link-component

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

注意：

A. コンテナの要素

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

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

D. 「Apply」文字列をローカライズする

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

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

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

関連記事