アダプティブフォームのレイアウト機能 layout-capabilities-of-adaptive-forms

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

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

レイアウトのタイプ types-of-layouts

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

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

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

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

これらのすべてのパネルレイアウトは/libs/fd/af/layoutsで定義されます。

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

パネルレイアウト panel-layout

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

パネルレイアウトは/libs/fd/af/layouts/panelから利用できます。パネルを選択し、 を選択して、パネルのプロパティを表示します。

レスポンシブ - ナビゲーションなしですべて 1 ページに配置 responsive-everything-on-one-page-without-navigation-br

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

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

ウィザード wizard

このパネルレイアウトを使用すると、フォーム上にガイド付きのナビゲーションが提供できます。例えば、ユーザーを 1 手順ずつガイドしながらフォーム内の必須情報を取得したい場合、このレイアウトを使用します。

パネル内に 1 手順ずつのナビゲーションを用意するには、アダプティブフォームのパネル ​コンポーネントを使用します。このレイアウトを使用すると、現在の手順を完了しない限りユーザーは次の手順に進めません。

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

アコーディオン layout-for-accordion-design

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

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

タブ付きレイアウト - タブを左側に表示 tabbed-layout-tabs-appear-on-the-left

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

パネルの左側にタブ表示

タブ付きレイアウト - タブを上部に表示 tabbed-layout-tabs-appear-on-the-top

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

モバイルレイアウト mobile-layouts

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

このレイアウトでは、ナビゲーションバーとナビゲーションメニューを使用してナビゲーションをコントロールします。ナビゲーションバーで、進む ​と​ 戻る ​のナビゲーションステップはそれぞれ < と > のアイコンで示されます。

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

「レスポンシブレイアウトのナビゲート可能なアイテムをモバイルメニューに追加」オプションを選択して、モバイルレイアウトのパネルで使用できるナビゲート可能なオプションを表示します。ナビゲート可能なオプションは、パネルに対して「レスポンシブ」レイアウトを選択した場合にのみ表示されます。

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

フォームのヘッダーにパネルタイトルを表示するレイアウト layout-with-panel-titles-in-the-form-header

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

フォームのヘッダー部分にパネルタイトルを表示しないレイアウト layout-without-panel-titles-in-the-form-header

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

関連トピック see-also