Show Menu
トピック×

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

前提条件

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 メタデータを表示します。プレースホルダは、フォーム、ドラフトまたは提出の結果を表示した後に追加されます。
To include a repeatable entry, configure the value of the attribute data-repeatable to true .
説明した例では、2つのDiv要素はカスタムテンプレートの一番上に存在します。 最初に、"__FP_boxes-container" CSSクラスで、リストされているフォームのコンテナエレメントとして機能します。2番目に、"__FP_boxes" CSSクラスで基本エンティティのテンプレート、この場合フォームになります。The data-repeatable ​attribute present in the Div element has the value true .
それぞれのプレースホルダーには 1 つずつ OOTB メタデータセットがあります.To display custom metadata at a particular place on the form, add the $ property at the place.
この例では、メタデータプロパティは複数のインスタンスで使用されています。For example, it is used in description , name , formUrl , htmlStyle , pdfUrl , pdfStyle , and path ​in the prescribed manner.

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

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

Search & Lister コンポーネント

  • タイトル: ​フォームのタイトル
  • 名前 :フォーム名(多くの場合、タイトルと同じです)
  • 説明 :フォームの説明
  • formUrl : フォームをHTMLとしてレンダリングするURL
  • pdfUrl : フォームをPDFとしてレンダリングするURL
  • アセットタイプ :アセットの種類Valid values include Form , PDF Form , Print Form , and Adaptive Form
  • htmlStyle & pdfStyle :HTML の表示スタイルと PDF アイコンはそれぞれレンダリングに使用されています。有効な値は、「 __FP_display_none 」または空白です。
カスタムスタイルシートでは、__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コンポーネントには、ユーザーインターフェイスに使える設定がいくつかあります。For example, to display HTML ToolTip text saved through the edit dialog, use the ${config-htmlLinkText} attribute. 同様に、PDFツールヒントテキストにも ${config-pdfLinkText} 、属性を使用します。

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

  • パス :ドラフト / 送信メタデータノードのパスドラフトまたは送信を開くためのURLとして、このファイルを.HTML拡張子と共に使用します。
  • contextPath :AEM インスタンスのコンテキストパス
  • firstLetter :ドラフトとして保存または送信されたアダプティブフォームのタイトルの最初の文字(大文字)
  • formName :ドラフトとして保存または送信されたアダプティブフォームのタイトル
  • draftID :リストされたドラフトの ID(ドラフトセクションのテンプレートにおいてのみ使用)
  • submitID :リストされた送信の ID(送信セクションのテンプレートにおいてのみ使用)
  • ステータス :送信されたフォームのステータス(送信セクションのテンプレートにおいてのみ使用)
  • 説明 :ドラフトまたは送信に関するアダプティブフォームの説明
  • diffTime :現在の時刻と最後にドラフトが保存された時刻との差。または、現在の時刻と送信するために最後の送信操作が行われた時刻との差。
  • iconClass :ドラフト/送信の最初の文字を表示するのに使用される CSS クラス。フォームポータルには、様々な色の背景を提供する以下のクラスがあります。
  • 所有者 :ドラフト / 送信を作成したユーザー。
  • 今日 :DD:MM:YYYY 形式のドラフト作成日または送信日。
  • TimeNow :HH:MM:SS24 時間形式のドラフト作成日または送信日。
注意:
  1. ドラフト&送信コンポーネントの下のドラフトセクションにある削除のオプションについては、CCS クラスを "__FP_deleteDraft" と名付けます。In addition, include the attribute "draftID" with the value $ , which is the draft id of corresponding draft.
  2. While creating links to open drafts and submissions, you can specify $.html as the value of the href attribute for the anchor tag.
A . コンテナ素子
B. 固定階層を持つ「パス」メタデータ。各フォームに保存されたサムネールを取得します。
C. Data-repeatable属性を各フォームのテンプレートセクションに使用
D. "Apply"文字列をローカライズするには
E. pdfLinkText設定プロパティの使用
F. "pdfUrl"メタデータの使用

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

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