レイアウトモードを使用したコンポーネントのサイズ変更

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

アダプティブフォームのオーサリングインターフェイスを使用すると、レイアウトモードを使用してコンポーネントのサイズを変更できます。列内の青い点をドラッグ＆ドロップして、コンポーネントを配置する開始点と終了点を定義します。レスポンシブグリッド内のコンポーネントをタップすると、青い点が表示されます。レスポンシブグリッドは、12 個の等しい列で構成されています。代替列の白と青色の影は、1 つの列と他の列を区別します。

レイアウトモードを使用すると、デスクトップ、タブレット、スマートフォン、その他の小型デバイスなど、あらゆる種類のデバイスのコンポーネントサイズを変更できます。タブレットはデスクトップ版からレイアウト設定を自動的に引き継ぎ、小型デバイスはスマートフォンからレイアウト設定を引き継ぎます。自動的に生成された設定を上書きして、デバイスタイプごとに異なる設定を定義することもできます。

レイアウトモードへのアクセス

「プレビュー」オプションの横のアダプティブフォームのオーサリングインターフェイス上部に表示されるドロップダウンリストから、「レイアウト」を選択します。フォームがレイアウトモードで表示されます。

1. AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメント​に移動します。

2. の作成 アダプティブフォーム または既存のものを開きます。

3. 「プレビュー」オプションの横の上部に表示されるドロップダウンリストから「レイアウト」を選択します。フォームがレイアウトモードで表示されます。

   

コンポーネントのサイズ変更

1. レイアウトモードで、サイズを変更するコンポーネントを選択します。 レスポンシブグリッドの開始と終了に青い点が表示されます。

2. レスポンシブグリッド内のコンポーネントの位置を定義する青い点をドラッグ＆ドロップします。

   

   コンポーネントをタップした後に表示されるツールバーは、以下のオプションで構成されます。

   • 親： コンポーネントの親を選択します。
   • ブレークポイントのレイアウトを元に戻す：すべてのサイズ変更を元に戻し、コンポーネントにデフォルトのレイアウトを適用します。
   • 新しい行にフローティングする：同じ行内に複数のコンポーネントがある場合は、コンポーネントを次の行に移動します。

   また、パネルレベルで「ブレークポイントのレイアウトを元に戻す（）」オプションを使用して、すべてのサイズ変更を元に戻すこともできます。

   メモ

   レイアウトモードを使用して、テーブルの列、ツールバー、ツールバーボタン、ターゲット領域のコンポーネントのサイズを変更することはできません。スタイルモードを使用して、これらのコンポーネントのサイズを変更します。

例

目的：​テーブルコンポーネントと画像コンポーネントを挿入し、アダプティブフォームでそれらを互いに平行に配置します。

1. アダプティブフォームで編集モードを使用して、テーブルコンポーネントと画像コンポーネントを挿入します。画像コンポーネントは、テーブルコンポーネントの後に表示されます。

2. レイアウトモードに切り替えて、テーブルコンポーネントを選択します。 コンポーネントのサイズを変更する青い点が列 1 と列 12 に表示されます。

3. レスポンシブグリッドの列 12 の青い点を列 6 にドラッグ＆ドロップします。

   

4. 同様に、画像コンポーネントを選択し、レスポンシブグリッドの列 1 の青い点を列 7 にドラッグ＆ドロップします。テーブルと画像コンポーネントは互いに平行に表示されます。

   

   画像コンポーネントを選択し、 新規行にフロート オプションを使用して、画像コンポーネントを次の行に移動できます。

パネルのサイズ変更

個々のコンポーネントではなくパネル全体のサイズを変更する場合は、以下の手順を実行します。

1. パネル内のサイズを変更するコンポーネントを選択し、「 」を選択します。 パネルがコンポーネントの直近の親である場合は、をクリックして、ドロップダウンリストの最初のオプションを選択します。

   レスポンシブグリッドの開始と終了に青い点が表示されます。

2. レスポンシブグリッド内のパネルの位置を定義する青い点をドラッグ＆ドロップします。手順 1 と 2 を繰り返し、「」を選択して、サイズ変更したパネルを次の行に移動できます。

パネルの複数列レイアウトの定義

以下の手順を実行して、パネルの列数を定義します。

1. In 編集 モード、パネルを選択、 をクリックし、次を選択します。 レスポンシブ — ナビゲーションなしでページ上のすべて オプションを パネルレイアウト 」ドロップダウンリストから選択できます。

2. 選択 をクリックしてプロパティを保存します。

3. Adobe Analytics の レイアウト モードで、パネル内の任意のコンポーネントを選択し、 をクリックし、パネルを選択します。

4. 選択 をクリックし、ドロップダウンリストから列数を選択します。 列数の範囲は 1 ～ 12 です。パネルが複数列のレイアウトに分割されます。

古いレスポンシブレイアウトに対する新しいレスポンシブグリッドの有効化

AEM Forms 6.4 以前のバージョンを使用して作成するフォームに対して、新しいレスポンシブグリッドを有効にし、コンポーネントのサイズを変更します。

以下の手順を実行して、新しいレスポンシブグリッドを有効にします。

1. 「プレビュー」オプションの横の上部に表示されるドロップダウンリストから「レイアウト」を選択します。レイアウトモードを有効にするための確認メッセージが表示されます。
2. 選択 はい 有効にする レイアウト フォームのモード。

新しいレスポンシブレイアウトを使用した、古いフラグメントのアダプティブフォームへの埋め込み

アダプティブフォーム用の新しいレスポンシブレイアウトを使用すると、古いレスポンシブレイアウトを持つアダプティブフォームフラグメントをフォームに追加できます。 ただし、新しいレイアウトでは、フラグメントで使用するコンポーネントに対して既に定義されているレイアウトプロパティが破棄されます。レイアウトモードに切り替えて、フラグメントで使用するコンポーネントのレイアウトプロパティを定義できます。

新しいレスポンシブレイアウトを使用した、フラグメントの古いアダプティブフォームへの埋め込み

古いレスポンシブレイアウトを含むアダプティブフォームで、新しいレスポンシブレイアウトを使用してフラグメントを埋め込むと、そのフォームのレイアウトモードを有効にし、フラグメントを再埋め込みするよう求められます。

レイアウトモードを有効にするには、 レイアウト 」を選択します。 プレビュー オプションと選択 はい をクリックして確定します。 編集​モードを選択して、フラグメントを再埋め込みします。

古いレスポンシブレイアウトを含むフォームに対するレイアウトモードの無効化

古いレスポンシブレイアウトを含むフォームのレイアウトモードを無効にするには、フォームで使用するテンプレートのプロパティを編集します。

レイアウトモードを無効にするには、以下の手順を実行します。

1. ツール／一般／テンプレート​を選択し、フォームで使用するテンプレートを​編集​モードで開きます。

2. 左側のウィンドウでドキュメントコンテナを選択し、「 」を選択します。 ポリシー。

   

3. を選択します。 レイアウト設定 「 」タブで「 」を選択します。 レイアウトモードを無効にする.

4. 選択 をクリックして、テンプレートのプロパティを保存します。