AEM Forms のカスタムアセットタイプの一覧表示 listing-custom-asset-types-in-aem-forms
カスタムテンプレートの作成 creating-custom-template
この記事のために、カスタムアセットタイプと OOTB アセットタイプを同じページに表示するカスタムテンプレートを作成します。カスタムテンプレートを作成するには、次の手順に従ってください。
- /apps 下に sling: フォルダーを作成します。フォルダーに「myportalcomponent」という名前を付けます。
- 「fpContentType」プロパティを追加します。その値を「/libs/fd/ fp/formTemplate」に設定します。
- 「title」プロパティを追加し、その値を「custom template」に設定します。 これは、「検索とリスター」コンポーネントのドロップダウンリストに表示される名前です。
- このフォルダーの下に「template.html」を作成します。 このファイルには、様々なアセットタイプをスタイル設定し表示するコードが格納されます。
次のコードでは、「検索とリスター」コンポーネントを使用する様々なアセットタイプを一覧表示しています。data-type = "videos" タグで示されているように、アセットタイプごとに個別の HTML 要素を作成します。アセットタイプが「videos」の場合は、<video> 要素を使用してビデオをインラインで再生します。 アセットタイプが「worddocuments」の場合は、別の HTML マークアップを使用します。
<div class="__FP_boxes-container __FP_single-color">
<div data-repeatable="true">
<div class = "__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "videos">
<video width="400" controls>
<source src="${path}" type="video/mp4">
</video>
<h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
</div>
<div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "worddocuments">
<a href="/assetdetails.html${path}" target="_blank">
<img src ="/content/dam/worddocuments/worddocument.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
</a>
<h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
</div>
<div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "xfaForm">
<a href="/assetdetails.html${path}" target="_blank">
<img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
</a>
<h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
<a href="{formUrl}"><img src="/content/dam/html5.png"></a><p>
</div>
<div class="__FP_boxes-thumbnail" style="float:left;margin-right:20px;" data-type = "printForm">
<a href="/assetdetails.html${path}" target="_blank">
<img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
</a>
<h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
<a href="{pdfUrl}"><img src="/content/dam/pdf.png"></a><p>
</div>
</div>
</div>
「検索とリスター」コンポーネントの設定 configure-search-and-lister-component
カスタムテンプレートを定義したら、このカスタムテンプレートを「検索とリスター」コンポーネントに関連付ける必要があります。 ブラウザーでこの URL を参照します。
デザインモードに切り替え、許可されたコンポーネントグループに「検索とリスター」コンポーネントを含めるように段落システムを設定します。 Search & Lister コンポーネントは、ドキュメントサービスグループの一部として含まれています。
編集モードに切り替え、Search & Lister コンポーネントを ParSys に追加します。
「Search & Lister」コンポーネントの設定プロパティを開きます。 「アセットフォルダー」タブが選択されていることを確認します。 Search & Lister コンポーネントで一覧表示するアセットのフォルダーを選択します。この記事のために以下を選択しました。
- /content/dam/VideosAndWordDocuments
- /content/dam/formsanddocuments/assettypes
「表示」タブに移動します。 ここでは、Search & Lister コンポーネントでアセットを表示するテンプレートを選択します。
次に示すように、ドロップダウンから「カスタムテンプレート」を選択します。
ポータルに一覧表示するアセットのタイプを設定します。 アセットのタブのタイプを「アセット一覧表示」に設定し、アセットのタイプを設定します。この例では、次のアセットタイプを設定しました。
- MP4 ファイル
- Word ドキュメント
- ドキュメント（これは OOTB アセットタイプです）
- フォームテンプレート（これは OOTB アセットタイプです）
次のスクリーンショットは、一覧表示用に設定されているアセットタイプを示しています。
これで Search & Lister ポータルコンポーネントの設定が完了したので、次に Lister の動作を確認します。 ブラウザーでこの URL を参照します。結果は、次の画像のようになります。
パッケージマネージャーを使用して、このパッケージをダウンロードしてインストールしてください。これには、サンプルの mp4 および word ドキュメントと、検索およびリスター コンポーネントを使用して一覧表示するアセット タイプとして使用される xdp ファイルが含まれています。