コアコンポーネントに基づくアダプティブ Formsのレイアウト機能

Last update: Mon Nov 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

ユーザー
開発者
管理者

バージョン

記事リンク

AEM 6.5

ここをクリックしてください

AEM as a Cloud Service（基盤コンポーネント）

ここをクリックしてください

AEM as a Cloud Service（コアコンポーネント）

この記事

アダプティブFormsは、フォームを効果的にレイアウトおよびデザインするためのファーストクラスのコンポーネントを提供します。レイアウトは、フォームでのコンポーネントの表示方法を制御します。アダプティブ Formsでは、パネル、ウィザード、アコーディオン、上部タブ/水平タブのタブ、左/垂直タブのタブなどの様々なレイアウトがサポートされています。

前提条件

レイアウトの様々な機能を調べる前に、お使いの環境でコアコンポーネントが有効になっていることを確認します。お使いの環境でコアコンポーネントを有効にする方法について詳しくは、ここをクリックしてください。

アダプティブ Formsのレイアウトタイプ

コアコンポーネントに基づくアダプティブフォームは、次のタイプのレイアウトをサポートしています。

パネルレイアウト
ウィザードのレイアウト
垂直方向のレイアウト
水平レイアウト
アコーディオンレイアウト

パネルレイアウト

パネルレイアウトは、関連するフィールドを整理して、対応するコンテンツを簡単に移動および検索するのに役立ちます。パネルレイアウトを使用すると、アダプティブフォーム内の個別のパネル、セクションまたはパネル内にフォームコンポーネントを配置できます。

パネルレイアウト

パネルコンポーネントを使用して、パネルレイアウトをフォームに追加できます。パネルコンポーネントの様々なプロパティを設定する方法について詳しくは、パネルコンポーネントの記事を参照してください。

ウィザードのレイアウト

ウィザードレイアウトは、複雑なフォームを明確な手順に分割してシンプル化するのに役立ちます。各手順はプロセスの異なる部分を表し、ユーザーは多くの場合、「次へ ボタンと 前へ ボタンを使用して手順を順番に移動し す。ウィザードレイアウトを使用すると、複数のセクションや手順を含むフォームを作成できます。

ウィザードのレイアウト

ウィザードレイアウト

ウィザードコンポーネントを使用して、フォームにウィザードレイアウトを追加できます。ウィザードコンポーネントの様々なプロパティを設定する方法について詳しくは、ウィザードコンポーネントの記事を参照してください。

垂直タブのレイアウト

垂直タブレイアウトは、左側のレイアウトのタブとも呼ばれます。垂直タブレイアウトでは、フォームの左側に沿ってパネルまたはセクションが整理されます。パネルやセクションが縦に積み重ねられたフォームのレイアウトは一般的で、読みやすさやナビゲーションが容易になります。

垂直方向のレイアウト

垂直タブレイアウト

垂直タブコンポーネントを使用して、フォームに垂直タブレイアウトを追加できます。垂直タブコンポーネントの様々なプロパティを設定する方法について詳しくは、垂直タブコンポーネントの記事を参照してください。

水平タブレイアウト

水平タブレイアウトは、上部レイアウトのタブとも呼ばれます。水平タブレイアウトでは、パネルまたはセクションを並べて配置します。このレイアウトでは、フォームまたはパネルの幅に対して直線的にフォームセクションが表示されます。

水平レイアウト

水平タブレイアウト

水平タブコンポーネントを使用して、フォームに水平タブレイアウトを追加できます。水平タブコンポーネントの様々なプロパティを設定する方法について詳しくは、水平タブコンポーネントの記事を参照してください。

アコーディオンレイアウト

アコーディオンレイアウトでは、アダプティブフォーム内の折りたたみ可能なセクションまたはパネルにコンテンツが表示されます。セクションを展開すると、内にコンテンツが表示されますが、その他のセクションは折りたたまれたままです。大量の情報をコンパクトに表示する場合に最適です。

アコーディオンレイアウト

アコーディオンコンポーネントを使用して、フォームにアコーディオンレイアウトを追加できます。アコーディオンコンポーネントの様々なプロパティを設定する方法について詳しくは、アコーディオンコンポーネントの記事を参照してください。

レイアウトを挿入してフォームコンポーネントを追加する方法については、「レイアウトを挿入してフォームコンポーネントを追加する方法というタイトルの節を参照してください。

適切なアダプティブフォームレイアウトを選択する方法

ユーザーエクスペリエンスとフォームの機能を最適化するには、適切なアダプティブフォームレイアウトを選択することが重要です。この表を使用すると、使用可能な様々なレイアウトオプションを理解するのに役立ち、特定のニーズとユースケースに基づいて最も適したレイアウトを選択する際にガイドになります。

機能

パネルレイアウト

ウィザードレイアウト

上部/垂直タブレイアウトのタブ

左側のタブ/水平タブのレイアウト

アコーディオンレイアウト

目的

関連するコンテンツを個別のセクションにグループ化

複数の手順から成るプロセスまたはフォームのガイド

同じページ上のセクション/ビューを切り替えることができます

上部のタブと同様ですが、左側に垂直に配置されます

コンテンツを折りたたみ可能なセクションに整理します

構造

個別セクション

順次ステップ/ページ

上部の水平タブ

左側の垂直タブ

折りたたみ可能なパネル/セクション

ナビゲーション

パネルヘッダーをクリックして移動します

– 進む：「次へ」ボタン
– 戻る：「戻る」ボタン
- オプションのスキップ手順

タブをクリックしてセクションを切り替える

ヘッダーをクリックしてセクションを展開/折りたたむ

ユーザーエクスペリエンス

管理しやすい方法で大量のコンテンツを整理する

ステップバイステップのガイダンス、負担の軽減

ビュー間の明確でアクセス可能な切り替え

垂直方向のスペースを効率的に使用し、常にタブを表示

セクションを展開/折りたたんだ状態のコンパクトビュー

ユースケース

セクションが分類された複雑なフォーム

セットアッププロセス、複雑なフォーム

設定またはコンテンツカテゴリの整理

ダッシュボード、複雑なデータビュー

FAQ、設定メニュー、詳細なコンテンツセクション

レイアウトを挿入し、フォームコンポーネントを追加するにはどうすればよいですか？

次の図は、フォームにレイアウトを挿入し、フォームコンポーネントを追加する手順を示しています。

レイアウトおよびフォームコンポーネントを追加するためのワークフロー

「アダプティブFormsのレイアウトタイプの節に示されている IT リクエストフォームについて考えてみます。このフォームは、ネットワークまたはラップトップに関連する技術的な問題を抱えている従業員から情報を収集します。次の 3 つのパネルがあります。

従業員の詳細：パネルには、従業員に関する情報が収集され、名前、メール ID、部門というラベルの付いた 3 つのテキストボックスが含まれています。
問題の詳細：パネルには、問題に関する詳細が取り込まれます。ネットワーク、コンピュータ、その他の 3 つのオプションを持つ問題カテゴリのチェックボックスが含まれています。また、「指定してください」と「コメント」という 2 つのテキストボックスも用意されています。
添付ファイル：このパネルを使用すると、ユーザーは問題に関連するサポートドキュメントをアップロードできます。

レイアウトを挿入し、それにコンポーネントを追加する手順を順を追って説明します。この例では、水平タブレイアウトをフォームに挿入します。

1. レイアウトコンポーネントをフォームに挿入する

Experience Manager Forms インスタンスにログインします。
左上隅の「Adobe Experience Manager」/「Forms」/「Formsとドキュメント を選択します。
既存のアダプティブフォームを編集モードで開きます（作成済みの場合）。

または、新しいアダプティブフォームを作成することもできます。
フォームエディターでレイアウトを追加できるセクションを見つけます。

追加アイコンをクリックします。アイコンは、新しいコンポーネントを追加するオプションを示すプラス記号（+）です。

レイアウトの挿入

追加アイコンをクリックすると、新規コンポーネントの挿入 ダイアログボックスが表示され、挿入する様々なコンポーネントが表示されます。

note note
NOTE
または、レイアウトコンポーネントをドラッグ&ドロップすることもできます。

ダイアログボックスで使用可能なコンポーネントを参照し、リストから目的のレイアウトを選択します。この場合、水平タブコンポーネントを選択して、水平タブレイアウトを挿入します。

水平タブコンポーネントをフォームに追加すると、デフォルトでは、Item1 と Item2 という名前の 2 つの空のパネルで最初に構成されます。これらのパネルには、手動でフォームコンポーネントを追加する必要があります。
水平タブコンポーネントのプロパティを開き、コンポーネントの名前を指定します。
例えば、この場合、水平タブコンポーネントの名前を IT リクエストフォームとして追加します。
「完了」をクリックします。

レイアウトコンポーネントをフォームに追加したら、要件に従ってパネルの数を変更します。

2. レイアウトへのパネルの追加

水平タブコンポーネントに新しいパネルを追加します。

水平タブコンポーネントのプロパティを開き、「項目」タブをクリックします。
追加アイコンをクリックして、新しいパネルを追加します。

追加アイコンをクリックすると、新規コンポーネントを挿入 ダイアログボックスが表示されます。
パネルコンポーネントを選択します。

パネルコンポーネントを選択すると、新しいパネルが水平レイアウトに追加されます。

新しいパネルの名前を指定します。指定しない場合、水平タブコンポーネントのプロパティを保存できません。
次の図に示すように、パネルの名前を指定します。
「完了」をクリックします。

「完了」をクリックすると、3 つのパネルが並んで表示されます。パネル名は、各パネルの見出しとして表示され、各パネルにフォームコンポーネントを追加できます。

パネルコンポーネントのプロパティを設定できます。例えば、IT リクエストフォームにパネルタイトルが含まれていない場合は、パネルコンポーネントのプロパティを設定する手順を以下に示します。
最初のパネルのプロパティを開きます。
「基本」タブから「タイトルを非表示」チェックボックスを選択します。
「完了」をクリックします。

同様に、他の 2 つのパネルのタイトルを非表示にすることもできます。完了したら、フォームコンポーネントを各パネルに追加できます。

3. パネルへのフォームコンポーネントの追加

パネル内で、コンポーネントを追加できるセクションを見つけます。
追加アイコンをクリックします。アイコンは、新しいコンポーネントを追加するオプションを示すプラス記号（+）です。

追加アイコンをクリックすると、新規コンポーネントの挿入 ダイアログボックスが表示され、挿入する様々なコンポーネントが表示されます。
表示されるダイアログボックスで使用可能なコンポーネントを参照し、目的のコンポーネントを選択します。この場合は、テキストボックスコンポーネントを選択します。
追加したコンポーネントのプロパティを開き、名前を指定します。追加したテキストボックスコンポーネントのプロパティを編集し、その名前を指定します。
同様に、さらに 2 つのテキストボックスコンポーネントを追加し、それらのコンポーネントに名前を付けて、メール ID および部門として追加します。

最初のパネルのコンポーネントが追加されたので、次に 2 番目のパネルへのコンポーネントの追加に進むことができます。
パネルを切り替えるには、ツールバーの パネルを選択 をクリックします。

パネルを選択 をクリックすると、水平タブコンポーネントに追加されたパネルのリストが表示されます。
パネルリストから「2 パネル」を選択すると、ビューが 1 番目のパネルから 2 番目のパネルに変更されます。
次の図に示すように、手順 2 から手順 4 までの手順を繰り返して、パネル 2 に目的のコンポーネントを追加します。
手順 6 と手順 7 で説明した手順に従って、3 パネル に切り替えます。
パネル 3 に目的のコンポーネントを追加するには、手順 2 から手順 4 までの手順を繰り返します。
オーサリング環境の右上隅にある「プレビュー」をクリックします。

また、コンポーネントをドラッグ&ドロップして、フォームコンポーネントを各パネルに追加することもできます。

「アイコンを使用して、パネルからフォームコンポーネントを削除することもできます。

コンポーネントの削除

必要に応じて、コンポーネントに必要な検証を追加することもできます。

既存のレイアウトを新しいレイアウトに置き換える方法

フォームのレイアウトを新しいレイアウトに置き換えることができます。その際、フォーム内でコンポーネントを配置および表示する方法を変更します。

フォームの既存のレイアウトを置き換えるには、次の手順を実行します。

レイアウトコンポーネントのツールバーにある置換アイコンをクリックすると、コンポーネントを置換 ダイアログボックスが表示されます。
コンポーネントを置換 ダイアログボックスから目的のレイアウトを選択します。

レイアウトを選択すると、それに応じてレイアウト内のコンポーネントの配置が変わります。例えば、コンポーネントを置換 ダイアログボックスで垂直タブコンポーネントを選択すると、パネルの配置が左側のタブに変わります。

追加バイト

コンポーネントをフォームエディターにドラッグ&ドロップするには、次の手順を実行します。

コンポーネントを追加できるセクションを見つけます。
オーサリング環境内の左側のパネルに移動し、「コンポーネント」をクリックします。

「コンポーネント」オプションをクリックすると、使用可能なコンポーネントのリストが表示されます。
使用可能なコンポーネントを参照し、目的のコンポーネントを選択します。
選択したコンポーネントをクリックして押したままコンポーネントをドラッグし、パネル領域にドラッグして配置します。
マウスを離して、コンポーネントをパネルにドロップします。