フォームポータルページの作成 creating-a-forms-portal-page
フォームポータルのコンポーネントにより、web 開発者は Adobe Experience Manager(AEM)を使用して作成された web サイト上にフォームポータルを作成してカスタマイズできます。フォームポータルの概要については、ポータル上のフォーム公開の概要を参照してください。
前提条件 prerequisites
デフォルトでは、フォームポータルコンポーネントは使用できません。フォームポータルのコンポーネントを有効にするの説明に従い、フォームポータルコンポーネントにおける次のカテゴリが有効になっていることを確認してください。
Document Services:検索とリスター、リンクおよびドラフトと送信のコンポーネントが含まれています。
Document Services Predicates:日付の述語、フルテキストの述語、プロパティの述語、およびタグの述語のコンポーネントが含まれています。これらのコンポーネントは、検索とリスターコンポーネントで検索を設定する際に使用します。
これらを AEM Sites のページで有効にすると、コンポーネントの各カテゴリはコンポーネントブラウザーで使用できるようになります。
フォームポータルコンポーネントのカテゴリ
検索とリスターコンポーネント search-amp-lister-component
Document Services のコンポーネントカテゴリにある検索とリスターコンポーネントは、ページ上にフォームをリストし、その中から検索を実行するのに使用されます。このコンポーネントには、次の 2 つのペインが含まれます。
- フォームがリストされるリストペイン。
- 検索機能を追加する検索ペイン。
検索とリスターコンポーネントは、コンポーネントブラウザの Document Services コンポーネントカテゴリからページまでドラッグ&ドロップすることができます。コンポーネントを追加すると、下記の画像のようになります。
ページ中のグリッドレイアウトの検索とリスターコンポーネント
リストペイン list-pane
リストペインはフォームが一覧表示される領域です。検索とリスターコンポーネントでは各種の設定オプションが提供されており、リストウィンドウでフォームの表示を制御するのに使用します。
リストウィンドウを設定するには、検索とリスターコンポーネントを選択し、 を選択します。編集コンポーネント ダイアログが開きます。
編集モードのリストペイン
「編集」ダイアログには複数のタブが含まれており、以下の表で説明される設定オプションを提供します。終わったら「OK」を選択して、設定を保存します。
検索ペイン search-pane
検索ペインでは、サイドキックの「Document Services Predicates」カテゴリから、「Date Predicate」、「Full Text Predicate」、「Properties Predicate」、および「Tags Predicate」コンポーネントを追加することができます。これらのコンポーネントにより、一覧表示されるフォームに対してユーザーが検索を実行するための検索機能が実装されます。
チップ: フォームポータルに表示されるフォームのリストを既定の条件に基づいて制御し、エンドユーザーに対して検索機能を非表示にできます。フォームのリストを制御するには、検索フィルターを適用するためにPredicateコンポーネントを使用します。デフォルトフィルター値を指定して、コンポーネントの編集ダイアログの「表示」タブで検索を無効にすることもできます。
日付、フルテキスト、プロパティ、およびTags Predicate付きの検索パネル
日付の述語 date-predicate
日付の述語コンポーネントが追加されている場合は、指定された期間に変更されたフォームを、一覧表示されたフォームの中から検索できます。
日付の述語コンポーネントを設定するには、次の手順を実行します。
-
コンポーネントを選択し、 を選択します。編集ダイアログが開きます。
-
以下のプロパティを指定します。
-
タイプ: 選択できるオプションは「最終変更日」のみです。
-
テキスト: Date Predicateコンポーネントのラベルまたはキャプションです。デフォルト値は「最終変更日」です。
-
開始日のラベル: 開始日フィールドのラベルまたはキャプションです。
-
終了日のラベル: 終了日フィールドのラベルまたはキャプションです。
-
非表示: デフォルトの日付フィルターを適用してフォームを一覧表示します。
-
-
「OK」を選択します。
フルテキストの述語 full-text-predicate
フルテキストの述語コンポーネントは、フォームデータに対する名前や説明などのフルテキスト検索を実装します。ユーザーは、任意のテキスト文字列を検索して、名前または説明にそのテキストを含むフォームを返すことができます。
フルテキストの述語コンポーネントを設定するには、次の手順を実行します。
- コンポーネントを選択し、 を選択します。編集ダイアログが開きます。
- 「メインタイトル」フィールドにタイトルを指定します。
- 「OK」を選択します。
プロパティの述語 properties-predicate
プロパティの述語コンポーネントは、フォームプロパティ(タイトル、作成者および説明など)に基づいたフォームの検索機能を実装します。
プロパティの述語コンポーネントを設定するには、次の手順を実行します。
-
コンポーネントを選択し、 を選択します。編集ダイアログが開きます。
-
「一般」タブで、検索ラベルを指定します。デフォルト値は、プロパティ です。
-
「オプション」タブで「アイテムの追加」を選択します。
-
ドロップダウンリストからプロパティを選択し、ドロップダウンリストの下のフィールドでプロパティの検索ラベルを指定します。
-
手順 4 を繰り返してさらにプロパティを追加します。デフォルトのフィルター値を指定して、指定の条件に基づいてフォームをリスト表示したり、エンドユーザーごとに検索のプロパティを非表示にしたりできます。プロパティの「非表示」チェックボックスを選択し、デフォルトフィルター値を指定します。例えば、タイトルに「Travel」という文字を含むフォームを表示するには、「タイトル」プロパティ横の「非表示」を選択します。さらに、デフォルトフィルター値のテキストボックスで Travel と指定します。
-
「OK」を選択します。
タグの述語 tags-predicate
タグの述語コンポーネントは、Forms Manager で定義されているタグに基づいて、フォームの検索機能を実装します。
タグの述語コンポーネントを設定するには、次の手順を実行します。
- コンポーネントを選択し、 を選択します。編集ダイアログが開きます。
- 「タグ」フィールド横の下向き矢印ボタンを選択します。
- 適切なタグを選択します。
- 「OK」を選択します。
選択したタグが、選択用のチェックボックスと一緒に検索パネルに表示されます。ユーザーはこのタグに基づいて検索を絞り込めるようになります。
ページ上でフォームを一覧表示 list-forms-on-a-page-br
ページ上でフォームを一覧表示するには、そのページに Search & Lister コンポーネントを追加し、リストペイン を設定します。エンドユーザーが、日付、テキストおよびタグでフォームを検索できるようにするには、検索パネル コンポーネントを追加します。
ページ上の任意の場所からフォームにリンクするには、リンクコンポーネントを使用します。リンクコンポーネントについての詳細は、「ページ内のリンクコンポーネントの埋め込み」を参照してください。
ドラフト状態で、既に送信済みのフォームをリストするには、ドラフトと送信 コンポーネントを使用します。詳しくは、ドラフトと送信コンポーネントのカスタマイズを参照してください。
モバイルデバイスへの適合性 mobile-device-friendliness
フォームポータルの検索とリスターコンポーネントは、モバイルデバイスフレンドリーで、デバイスに応じて表示幅を調整します。3 つすべてのデフォルトビュー:グリッド、カード、パネルは、web ページにも適応するという事実を踏まえて、デバイスに応じて再レイアウトされます。簡単に言えば、検索とリスターコンポーネントは単なるコンポーネントであり、ページレベルのスタイリングは管理しません。
次の画像は、モバイルデバイス上で開いた場合の検索とリスターコンポーネントを示します。
Search & Listerコンポーネント
フォームポータルページのカスタマイズ customizing-a-forms-portal-page-br
フォームポータルページをカスタマイズすることで、特徴のある外観にすることができます。また、メタデータを追加することで、検索機能の改善、ページのレイアウト変更、およびカスタム CSS スタイルの追加を行うこともできます。詳しくは、「フォームポータルコンポーネント用テンプレートのカスタマイズ」を参照してください。
AEM Forms UI を使用すると、カスタムメタデータをフォームに追加することができます。カスタムメタデータは、エンドユーザーにリストおよび検索フォームのエクスペリエンスを提供するのに役立ちます。カスタムメタデータについて詳しくは、「フォームポータルコンポーネント用テンプレートのカスタマイズ」を参照してください。
フォームポータルは、標準のレンダリングアクションを提供します。フォームポータルをカスタマイズして、他のアクションを追加することもできます。詳しくは、フォームリスター項目へのカスタムアクションボタンの追加を参照してください。