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

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

前提条件

Formsポータルのコンポーネントは、デフォルトでは使用できません。 以下のフォームポータルコンポーネントカテゴリが有効になっていることを確認します。詳しくは、 フォームポータルコンポーネントの有効化.

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

Document Services の述語 日付の述語、フルテキストの述語、プロパティの述語、タグの述語の各コンポーネントが含まれます。 これらのコンポーネントは、Search & Lister コンポーネントで検索を設定するために使用されます。

AEMサイトページで有効にしたコンポーネントカテゴリは、コンポーネントブラウザーで使用できます。

Forms portal コンポーネントのカテゴリ

Search & Lister コンポーネント

Document Services コンポーネントカテゴリの下にある Search & Lister コンポーネントは、ページ上のフォームのリストを表示し、リストに表示されたフォームに検索を実装するために使用されます。 このコンポーネントには、次の 2 つのペインが含まれます。

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

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

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

リストウィンドウ

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

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

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

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

タブ	設定	説明
アセットフォルダー	項目を追加	AEM Forms UI を使用してアセットがアップロードされるフォルダーを設定します。 デフォルトでは、アップロードされたすべてのアセットがリストされます。 AEM Forms UI について詳しくは、 フォーム管理の概要.
ディスプレイ	タイトルテキスト	Search & Lister コンポーネントのタイトル。 デフォルトのタイトルはです。 Forms Portal
	テンプレートのレイアウト	アセットのレイアウト
	詳細検索を無効にする	有効にすると、詳細検索アイコンが非表示になります。
	テキスト検索を無効にする	有効にすると、全文検索バーが非表示になります。
結果	1 ページあたりの結果数	ページに表示するフォームの最大数を設定します。
	結果のテキスト	結果のテキストを設定します（例： 601 の 1-12） 結果) をクリックします。 デフォルト値は 結果. 例えば、このフィールドでフォームを指定し、合計 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 formsは除外されます。
	HTMLプロファイル	レンダリングに使用するHTMLプロファイルを設定します。 使用可能なすべてのプロファイルがドロップダウンリストに表示されます。
	URL を送信	フォームデータが送信されるサーブレットを設定します。 注意： フォームの送信 URL は複数の場所で指定でき、優先順位は次のとおりです。 優先順位が最も高いのは、フォームに埋め込まれている送信URL（送信ボタン）です。 2番目に優先順位が高いのは、AEM Forms UIで説明している送信URLです。 一番優先順位が引くのが、フォームポータルで説明している送信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. コンポーネントをタップし、 をタップします。編集ダイアログが開きます。

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

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

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

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

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

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

3. 「OK」をタップします。

フルテキストの述語

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

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

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

プロパティの述語

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

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

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

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

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

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

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

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

タグの述語

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

Tags Predicate コンポーネントを設定するには：

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

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

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

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

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

ドラフト状態のフォームと、既に送信済みのフォームを一覧表示するには、 ドラフトと送信 コンポーネント。 詳しくは、 ドラフトと送信コンポーネントのカスタマイズ.

モバイルデバイスへの対応

Forms Portal Search & Lister コンポーネントは、モバイルデバイスに適したコンポーネントです。 3 つすべてのデフォルトビュー：グリッド、カード、パネルは、web ページにも適応するという事実を踏まえて、デバイスに応じて再レイアウトされます。簡単な事実は、Search & Lister は単なるコンポーネントであり、ページレベルのスタイル設定は管理しないということです。

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

Search & Listerコンポーネント

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

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

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

デフォルトでは、フォームポータルはレンダリングアクションを提供します。 フォームポータルをカスタマイズして、その他のアクションを追加できます。 詳しくは、 フォームリスター項目にカスタムアクションを追加する。

関連記事

• フォームポータルコンポーネントの有効化
• フォームポータルページの作成
• API を使用した Web ページ上のフォームの一覧表示
• ドラフトと送信コンポーネントの使用
• ドラフトと送信済みフォームのストレージのカスタマイズ
• ドラフトと送信コンポーネントとデータベースの統合のサンプル
• フォームポータルコンポーネントのテンプレートをカスタマイズする
• ポータル上のフォーム公開の概要