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

フォームポータルのコンポーネントでは、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」コンポーネントは、コンポーネントブラウザーの「ドキュメントサービス」コンポーネントカテゴリからページにドラッグ&ドロップできます。 コンポーネントを追加すると、下記の画像のようになります。

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

リストペイン

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

To configure the List pane, tap the Search and Lister component and then tap settings_icon. The Edit Component dialog opens.

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

編集」ダイアログには複数のタブが含まれており、以下の表で説明される設定オプションを提供します。Tap OK to save the configuration, when done.

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

ディスプレイ

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

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

For example, if you specify Forms in this field and there are a total of 601 forms, the result text changes to 1-12 of 601 Forms.

ページテキスト

Configures the page text (for example, Page 1 of 51). デフォルト値は「ページ」です。

For example, if you specify Application Form in this field and there are 51 pages, the page text changes to Application Form 1 of 51.

/ テキスト

Replaces the word of with the specified text (Page 1 of 51). デフォルト値は / です。

For example, if you specify out of in this field, the text changes to Page 1 out of 51.

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

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

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

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

検索ペイン

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

**チップ:**フォームポータルに表示されるフォームのリストを既定の条件に基づいて制御し、エンドユーザーに対して検索機能を非表示にできます。フォームのリストを制御するには、検索フィルターを適用するためにPredicateコンポーネントを使用します。You can also specify the default filter values and disable the search from the Display tab of the Edit Component dialog.

日付、フルテキスト、プロパティ、およびTags Predicate​図を含む検索パネル: 日付、フルテキスト、プロパティ、およびTags Predicate付きの検索パネル

日付の述語

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

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

  1. Tap the component and then tap settings_icon. 編集ダイアログが開きます。

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

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

フルテキストの述語

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

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

  1. Tap the component and then tap settings_icon. 編集ダイアログが開きます。
  2. メインタイトル」フィールドにタイトルを指定します。
  3. Tap Ok.

プロパティの述語

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

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

  1. Tap the component and then tap settings_icon. The Edit dialog opens.

  2. In the General tab, specify the search label. The default value is Properties.

  3. In the Options tab, tap Add Item.

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

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

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

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

タグの述語

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

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

  1. Tap the component and then tap settings_icon. The Edit dialog opens.
  2. 「タグ」フィールド横の下向き矢印ボタンをタップします。
  3. 適切なタグを選択します。
  4. OK」をタップします。

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

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

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

ページ上の任意の場所からフォームにリンクするには、リンクコンポーネントを使用します。For more information about link component, see Embedding link component in a page.

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

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

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

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

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

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

フォームポータルページをカスタマイズすることで、特徴のある外観にすることができます。また、メタデータを追加することで、検索機能の改善、ページのレイアウト変更、およびカスタムCCSスタイルの追加を行うこともできます。For more information, see Customizing templates for Forms Portal Components.

AEMフォームUIでは、カスタムメタデータをフォームに追加することができます。カスタムメタデータは、エンドユーザーに対してフォームの展開・検索機能を提供するのに役に立ちます。For more information about Custom metadata, see Customizing templates for Forms Portal Components.

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

このページ