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

フォームポータルのコンポーネントでは、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サイトのページで有効にすると、コンポーネントの各カテゴリはコンポーネントブラウザで使用でるようになります。

コンポーネントブラウザー内のAEM Formsポータルコンポーネント
図: Forms portal コンポーネントのカテゴリ

Search & Listerコンポーネント

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

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

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

ページ内の 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 で、結果のテキストは 601 の 1 ~ 12 に変わります Forms。

ページテキスト

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

例えば、 申し込みフォーム このフィールドと 51 ページがある場合、ページテキストは 申し込みフォーム 1 / 51.

/ テキスト

次の単語を置き換えます。 / 指定したテキストを使用します(1 ページ目) / 51) を参照してください。 デフォルト値は / です。

例えば、 ~から このフィールドのテキストは「1 ページ目」に変わります。 ~から 51.

フォームリンク レンダリングタイプ 指定したレンダリングタイプに基づいて、フォームのリストをコントロールします。使用可能なオプションは「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コンポーネントを使用します。また、デフォルトのフィルター値を指定し、コンポーネントを編集ダイアログの「表示」タブで検索を無効にすることもできます。

日付、フルテキスト、プロパティおよびタグの述語を含む検索パネル
図: 日付、フルテキスト、プロパティおよびタグの述語を含む検索パネル

日付の述語

「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」という文字を含むフォームを表示するには、「タイトル」プロパティ横の「非表示」を選択します。さらに、「デフォルトのフィルター値の移動」テキストボックスを指定します。

  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 Portal コンポーネントのテンプレートのカスタマイズ.

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

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

関連記事

このページ