使用布局模式调整自适应Forms的组件大小 use-layout-mode-to-resize-components
Adobe 建议使用现代、可扩展的数据捕获核心组件,以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进,确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。
通过自适应表单创作界面,您可以使用布局模式调整组件大小。 拖动列中的蓝色圆点以定义起点和终点来定位组件。 点按响应式网格中的组件后,会显示蓝点。 响应式网格由12个相等的列组成。 备用列中的白色和蓝色阴影将一列与另一列区分开来。
您可以使用布局模式为所有设备类型(如台式机、平板电脑、手机和其他小型设备)调整组件大小。 平板电脑会自动从台式机版本获取布局配置,较小的设备则从手机获取布局配置。 但是,您可以覆盖自动派生的配置以针对每种设备类型定义不同的配置。
访问布局模式 access-layout-mode
选择 布局 从自适应表单创作界面顶部显示的下拉列表中, 预览 选项。 该表单将以布局模式显示。
-
登录到 Adobe Experience Manager 创作实例并导航到 Adobe Experience Manager > Forms > Forms和文档.
-
创建新或打开现有 自适应表单.
-
选择 布局 从顶部显示的下拉列表中,选择 预览 选项。 该表单将以布局模式显示。
调整组件大小 resize-components
-
在布局模式下,选择要调整大小的组件。 蓝点显示在响应式网格的开头和结尾。
-
拖放蓝点以定义组件在响应式网格中的位置。
点按组件后显示的工具栏包含以下选项:
- 父级:选择组件的父组件。
- 还原断点布局:撤消所有调整大小的更改并将默认布局应用于组件。
- 浮动到新行:如果同一行中有多个组件,请将组件移至下一行。
您也可以使用 还原断点布局 ( )选项,以撤消所有调整大小的更改。
note note NOTE 无法使用布局模式调整表格列、工具栏、工具栏按钮和目标区域组件的大小。 使用样式模式调整这些组件的大小。
示例 example
目标: 要插入表组件和图像组件,并在自适应表单中使它们彼此平行放置。
-
使用以下方式插入表和图像组件 编辑 模式。 图像组件显示在表组件之后。
-
切换到 布局 模式并选择 表 组件。 用于调整组件大小的蓝点显示在列1和12。
-
将响应式网格第12列中的蓝色圆点拖到第6列。
-
同样,选择 图像 组件并将响应式网格第1列中的蓝色圆点拖到第7列。 表格和图像组件彼此平行显示。
您可以选择图像组件,然后选择 浮动到新行 工具栏中可用的选项以将图像组件移动到下一行。
调整面板大小 resize-panels-layout-mode
如果要调整整个面板而非单个组件的大小,请执行以下步骤:
-
在面板中选择要调整大小的任何组件,然后选择 ,并在下拉列表中选择第一个选项(如果面板是组件的直接父面板)。
蓝点显示在响应式网格的开头和结尾。
-
拖放蓝点以定义面板在响应式网格中的位置。
您可以重复步骤1和2,然后选择 将调整大小的面板移到下一行。
定义面板的多列布局
执行以下步骤可定义面板的列数:
-
在 编辑 模式,选择面板,选择 ,并选择 响应 — 页面上的所有内容,无需导航 选项来自 面板布局 下拉列表。
-
选择 以保存属性。
-
在 布局 模式,在面板中选择任意组件,然后选择 ,然后选择面板。
-
选择 并从下拉列表中选择列数。 列数可在1到12之间。 面板被分为多列布局。
为旧响应布局启用新响应网格 enableresponsivegrid
为您使用的创建的表单启用新响应式网格 Adobe Experience Manager Forms 6.4或更低版本可调整组件大小。
执行以下步骤以启用新响应式网格:
- 选择 布局 从顶部显示的下拉列表中,选择 预览 选项。 显示启用布局模式的确认。
- 选择 是 以启用 布局 表单模式。
使用新响应布局在自适应表单中嵌入旧片段 embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout
新的自适应表单响应布局允许您向表单添加具有旧响应布局的自适应表单片段。 但是,新布局会丢弃为片段中使用的组件定义的布局属性。 您可以切换到布局模式以定义片段中使用的组件的布局属性。
在旧自适应表单中嵌入具有新响应布局的片段 embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form
如果在具有旧响应布局的自适应表单中嵌入具有新响应布局的片段,则系统会提示您启用表单的布局模式并重新嵌入片段。
要启用布局模式,请选择 布局 从顶部显示的下拉列表中,选择 预览 选项并选择 是 以确认。 选择 编辑 模式以重新嵌入片段。
对具有旧响应布局的表单禁用布局模式 disable-layout-mode-for-forms-with-old-responsive-layout
您可以通过编辑表单中使用的模板的属性来禁用具有旧响应布局的表单的布局模式。
执行以下步骤可禁用布局模式:
-
选择 工具 > 常规 > 模板 然后打开表单中使用的模板,位置如下: 编辑 模式。
-
在左窗格中选择表单容器,然后选择 策略。
-
选择 布局设置 选项卡并选择 禁用布局模式.
-
选择 以保存模板属性。
另请参阅 see-also
- 创建 AEM 自适应表单
- 将 AEM 自适应表单添加到 AEM Sites 页面
- 将主题应用于 AEM 自适应表单
- 将组件添加到 AEM 自适应表单
- 在 AEM 自适应表单中使用 CAPTCHA
- 生成 AEM 自适应表单的 PDF 版本 (DoR)
- 翻译 AEM 自适应表单
- 为自适应表单启用 Adobe Analytics 以跟踪表单使用情况
- 将自适应表单连接到 Microsoft SharePoint
- 将自适应表单连接到 Microsoft Power Automate
- 将自适应表单连接到 Microsoft OneDrive
- 将自适应表单连接到 Microsoft Azure Blob 存储
- 将自适应表单连接到 Salesforce
- 在 AEM 自适应表单中使用 Adobe Sign
- 为自适应表单添加新区域设置
- 将自适应表单数据发送到数据库
- 将自适应表单数据发送到 REST 端点
- 将自适应表单数据发送到 AEM 工作流
- 使用 Forms Portal 在 AEM 网站上列出 AEM 自适应表单