Use Layout mode to resize components use-layout-mode-to-resize-components
ÃÛ¶¹ÊÓƵ recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.
The adaptive form authoring interface enables you to resize components using the Layout mode. Drag-and-drop blue dots within columns to define the start and end points to position components. The blue dots display after tapping the component within the responsive grid. The responsive grid consists of 12 equal columns. The white and blue color shading in alternate columns differentiates one column from the other.
You can use the Layout mode to resize components for all device types such as desktop, tablet, phone, and other smaller devices. The tablet automatically derives the layout configuration from the desktop version and the smaller devices derive layout configuration from phone. However, you can override the automatically derived configurations to define a different configuration for each device type.
Access Layout mode access-layout-mode
Select Layout from the drop-down list that appears at the top of the adaptive form authoring interface next to the Preview option. The form displays in the Layout mode.
-
Log in to the AEM author instance and navigate to ÃÛ¶¹ÊÓƵ Experience Manager > Forms > Forms & Documents.
-
Create an adaptive form or open an existing one.
-
Select Layout from the drop-down list that appears at the top next to the Preview option. The form displays in the Layout mode.
Resize components resize-components
-
In Layout mode, select the component to resize. The blue dots display at the start and end of the responsive grid.
-
Drag-and drop the blue dots to define the position of the component in the responsive grid.
The toolbar that displays after tapping components consists of the following options:
- Parent: Select the parent of a component.
- Revert breakpoint layout: Undo all resizing changes and apply default layout to the component.
- Float to new line: Shift the component to the next line if there are multiple components within the same line.
You can also use the Revert breakpoint layout (
note note NOTE You cannot resize table column, toolbar, toolbar button, and target area components using the Layout mode. Use Style mode to resize these components.
Example example
Objective: You want to insert a table component and an Image component and position them parallel to each other in an adaptive form.
-
Insert the table and image components using Edit mode in the adaptive form. The image component display after the table component.
-
Switch to Layout mode and select the Table component. The blue dots to resize the component display at column 1 and 12.
-
Drag-and-drop the blue dot at column 12 to column 6 of the responsive grid.
-
Similarly, select the Image component and drag-and-drop the blue dot at column 1 to column 7 of the responsive grid. The table and image components display parallel to each other.
You can select the Image component and select the Float to new line option available in the toolbar to shift the Image component to the next line.
Resize panels resize-panels-layout-mode
Execute the following steps if you want to resize the entire panel instead of individual components:
-
Select any of the components in the panel that you want to resize, select
The blue dots display at the start and end of the responsive grid.
-
Drag-and drop the blue dots to define the position of the panel in the responsive grid.
You can repeat steps 1 and 2 and select
Define multi-column layout for a panel
Execute the following steps to define the number of columns for a panel:
-
In Edit mode, select the panel, select
-
Select
-
In the Layout mode, select any of the components in the panel, select
-
Select
Enable the new responsive grid for old responsive layouts enableresponsivegrid
Enable the new responsive grid for forms that you create using AEM Forms 6.4 or lower version to resize components.
Perform the following steps to enable the new responsive grid:
- Select Layout from the drop-down list that appears at the top next to the Preview option. A confirmation to enable the Layout mode displays.
- Select Yes to enable the Layout mode for the form.
Embed an old fragment in an adaptive form with new responsive layout embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout
The new responsive layout for adaptive form lets you add an adaptive form fragment with the old responsive layout to the form. However, the new layout discards the layout properties already defined for components used in the fragment. You can switch to the Layout mode to define the layout properties for components used in the fragment.
Embed a fragment with new responsive layout in an old adaptive form embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form
If you embed a fragment with the new responsive layout in an adaptive form with an old responsive layout, the system prompts you to enable the Layout mode for the form and re-embed the fragment.
To enable the Layout mode, select Layout from the drop-down list that appears at the top next to the Preview option and select Yes to confirm. Select Edit mode to re-embed the fragment.
Disable Layout mode for forms with old responsive layout disable-layout-mode-for-forms-with-old-responsive-layout
You can disable the Layout mode for forms with old responsive layout by editing properties for the template used in the form.
Perform the following steps to disable the Layout mode:
-
Select Tools > General > Templates and open the template used in the form in Edit mode.
-
Select the Document Container in the left pane and select Policy.
-
Select the Layout Settings tab and select Disable Layout Mode.
-
Select
