フォームポータルページの作成

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

前提条件

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

ドキュメント サービス:Search & Lister、Link、Drafts and Submissionsコンポーネントが含まれます。

Document Services Predicates:「Date Predicate」、「Full Text Predicate」、「Properties Predicate」、および「Tags Predicate」のコンポーネントが含まれています。これらのコンポーネントは、「Search & Lister」コンポーネントで検索を設定する際に使用します。

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

コンポーネントbrowserFigureのAEM Formsポータルコンポーネント:
Formsポータルコンポーネントカテゴリ

Search & Lister コンポーネント

「Document Services」のコンポーネントカテゴリにある「Search & Lister」コンポーネントは、ページ上にフォームを一覧表示し、その中から検索を実行するのに使用されます。コンポーネントには、次の2つのペインが含まれます。

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

「Search & Lister」コンポーネントは、コンポーネントブラウザーの「ドキュメントサービス」コンポーネントカテゴリからページにドラッグ&ドロップできます。 コンポーネントを追加すると、下記の画像のようになります。

ページ内のSearch & Listerコンポーネント
図: グリッドレイアウトを含むページ内のSearch & Listerコンポーネント

リストペイン

リストペインはフォームが一覧表示される領域です。Search & Listerコンポーネントには、リストペインでのフォームの表示を制御するために使用できる様々な設定オプションが用意されています。

リストペインを設定するには、「Search & Lister」コンポーネントをタップし、settings_iconをタップします。 「コンポーネントを編集」ダイアログが開きます。

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

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

タブ 設定 説明
アセットフォルダー 項目を追加 アセットのアップロード先フォルダーを、AEM FormsのUIから設定します。デフォルトでは、アップロードされたすべてのアセットが一覧表示されます。AEM Forms の UI に関する詳細は、「フォーム管理の概要」を参照してください。

ディスプレイ

タイトルテキスト Search & Listerコンポーネントのタイトルデフォルトのタイトルはフォームポータルです。
テンプレートのレイアウト アセットのレイアウト
詳細検索の無効化 このオプションを有効にすると、詳細検索アイコンが非表示になります。
テキスト検索の無効化 このオプションを有効にすると、全文検索バーが非表示になります。
結果 ページごとの結果の数 ページに表示するフォームの最大数を設定します。
結果のテキスト

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

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

ページテキスト

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

例えば、このフィールドに申込みフォームを指定し、51ページある場合、ページのテキストは申込みフォーム1/51に変更されます。

/ テキスト

を指定したテキスト(51のページ1 )に置き換えます。 デフォルト値は / です。

例えば、このフィールドでのうちを指定すると、テキストは51のページ1に変わります。

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

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

注意:フォームの送信 URL は、複数の場所で指定できます。また、その優先順位は以下の通りです。

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

検索ペイン

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

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

日付、フルテキスト、プロパティ、タグの述
語を含む検索パネル:日付、フルテキスト、プロパティ、タグの述語を含む 検索パネル(Tags Predicateを含む)

日付の述語

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

「Date Predicate」コンポーネントを構成するには、次の手順を実行します。

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

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

    • タイプ: 使用できるオプションは「 最終変更日」のみです。
    • テキスト: Date Predicateコンポーネントのラベルまたはキャプションです。デフォルト値は​最終変更日​です。
    • 開始日のラベル:開始日フィールドの ラベルまたはキャプション。
    • 終了日のラベル:終了日フィールドの ラベルまたはキャプション。
    • 非表示: リストフォームにデフォルトの日付フィルターを適用します。
  3. OK」をタップします。

フルテキストの述語

「Full Text Predicate」コンポーネントは、フォームデータに対して名前や説明などを検索する、フルテキスト検索を実装します。名前や説明にテキストを含む戻りフォームで、テキスト文字列を検索できます。

Full Text Predicate コンポーネントを構成するには、次の手順を実行します。

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

プロパティの述語

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

Properties Predicate コンポーネントを構成するには、次の手順を実行します。

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

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

  3. オプション」タブで、追加アイテム​をタップします。

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

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

    例えば、タイトルに「Travel」という文字を含むフォームを表示するには、「タイトル」プロパティ横の「非表示」を選択します。さらに、デフォルトのフィルター値のテキストボックスで「Travel」を指定します。

  6. OK」をタップします。

タグの述語

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

Tags Predicate コンポーネントを構成するには、次の手順を実行します。

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

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

ページ上でフォームを一覧表示

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

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

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

モバイルデバイスへの適合性

フォームポータルのSearch & Listerコンポーネントは、モバイルデバイスフレンドリーで、デバイスに適応します。3つのデフォルト表示すべて:Webページの幅が調整される場合、グリッド、カード、パネルは、サイトが開かれたデバイスに応じて再レイアウトされます。 簡単に言えば、Search & Listerは単なるコンポーネントであり、ページレベルのスタイリングは管理しません。

次の画像は、モバイルデバイス上で開いた場合の Search & Lister コンポーネントを示します。

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

フォームポータルページのカスタマイズ

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

AEMフォームUIでは、カスタムメタデータをフォームに追加することができます。カスタムメタデータは、エンドユーザーに対してフォームの展開・検索機能を提供するのに役に立ちます。カスタムメタデータについて詳しくは、Formsポータルコンポーネントのテンプレートのカスタマイズを参照してください。

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

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now