Adobe建议使用现代化的、可扩展的数据捕获 核心组件 对象 创建新的自适应Forms 或 将自适应Forms添加到AEM Sites页面. 这些组件在创建自适应Forms方面实现了重大进步,确保了令人印象深刻的用户体验。 本文介绍了使用基础组件创作自适应Forms的旧方法。
AEM Forms允许表单开发人员将自适应表单和交互式通信无缝嵌入到AEM Sites单页应用程序(SPA)中。 嵌入式自适应表单和交互式通信功能完善,用户无需离开页面即可填写和提交表单。 它有助于用户停留在网页上其他元素的上下文中,并同时与自适应表单或交互式通信交互。
在AEM Sites单页应用程序中,您可以使用添加自适应表单或交互式通信 AEM Forms SPA Container组件 . 它是AEM Sites SPA的AEM Forms组件,您可以将其添加到站点页面。
有关在非SPA AEM Sites中嵌入自适应表单的信息,请参阅 在AEM Sites页面中嵌入自适应表单或交互式通信.
要使用AEM Forms SPA Container组件在AEM Sites SPA中嵌入自适应表单或交互式通信,请确保您已安装:
执行以下步骤,安装AEM Forms SPA Container组件:
安装适用于SPA的AEM Forms组件。 有关安装该组件的说明,请参见 README.md 文件。
该组件包括 示例React组件 ,可用于将SPA容器组件与基于React的SPA项目集成。
使用SPA中提供的说明将SPA容器组件与基于React的项目集成 README.md 文件。
安装AEM Forms SPA容器组件并将该组件与基于React的SPA项目集成后,您可以在AEM Sites页面中嵌入自适应表单和交互式通信。
要使用AEM Forms for SPA容器组件嵌入自适应表单或交互式通信,请执行以下操作:
在编辑模式下打开AEM sites页面,您要在其中嵌入自适应表单或交互式通信。
插入 SPA的AEM表单 组件,可使用以下任一选项:
点按“站点”页面上的布局容器,然后点按 + 并选择 SPA的AEM表单 组件。
在组件浏览器面板中,拖放 SPA的AEM表单 组件。
在Assets浏览器中搜索自适应表单或交互式通信,并将其拖放到Sites页面上。 它将表单嵌入到AEM Forms for SPA组件容器中。
不支持在页面上渲染多个AEM Forms SPA Container组件。 您可以在一个页面上有多个AEM Forms SPA Container,但一次只能呈现一个组件。 确保页面上只显示一个组件,以避免出现差异。
点按站点页面中嵌入的AEM Forms SPA容器组件,然后点按 在操作栏上。 此 编辑AEM Forms SPA容器 对话框打开。
在 编辑AEM Forms容器 对话框,请指定以下内容:
资源类型: 选择要嵌入的资源类型。 选项包括 自适应表单 和 交互式通信
资源路径:浏览并选择要嵌入的自适应表单或交互式通信。 如果使用Assets浏览器插入自适应表单或交互式通信,则会自动填充字段。
渠道 (仅限交互式通信):选择要嵌入的交互式渠道类型。 选项包括 Web渠道 和 打印渠道.
主题:选择为自适应表单或交互式通信组件定义样式的主题。 样式设置包括外观属性,如字体样式、背景颜色、尺寸和对齐方式。
点按 以保存设置。 自适应表单或交互式通信现已嵌入到页面中。
请考虑以下在AEM Sites页面上发布嵌入资产(自适应表单或交互式通信)的情景:
AEM sites页在AEM Forms容器中维护对自适应表单和交互式通信的引用。 因此,在原始自适应表单和交互式通信中配置的所有配置和属性(如主题、样式和提交操作)都将保留在嵌入式自适应表单和交互式通信中。
要修改嵌入式自适应表单和交互式通信的任何配置或属性,请执行下列操作之一。
在AEM Sites页面中嵌入自适应表单时,请记住以下几点: