レイアウトモードを使用したアダプティブフォームのコンポーネントのサイズ変更 use-layout-mode-to-resize-components

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

新しいアダプティブフォームを作成するか、既存のアダプティブフォームを開きます。

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

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

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

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

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

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

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

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

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

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

画像コンポーネントを選択し、ツールバーにある「新しい行にフロート」オプションを選択して、画像コンポーネントを次の行に移動できます。

パネル内でサイズを変更するコンポーネントのいずれかを選択し、「 」を選択して、ドロップダウンリストの最初のオプションを選択します（パネルがコンポーネントの直接の親である場合）。

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

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

編集 ​モードで、パネル、「 」の順にクリックします。次に、パネルレイアウト ​ドロップダウンリストから「レスポンシブ - ナビゲーションなしですべてを 1 ページに」をクリックします。

「 」を選択して、プロパティを保存します。

レイアウト ​モードで、パネル内の任意のコンポーネントを選択し、「 」を選択して、パネルをクリックします。

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

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

左側のパネルでフォームコンテナを選択し、「ポリシー」をクリックします。

「レイアウト設定」タブを選択し、「レイアウトモードを無効にする」をクリックします。

「 」を選択して、テンプレートプロパティを保存します。