Adobe Experience Manager(AEM)では、簡単に使用できるアダプティブフォームを作成でき、エンドユーザーに動的なエクスペリエンスを提供します。フォームのレイアウトは、アダプティブフォームでの各項目やコンポーネントの表示方法をコントロールします。
注意:
アダプティブフォームのレイアウトを変更する場合、AEM でオーサリングモードを使用してください。


このパネルレイアウトを使用すると、特別なナビゲーションなしでレイアウトをデバイスの画面サイズに合うように調整するレスポンシブレイアウトを作成できます。
このレイアウトを使用すると、複数のパネルのアダプティブフォームコンポーネントをパネル内に順番に配置することができます。


フォーム上にガイド付きのナビゲーションを用意したい場合、このパネルレイアウトを使用してください。例えば、ユーザーを 1 手順ずつガイドしながらフォーム内の必須の情報を取得したい場合、このレイアウトを使用します。
パネル内に 1 手順ずつのナビゲーションを用意するには、アダプティブフォームのパネルコンポーネントを使用します。このレイアウトを使用すると、現在の手順を完了しない限りユーザーは次の手順に進めません。
window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)


このレイアウトを使用すると、アコーディオンスタイルのナビゲーションを備えたパネルにアダプティブフォームのパネルコンポーネントを配置できます。また、このレイアウトを使用すると、繰り返し可能なパネルを作成できます。繰り返し可能なパネルを使用すれば、必要に応じて動的にパネルを追加したり削除することができます。パネルの繰り返しの最小数、最大数を定義することができます。また、パネル内の項目に入力される情報に応じて動的にパネルのタイトルを決定することができます。



モバイルレイアウトはモバイルデバイスの比較的小さい画面で、わかりやすいナビゲーションをできるようにします。モバイルレイアウトでは、フォームのナビゲーションにタブ付きスタイルまたはウィザードスタイルを使用します。モバイルレイアウトを適用するとフォーム全体を単一のレイアウトで表示します。
このレイアウトでは、ナビゲーションバーとナビゲーションメニューを使用してナビゲーションをコントロールします。ナビゲーションバーで、進むと戻るナビゲーションはそれぞれ < と > のアイコンで示されます。

レイアウトの名称の通り、このレイアウトはナビゲーションメニューおよびナビゲーションバーと併せてパネルのタイトルを表示します。また、このレイアウトではナビゲーションに「進む」アイコンと「戻る」アイコンを使用します。

レイアウトの名称の通り、このレイアウトはナビゲーションメニューおよびナビゲーションバーのみ表示し、パネルのタイトルは表示しません。また、このレイアウトではナビゲーションに「進む」アイコンと「戻る」アイコンを使用します。


アダプティブフォームでアクションボタンを追加したときに、デフォルトレイアウトとしてこのレイアウトが選択されます。このレイアウトを選択すると、デスクトップおよびモバイルの両デバイスで同一のレイアウトを表示します。
また、このレイアウトで設定されたアクションボタンを含むツールバーを複数追加することができます。アクションボタンはフォームのコントロールに関連付けられます。ツールバーはパネルの前または後に設定できます。

このレイアウトを選択すると、デスクトップデバイスとモバイルデバイスで異なるレイアウトが表示されます。
デスクトップレイアウトでは、特定のラベルを使用してアクションボタンを追加できます。このレイアウトで設定できるツールバーは 1 つのみです。このレイアウトでツールバーを 1 つ以上設定した場合、モバイルデバイス上でツールバーが重なり、表示されるのはそのうち 1 つのみです。例えば、ツールバーを表示できるのはフォームの下部、上部、またはパネルの前か後のどれか 1 つに限られます。
モバイルレイアウトでは、アイコンを使用してアクションボタンを追加します。
