必要条件

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

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

概要

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

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

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

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

  1. アプリケーションの下で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コンポーネントの構成を示します。
    sling:Folderの作成
  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>

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

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

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

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

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

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

この例では、メタデータプロパティは複数のインスタンスで使用されています。例えば、説明名前formUrlhtmlStylepdfUrlpdfStyle、およびパスなどにおいて所定の方法で使用されています。

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

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

Search & Lister コンポーネント

  • タイトル:フォームのタイトル
  • 名前:フォーム名(多くの場合、タイトルと同じです)
  • 説明:フォームの説明
  • formUrl:フォームをHTMLとしてレンダリングするためのURL
  • pdfUrl:フォームをPDFとしてレンダリングするためのURL
  • アセットタイプ:アセットの種類有効な値には、フォームPDFフォーム印刷フォームおよびアダプティブフォームが含まれています。
  • htmlStyle & pdfStyle: HTMLの表示スタイルとPDFアイコンはそれぞれレンダリングに使用されています。有効な値は、“__FP_display_none”または空白
    注意:カスタムスタイルシートで__FP_display_noneクラスを使うようにしてください
  • downloadUrl:アセットをダウンロードするURLです。
ローカリゼーション、ソート、ユーザーインターフェイス上での設定プロパティ使用のサポート(Search & Listerのみ):
  1. ローカリゼーションサポート:スタティックテキストをローカライズするには、属性${localize-YOUR_TEXT} を使用し、ローカライズされた値が存在しない場合は、値を用意します。
    説明した例では、属性${localize-Apply} と${localize-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"と名付けます。さらに、対応するドラフトのドラフトIDである値${draftID}を持つ属性 "draftID"を含めます。
  2. ドラフトと提出を開くためのリンクの作成中に、アンカータグのhref属性の値として${path}.htmを指定することができます。
ドラフトと送信ノード

A. コンテナの要素

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

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

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

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

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

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー