アダプティブフォームのレイアウトの機能

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

必要な知識

アダプティブフォームの各種レイアウト機能を学習する前に、次の記事を参照してアダプティブフォームの詳細を理解してください。

AEM Forms の概要

フォーム作成の概要

レイアウトのタイプ

アダプティブフォームは次のタイプのレイアウトを提供します。

パネル レイアウトパネル内の項目やコンポーネントをデバイスに表示する方法をコントロールします。

モバイル レイアウトモバイルデバイス上のフォームのナビゲーションを制御します。デバイスの幅が 768 ピクセル以上の場合、レイアウトはモバイルと判断され、モバイルデバイス向けに最適化されます。

ツールバー レイアウトフォーム内のツールバーまたはパネルツールバーのアクションボタンの配置をコントロールします。

これらのすべてのパネルレイアウトは次の場所で定義されます。

/libs/fd/af/layouts.

メモ

アダプティブフォームのレイアウトを変更する場合、AEM でオーサリングモードを使用してください。

CRX リポジトリ内のレイアウトの格納場所

パネルレイアウト

フォーム作成者は、ルートパネルを含めたアダプティブフォームの各パネルにレイアウトを関連付けることができます。

パネルレイアウトは/libs/fd/af/layouts/panelから利用できます。

アダプティブフォームのルートパネルのパネルレイアウトのリスト
図:アダプティブフォームのパネルレイアウトの リスト

レスポンシブ - ナビゲーションなしですべて 1 ページに

このパネルレイアウトを使用すると、特別なナビゲーションなしでレイアウトをデバイスの画面サイズに合うように調整するレスポンシブレイアウトを作成できます。

このレイアウトを使用すると、複数の​パネルアダプティブフォーム​コンポーネントをパネル内に次々に配置できます。

レスポンシブレイアウトを使用したフォームの小画面での表示例

図:レスポンシブレイアウト を使用したフォーム(小さい画面で表示)

レスポンシブレイアウトを使用したフォームの大画面での表示例

図:レスポンシブレイアウト を使用したフォーム(大画面表示)

ウィザード - 複数の手順を 1 つずつ表示するフォーム

フォーム上にガイド付きのナビゲーションを用意したい場合、このパネルレイアウトを使用してください。例えば、ユーザーを1ステップずつガイドしながらフォーム内の必須の情報を取得したい場合に、このレイアウトを使用します。

Panel adaptive formコンポーネントを使用して、パネル内での操作手順を示します。 このレイアウトを使用すると、現在の手順を完了しない限りユーザーは次の手順に進めません。

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

複数手順フォームのウィザードレイアウトでのステップ完了の式

図:複数手順のフォームのウィザードレイアウトでの 手順完了式

ウィザードレイアウトを使用したフォーム

図:ウィザード を使用したフォーム

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

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

最小化したパネルのタイトルにエンドユーザーが提供した値を表示するために、サマリ式を使用することができます。

アコーディオンレイアウトを使用したアダプティブフォームの繰り返し可能なパネル

図:アコーディオンレイアウトを使用して作成した 繰り返し可能なパネル

タブ付きレイアウト - タブを左側に表示

このレイアウトを使用すると、タブ付きナビゲーションのパネルにPanel adaptive formコンポーネントを配置できます。 タブはパネルコンテンツの左側に配置されます。

タブ付きレイアウトでタブ左側表示

図: タブをパネルの左側に表示

タブ付きレイアウト - タブを上に表示

このレイアウトを使用すると、タブ付きナビゲーションのパネルにPanel adaptive formコンポーネントを配置できます。 タブはパネルコンテンツの上に配置されます。

タブを上に表示したアダプティブフォームのタブ付きレイアウト

図: タブをパネルの上部に表示

モバイルレイアウト

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

このレイアウトでは、ナビゲーションバーとナビゲーションメニューを使用してナビゲーションをコントロールします。ナビゲーションバーには、フォーム内の​<​と​>​のアイコンが表示され、​と​前の​のナビゲーション手順が示されます。

モバイルレイアウトは/libs/fd/af/layouts/mobile/から入手できます。 アダプティブフォームでは、デフォルトで次のモバイルレイアウトを使用できます。

アダプティブフォームのモバイルレイアウトのリスト

図:アダプティブフォームのモバイルレイアウトの リスト

モバイルレイアウトを使用する場合、様々なフォームパネルにアクセスするためのフォームメニューは、aem6forms_form_menuアイコンをタップすると使用できます。

フォームのヘッダー部分にパネルタイトルを表示するレイアウト

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

フォームのヘッダー部分にパネルタイトルを表示するモバイルレイアウト

図:フォームのヘッダーにパネルタイトルを表示した モバイルレイアウト

フォームのヘッダー部分にパネルタイトルを表示しないレイアウト

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

フォームのヘッダー部分にパネルタイトルを表示しないモバイルレイアウト

図:フォームのヘッダーにパネルタイトルを表示しない モバイルレイアウト

ツールバーレイアウト

ツールバーレイアウトは、アダプティブフォームに追加するアクションボタンの位置と表示をコントロールします。 このレイアウトはフォームレベルまたは各パネルレベルで追加できます。

ボタンのレイアウトをコントロールするアダプティブフォームのツールバーレイアウトのリスト

図:アダプティブフォーム のツールバーレイアウトのリスト

ツールバーレイアウトは/libs/fd/af/layouts/toolbarから入手できます。 アダプティブフォームには、デフォルトで次のツールバーレイアウトが用意されています。

ツールバーのデフォルトレイアウト

アダプティブフォームでアクションボタンを追加したときに、デフォルトレイアウトとしてこのレイアウトが選択されます。このレイアウトを選択すると、デスクトップおよびモバイルの両デバイスで同一のレイアウトを表示します。

また、このレイアウトで設定されたアクションボタンを含むツールバーを複数追加することができます。アクションボタンはフォームのコントロールに関連付けられます。ツールバーはパネルの前または後に設定できます。

ツールバーのデフォルト表示

図:ツールバーの デフォルト表示

ツールバーをモバイルに最適化したレイアウト

このレイアウトを選択すると、デスクトップデバイスとモバイルデバイスで異なるレイアウトが表示されます。

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

モバイルレイアウトでは、アイコンを使用してアクションボタンを追加します。

ツールバーをモバイルに最適化したレイアウト

図:ツールバーの モバイル固定レイアウト

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free