フォームポータルページの作成 creating-a-forms-portal-page

バージョン
記事リンク
AEM as a Cloud Service
ここをクリックしてください
AEM 6.5
この記事

フォームポータルのコンポーネントにより、web 開発者は Adobe Experience Manager(AEM)を使用して作成された web サイト上にフォームポータルを作成してカスタマイズできます。フォームポータルの概要については、ポータル上のフォーム公開の概要を参照してください。

前提条件 prerequisites

デフォルトでは、フォームポータルコンポーネントは使用できません。フォームポータルのコンポーネントを有効にするの説明に従い、フォームポータルコンポーネントにおける次のカテゴリが有効になっていることを確認してください。

Document Services:検索とリスター、リンクおよびドラフトと送信のコンポーネントが含まれています。

Document Services Predicates:日付の述語、フルテキストの述語、プロパティの述語、およびタグの述語のコンポーネントが含まれています。これらのコンポーネントは、検索とリスターコンポーネントで検索を設定する際に使用します。

これらを AEM Sites のページで有効にすると、コンポーネントの各カテゴリはコンポーネントブラウザーで使用できるようになります。

コンポーネントブラウザにおけるAEM Formsポータルコンポーネント

フォームポータルコンポーネントのカテゴリ

検索とリスターコンポーネント search-amp-lister-component

Document Services のコンポーネントカテゴリにある検索とリスターコンポーネントは、ページ上にフォームをリストし、その中から検索を実行するのに使用されます。このコンポーネントには、次の 2 つのペインが含まれます。

  • フォームがリストされるリストペイン。
  • 検索機能を追加する検索ペイン。

検索とリスターコンポーネントは、コンポーネントブラウザの Document Services コンポーネントカテゴリからページまでドラッグ&ドロップすることができます。コンポーネントを追加すると、下記の画像のようになります。

ページ中のSearch Lister コンポーネント

ページ中のグリッドレイアウトの検索とリスターコンポーネント

リストペイン list-pane

リストペインはフォームが一覧表示される領域です。検索とリスターコンポーネントでは各種の設定オプションが提供されており、リストウィンドウでフォームの表示を制御するのに使用します。

リストウィンドウを設定するには、検索とリスターコンポーネントを選択し、 settings_icon を選択します。編集コンポーネント ​ダイアログが開きます。

編集モードのリストペイン

編集モードのリストペイン

編集」ダイアログには複数のタブが含まれており、以下の表で説明される設定オプションを提供します。終わったら「OK」を選択して、設定を保存します。

タブ
設定
説明
アセットフォルダー
項目を追加
アセットのアップロード先フォルダーを、AEM Forms の UI から設定します。デフォルトでは、アップロードされたすべてのアセットがリストされます。AEM Forms の UI について詳しくは、フォーム管理の概要を参照してください。
ディスプレイ
タイトルテキスト
検索とリスターコンポーネントのタイトル。デフォルトのタイトルは フォームポータル です。
テンプレートのレイアウト
アセットのレイアウト
詳細検索を無効にする
このオプションを有効にすると、詳細検索アイコンが非表示になります。
テキスト検索を無効にする
このオプションを有効にすると、全文検索バーが非表示になります。
結果
ページごとの結果の数
ページに表示するフォームの最大数を設定します。
結果のテキスト

結果のテキストを設定します(例えば、1-12/601 の 結果)。デフォルト値は「結果」です。

例えば、このフィールドで フォーム を指定し、合計 601 のフォームがある場合、結果のテキストは 1-12/601 の「Forms」に変わります。

ページテキスト

ページテキストを設定します(例:1/51 ページ)。デフォルト値は 「ページ」 です。

例えば、このフィールドに アプリケーションフォーム を指定し、ページが 51 ページある場合、ページテキストは 1/51 アプリケーションフォーム に変わります。

/ テキスト

指定されたテキストの of という文字を指定したテキストに置き換えます(Page 1 of 51)。デフォルト値は / です。

例えば、このフィールドに out of を指定した場合、テキストは Page 1 out of 51 に変わります。

フォームリンク
レンダリングタイプ
指定したレンダリングタイプに基づいてフォームのリストを制御します。使用可能なオプションは、PDF と HTML です。例えば、レンダリングタイプとして HTML のみを選択した場合、PDF フォームは除外されます。
HTML プロファイル
レンダリングに使用する HTML プロファイルを設定します。使用可能なすべてのプロファイルがドロップダウンリストに一覧表示されます。
送信 URL

フォームデータが送信されるサーブレットを設定します。

メモ:フォームの送信 URL は複数の場所で指定でき、優先順位は次の通りです。

  1. 優先順位が最も高いのは、フォームに埋め込まれている送信URL(送信ボタン)です。
  2. 2番目に優先順位が高いのは、AEM Forms UIで説明している送信URLです。
  3. 一番優先順位が引くのが、フォームポータルで説明している送信URLです。
HTML レンダリングアクションのツールチップ
{width="13"}(HTML5 アイコン)にポインタを合わせたときに表示されるツールチップのテキストを設定します。
PDF レンダリングアクションのツールチップ
{width="14"}(PDF アイコン)にポインタを合わせたときに表示されるツールチップのテキストを設定します。
スタイル
スタイルタイプ
フォームのリスト表示には、書式なし、デフォルトスタイル または カスタムスタイル を指定できます。
カスタムスタイルパス
スタイルタイプとして「カスタム」を選択した場合は、カスタム CSS へのパスを参照して指定します。それ以外の場合は「デフォルト」を選択します。

検索ペイン search-pane

検索ペインでは、サイドキックの「Document Services Predicates」カテゴリから、「Date Predicate」、「Full Text Predicate」、「Properties Predicate」、および「Tags Predicate」コンポーネントを追加することができます。これらのコンポーネントにより、一覧表示されるフォームに対してユーザーが検索を実行するための検索機能が実装されます。

チップ: フォームポータルに表示されるフォームのリストを既定の条件に基づいて制御し、エンドユーザーに対して検索機能を非表示にできます。フォームのリストを制御するには、検索フィルターを適用するためにPredicateコンポーネントを使用します。デフォルトフィルター値を指定して、コンポーネントの編集ダイアログの「表示」タブで検索を無効にすることもできます。

日付、フルテキスト、プロパティ、およびTags Predicate付きの検索パネル

日付、フルテキスト、プロパティ、およびTags Predicate付きの検索パネル

日付の述語 date-predicate

日付の述語コンポーネントが追加されている場合は、指定された期間に変更されたフォームを、一覧表示されたフォームの中から検索できます。

日付の述語コンポーネントを設定するには、次の手順を実行します。

  1. コンポーネントを選択し、 settings_icon を選択します。編集ダイアログが開きます。

  2. 以下のプロパティを指定します。

    • タイプ: ​選択できるオプションは「最終変更日」のみです。

    • テキスト: Date Predicateコンポーネントのラベルまたはキャプションです。デフォルト値は「最終変更日」です。

    • 開始日のラベル: ​開始日フィールドのラベルまたはキャプションです。

    • 終了日のラベル: ​終了日フィールドのラベルまたはキャプションです。

    • 非表示: ​デフォルトの日付フィルターを適用してフォームを一覧表示します。

  3. OK」を選択します。

フルテキストの述語 full-text-predicate

フルテキストの述語コンポーネントは、フォームデータに対する名前や説明などのフルテキスト検索を実装します。ユーザーは、任意のテキスト文字列を検索して、名前または説明にそのテキストを含むフォームを返すことができます。

フルテキストの述語コンポーネントを設定するには、次の手順を実行します。

  1. コンポーネントを選択し、 settings_icon を選択します。編集ダイアログが開きます。
  2. メインタイトル」フィールドにタイトルを指定します。
  3. OK」を選択します。

プロパティの述語 properties-predicate

プロパティの述語コンポーネントは、フォームプロパティ(タイトル、作成者および説明など)に基づいたフォームの検索機能を実装します。

プロパティの述語コンポーネントを設定するには、次の手順を実行します。

  1. コンポーネントを選択し、 settings_icon を選択します。編集ダイアログが開きます。

  2. 「一般」タブで、検索ラベルを指定します。デフォルト値は、プロパティ ​です。

  3. 「オプション」タブで「アイテムの追加」を選択します。

  4. ドロップダウンリストからプロパティを選択し、ドロップダウンリストの下のフィールドでプロパティの検索ラベルを指定します。

  5. 手順 4 を繰り返してさらにプロパティを追加します。デフォルトのフィルター値を指定して、指定の条件に基づいてフォームをリスト表示したり、エンドユーザーごとに検索のプロパティを非表示にしたりできます。プロパティの「非表示」チェックボックスを選択し、デフォルトフィルター値を指定します。例えば、タイトルに「Travel」という文字を含むフォームを表示するには、「タイトル」プロパティ横の「非表示」を選択します。さらに、デフォルトフィルター値のテキストボックスで Travel と指定します。

  6. OK」を選択します。

タグの述語 tags-predicate

タグの述語コンポーネントは、Forms Manager で定義されているタグに基づいて、フォームの検索機能を実装します。

タグの述語コンポーネントを設定するには、次の手順を実行します。

  1. コンポーネントを選択し、 settings_icon を選択します。編集ダイアログが開きます。
  2. 「タグ」フィールド横の下向き矢印ボタンを選択します。
  3. 適切なタグを選択します。
  4. OK」を選択します。

選択したタグが、選択用のチェックボックスと一緒に検索パネルに表示されます。ユーザーはこのタグに基づいて検索を絞り込めるようになります。

ページ上でフォームを一覧表示 list-forms-on-a-page-br

ページ上でフォームを一覧表示するには、そのページに Search & Lister コンポーネントを追加し、リストペイン ​を設定します。エンドユーザーが、日付、テキストおよびタグでフォームを検索できるようにするには、検索パネル ​コンポーネントを追加します。

ページ上の任意の場所からフォームにリンクするには、リンクコンポーネントを使用します。リンクコンポーネントについての詳細は、「ページ内のリンクコンポーネントの埋め込み」を参照してください。

ドラフト状態で、既に送信済みのフォームをリストするには、ドラフトと送信 ​コンポーネントを使用します。詳しくは、ドラフトと送信コンポーネントのカスタマイズを参照してください。

モバイルデバイスへの適合性 mobile-device-friendliness

フォームポータルの検索とリスターコンポーネントは、モバイルデバイスフレンドリーで、デバイスに応じて表示幅を調整します。3 つすべてのデフォルトビュー:グリッド、カード、パネルは、web ページにも適応するという事実を踏まえて、デバイスに応じて再レイアウトされます。簡単に言えば、検索とリスターコンポーネントは単なるコンポーネントであり、ページレベルのスタイリングは管理しません。

次の画像は、モバイルデバイス上で開いた場合の検索とリスターコンポーネントを示します。

Search Listerコンポーネントのスクリーンショット

Search & Listerコンポーネント

フォームポータルページのカスタマイズ customizing-a-forms-portal-page-br

フォームポータルページをカスタマイズすることで、特徴のある外観にすることができます。また、メタデータを追加することで、検索機能の改善、ページのレイアウト変更、およびカスタム CSS スタイルの追加を行うこともできます。詳しくは、「フォームポータルコンポーネント用テンプレートのカスタマイズ」を参照してください。

AEM Forms UI を使用すると、カスタムメタデータをフォームに追加することができます。カスタムメタデータは、エンドユーザーにリストおよび検索フォームのエクスペリエンスを提供するのに役立ちます。カスタムメタデータについて詳しくは、「フォームポータルコンポーネント用テンプレートのカスタマイズ」を参照してください。

フォームポータルは、標準のレンダリングアクションを提供します。フォームポータルをカスタマイズして、他のアクションを追加することもできます。詳しくは、フォームリスター項目へのカスタムアクションボタンの追加を参照してください。

関連記事

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2