HTML および CSS の実用的な知識
AEM Forms ユーザーインターフェイスでは、すべてのフォームにメタデータを追加することができます。カスタムメタデータは、組織のフォームを展開・検索する際のユーザーの利便性を高めます。
フォームポータルを使用すると、フォームリストにカスタムメタデータを使用することができます。アセットのカスタムテンプレートの作成中に、レイアウトを変更して、カスタムメタデータを CSS スタイルセットと使うことができます。
次のステップを実行して、様々なフォームポータルコンポーネントのカスタムテンプレートを作成します。
/appsの下にsling:Folderノードを作成します
"fpContentType" プロパティを追加カスタムテンプレートを設定しようとしているコンポーネントに応じてプロパティの適切な値を指定します。
Search & Lister コンポーネント:"/libs/fd/fp/formTemplate"
ドラフト&送信コンポーネント:
Link コンポーネント:"/libs/fd/fp/formTemplate"
レイアウトテンプレートを選択する際に表示したいタイトルを追加します。
タイトルは、作成したsling:Folderのノード名とは異なる場合があります。
次の画像は、Search & Listerコンポーネントの構成を示します。
このフォルダー内に template.html ファイルを作成して、カスタムテンプレートとして使用します。
以下のようにカスタムテンプレートを作成して、カスタムメタデータを使用します。
以下は、フォームポータルが、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に設定します。
説明した例では、2つのDiv要素はカスタムテンプレートの一番上に存在します。最初に、"__FP_boxes-container" CSSクラスで、リストされているフォームのコンテナエレメントとして機能します。2番目に、"__FP_boxes" CSSクラスで基本エンティティのテンプレート、この場合フォームになります。Div要素に存在するdata-repeatable属性の値はtrueです。
それぞれのプレースホルダーには 1 つずつ OOTB メタデータセットがあります.フォーム上の特定の場所にカスタムメタデータを表示するには、その場所に${metadata_prop}プロパティを追加します。
この例では、メタデータプロパティは複数のインスタンスで使用されています。例えば、説明、名前、formUrl、htmlStyle、pdfUrl、pdfStyle、などで使用されます。a12/>所定の経路
様々なフォームポータルコンポーネントは、リスト表示に使える排他的な OOTB メタデータのセットを提供します。
タイトル:フォームのタイトル
名前:フォーム名(多くの場合、タイトルと同じです)
説明:フォームの説明
formUrl:フォームをHTMLとしてレンダリングするURL
pdfUrl:フォームをPDFとしてレンダリングするURL
アセットタイプ:アセットの種類有効な値は、フォーム、PDFフォーム、印刷フォーム、アダプティブフォームです
htmlStyle& pdfStyle:HTML の表示スタイルと PDF アイコンはそれぞれレンダリングに使用されています。有効な値は、"__FP_display_none"またはブランクです。
カスタムスタイルシートでは、__FP_display_noneクラスを必ず使用してください。
ローカリゼーション、ソート、ユーザーインターフェイス上での設定プロパティ使用のサポート(Search & Lister のみ):
ローカライゼーションサポート:スタティックテキストをローカライズするには、属性を使用 ${localize-YOUR_TEXT}
し、ローカライズされた値が存在しない場合は、値を使用可能にします。
説明した例では、属性 ${localize-Apply}
と属性 ${localize-Download}
は、「Apply」と「Download」のテキストをローカライズするために使用されます。
ソートのサポート:HTML要素をクリックして検索結果をソートします。テーブルレイアウトでのソートを実行するには、特定のテーブルヘッダーに"data-sortKey" 属性を追加します。さらに、ソートしたいメタデータとしてその値を加えます。例えば、グリッド表示の「タイトル」ヘッダーでは、「data-sortKey」ヘッダーの値が「タイトル」 です。見出しをクリックして、特定の列の値を並べ替えます。
設定プロパティの使用:Search & Listerコンポーネントには、ユーザーインターフェイスに使える設定がいくつかあります。例えば、編集ダイアログで保存したHTMLツールヒントテキストを表示するには、${config-htmlLinkText}
属性を使用します。 同様に、PDFのツールヒントテキストにも、属性を使用 ${config-pdfLinkText}
します。
注意:
ドラフト&送信コンポーネントの下のドラフトセクションにある削除のオプションについては、CCS クラスを "__FP_deleteDraft" と名付けます。さらに、「draftID」という属性を値${draftID}と共に含めます。これは、対応するドラフトのドラフトIDです。
ドラフトと送信を開くためのリンクを作成する際に、アンカータグのhref属性の値として${path}.htmlを指定できます。
A. コンテナ素子
B. 「パス」メタデータ(固定階層)を使用して、各フォームに保存されたサムネールを取得します。
C. Data-repeatable属性を各フォームのテンプレートセクションに使用
D. "Apply"文字列 をローカライズするには
E. pdfLinkText設定プロパティ の使用
F. 「pdfUrl」メタデータ の使用