自适应Forms的布局功能

Adobe Experience Manager 允许您创建易于使用的自适应Forms,以向最终用户提供动态体验。表单布局控制项目或组件在自适应表单中的显示方式。

布局类型

自适应表单提供了以下类型的布局:

Panel Layout 控制面板内的项目或组件在设备上的显示方式。

Mobile Layout 控制移动设备上表单的导航。如果设备宽度为768像素或更多,则该布局会被视为移动设备布局,并针对移动设备进行了优化。

Toolbar Layout 在表单的工具栏或面板工具栏中控制“操作”按钮的位置。

所有这些面板布局都在/libs/fd/af/layouts位置定义。

要更改自适应表单的布局,请使用Experience Manager中的创作模式。

Panel layout

表单作者可以将布局与自适应表单的每个面板(包括根面板)相关联。

/libs/fd/af/layouts/panel位置提供了面板布局。 点按面板,然后选择cmppr1以查看面板属性。

自适应表单的根面板的面板布局列表

Responsive - everything on one page without navigation

使用此面板布局可创建响应式布局,该布局可根据设备的屏幕大小进行调整,而无需进行专门的导航。

使用此布局,您可以在面板中依次放置多个​Panel Adaptive Form​组件。

使用响应式布局的表单,如小屏幕上所示

Wizard

使用此面板布局可在表单内提供引导式导航。 例如,当您想要在表单中捕获强制信息并逐步引导用户时,可使用此布局。

使用​Panel Adaptive Form​组件在面板中提供分步导航。 使用此布局时,用户只有在当前步骤完成后才会移至下一步

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

使用向导布局的表单

Accordion

使用此布局,您可以使用折叠面板样式导航将​Panel Adaptive Form​组件放置到面板中。 使用此布局,您还可以创建可重复面板。 可重复面板允许您根据需要动态添加或删除面板。 您可以定义面板重复的最小次数和最大次数。 此外,可以根据在面板项目中提供的信息动态地确定面板的标题。

摘要表达式可用于在最小化面板的标题中显示最终用户提供的值。

在自适应Forms中使用折叠面板布局的可重复面板

Tabbed layout - tabs appear on the left

使用此布局,可以将​Panel Adaptive Form​组件放置在带选项卡导航的面板中。 选项卡位于面板内容的左侧。

在选项卡式布局中,选项卡显示在左侧

面板左侧显示制表符

Tabbed layout - tabs appear on the top

使用此布局,可以将​Panel Adaptive Form​组件放置到带选项卡导航的面板中。 选项卡位于面板内容的顶部。

自适应Forms中的选项卡式布局,顶部带有选项卡

移动设备布局

移动设备布局允许在屏幕相对较小的移动设备上进行用户友好的导航。 移动设备布局使用选项卡式样式或向导样式进行表单导航。 应用移动布局可为整个表单提供单个布局。

此布局使用导航栏和导航菜单控制导航。 导航栏显示​​和​​图标,以指示表单中的​next​和​previous​导航步骤。

移动设备布局在/libs/fd/af/layouts/mobile/位置可用。 默认情况下,自适应Forms中提供了以下移动布局。

自适应Forms中的移动布局列表

选择​Add navigable items of responsive layout to mobile menu​选项可查看移动设备布局中面板可用的可导航选项。 仅当为面板选择​Responsive​布局时,才会显示可导航选项。

使用移动设备布局时,可通过点按aem6forms_form_menu图标,访问各种表单面板的表单菜单。

Layout with panel titles in the form header

如名称所示,此布局显示面板标题以及导航菜单和导航栏。 此布局还提供“下一步”和“上一步”图标以进行导航。

在表单标题中包含面板标题的移动布局

Layout without panel titles in the form header

此布局(如名称所示)仅显示导航菜单和没有面板标题的导航栏。 此布局还提供“下一步”和“上一步”图标以进行导航。

表单标题中不带面板标题的移动布局

在此页面上