フォームポータルコンポーネントのテンプレートをカスタマイズする

前提条件

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

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

概要

AEM Forms ユーザーインターフェイスでは、すべてのフォームにメタデータを追加することができます。カスタムメタデータは、組織のフォームを展開・検索する際のユーザーの利便性を高めます。

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

次のステップを実行して、様々なフォームポータルコンポーネントのカスタムテンプレートを作成します。

カスタムテンプレートの作成

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

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

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

   • ドラフト&送信コンポーネント：

     • ドラフトセクション：/libs/fd/fp/draftsTemplate
     • 送信セクション：/libs/fd/fp/submissionsTemplate

   • Link コンポーネント："/libs/fd/fp/formTemplate"

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

   メモ

   タイトルは、作成したsling:Folderのノード名とは異なる場合があります。

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

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

3. 以下のようにカスタムテンプレートを作成して、カスタムメタデータを使用します。

作業の例

以下は、フォームポータルが、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>

カスタムテンプレートの技術仕様

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

フォームポータルは、プレースホルダに構文を提供してカスタム /OOTB メタデータを表示します。プレースホルダは、フォーム、ドラフトまたは提出の結果を表示した後に追加されます。

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

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

それぞれのプレースホルダーには 1 つずつ OOTB メタデータセットがあります.フォーム上の特定の場所にカスタムメタデータを表示するには、その場所に​${metadata_prop}プロパティ​を追加します。

この例では、メタデータプロパティは複数のインスタンスで使用されています。例えば、説明、名前、formUrl、htmlStyle、pdfUrl、pdfStyle、などで使用されます。a12/>所定の経路​​

デフォルトのボックスメタデータ

様々なフォームポータルコンポーネントは、リスト表示に使える排他的な OOTB メタデータのセットを提供します。

Search & Lister コンポーネント

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

• 名前：フォーム名（多くの場合、タイトルと同じです）

• 説明：フォームの説明

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

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

• アセットタイプ：アセットの種類有効な値は、フォーム、PDFフォーム、印刷フォーム、アダプティブフォーム​です

• htmlStyle& pdfStyle：HTML の表示スタイルと PDF アイコンはそれぞれレンダリングに使用されています。有効な値は、"__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：リンクキャプション

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

• パス：ドラフト / 送信メタデータノードのパスドラフトまたは送信を開くためのURLとして、このファイルを.HTML拡張子と共に使用します。
• contextPath：AEM インスタンスのコンテキストパス
• firstLetter：ドラフトとして保存または送信されたアダプティブフォームのタイトルの最初の文字（大文字）
• formName：ドラフトとして保存または送信されたアダプティブフォームのタイトル
• draftID：リストされたドラフトの ID（ドラフトセクションのテンプレートにおいてのみ使用）
• submitID：リストされた送信の ID（送信セクションのテンプレートにおいてのみ使用）
• ステータス：送信されたフォームのステータス（送信セクションのテンプレートにおいてのみ使用）
• 説明：ドラフトまたは送信に関するアダプティブフォームの説明
• diffTime：現在の時刻と最後にドラフトが保存された時刻との差。または、現在の時刻と送信するために最後の送信操作が行われた時刻との差。
• iconClass：ドラフト/送信の最初の文字を表示するのに使用される CSS クラス。フォームポータルには、様々な色の背景を提供する以下のクラスがあります。
• 所有者：ドラフト / 送信を作成したユーザー。
• 今日：DD:MM:YYYY 形式のドラフト作成日または送信日。
• TimeNow：HH:MM:SS24 時間形式のドラフト作成日または送信日。

注意：

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

2. ドラフトと送信を開くためのリンクを作成する際に、アンカータグの​href​属性の値として​${path}.html​を指定できます。

A. コンテナ素子

B. 「パス」メタデータ（固定階層）を使用して、各フォームに保存されたサムネールを取得します。

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

D. "Apply"文字列 をローカライズするには

E. pdfLinkText設定プロパティ の使用

F. 「pdfUrl」メタデータ の使用

ヒント、テクニックおよび既知の問題

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

関連記事

• フォームポータルコンポーネントの有効化
• フォームポータルページの作成
• API を使用した Web ページ上のフォームの一覧表示
• ドラフトと送信コンポーネントの使用
• ドラフトと送信済みフォームのストレージのカスタマイズ
• ドラフトと送信コンポーネントとデータベースの統合のサンプル
• フォームポータルコンポーネントのテンプレートをカスタマイズする
• ポータル上のフォーム発行の概要