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

フォームポータルのコンポーネントでは、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ポータルコンポーネントカテゴリ

Search & Lister コンポーネント

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

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

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

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

リストペイン

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

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

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

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

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

ディスプレイ

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

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

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

ページテキスト

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

例えば、このフィールドにApplication Form を指定し、51ページある場合、ページテキストは「Application Form 1 of 51」に変わります。

/ テキスト

を、指定されたテキスト(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. 一般」タブで、検索ラベルを指定します。 デフォルト値は​Properties​です。

  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 Portalコンポーネントのテンプレートのカスタマイズ 」を参照してください。

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

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

このページ