基础组件

注意

此部分介绍了基础组件,这些组件在 AEM 的多个版本中提供,并可在标准 AEM 安装中直接使用。但是,AEM 6.4中已弃用许多基础组件。

Adobe建议利用更现代、可扩展的核心组件。 这些是We.Retail示例内容的一部分,也可以是单独安装,并由管理员用于开发

基础组件专门为在创作标准网页内容时使用而设计。这些组件构成了适用于标准 AEM 安装的现成组件的子集。

有些组件可通过组件浏览器立即使用,而有些组件则可通过使用设计模式(如果页面基于静态模板)或通过编辑模板(如果页面基于可编辑的模板)来使用。

基础组件的使用受支持,但已被核心组件取代,这些组件提供了更大的可扩展性和灵活性。

注意

此部分仅讨论在标准 AEM 安装中现成可用的组件。

根据您的实例,您可能已经拥有明确按照您的要求开发的自定义组件。这些组件甚至会与此处讨论的某些组件同名。

编辑页面时,可以在页面编辑器侧面板的​组件​选项卡中使用组件。

您可以选择一个组件并将其拖动到页面上的所需位置。然后,可以使用以下方法编辑该组件:

组件会根据称为组件组的各种类别进行分类,具体包括:

  • 常规:包括基本组件,例如文本、图像、表、图表等。
  • :包括组织内容布局所需的组件。
  • 表单:包括创建表单所需的所有组件。

常规

常规组件是指用于创建内容的基本组件。

帐户项

注意

此基础组件已被弃用。Adobe 建议改用核心组件

您可以为链接定义标题和描述。

chlimage_1-111

自适应图像

注意

此基础组件已被弃用。Adobe建议改用核心组件图像组件

“自适应图像”基础组件生成的图像的大小会被调整至适应打开网页的窗口。要使用该组件,可以从文件系统或 DAM 提供图像资源。打开网页后,Web 浏览器将下载该图像的一个副本,且大小已调整至适合当前窗口。

以下特性可决定窗口的大小:

  • 设备屏幕:移动设备在显示网页时通常会延伸至整个屏幕。
  • Web 浏览器窗口大小:笔记本电脑和台式机的用户可以调整 Web 浏览器窗口的大小。

例如,当在手机上打开网页时,该组件会生成一个小图像,而在平板电脑上打开时则会生成一个中等大小的图像。在笔记本电脑上,当页面在最大化的 Web 浏览器中打开时,组件将创建并提供一个大图像。当 Web 浏览器的大小调整至适应部分屏幕时,该组件会适应性地提供较小图像并刷新视图。

支持的图像格式

您可以将包含以下文件扩展名的图像文件用于自适应图像组件:

  • .jpg
  • .jpeg
  • .png
  • .gif **
注意

**AEM不支持.gif动画文件进行自适应呈现。

图像大小和质量

下表列出了针对给定视图端口宽度生成的图像的宽度:系统将计算生成的图像的高度,保持宽高比不变,且图像边缘内部没有空白。可使用裁剪避免空白的出现。

当图像为 JPEG 图像时,视图端口大小也可能影响 JPEG 质量。JPEG 有如下几种质量:

  • 低 (0.42)
  • 中 (0.82)
  • 高 (1.00)
视图端口宽度范围(像素) 图像宽度(像素) JPEG 质量 目标设备类型
宽度 <= 319 320
宽度 = 320 320 移动手机(纵向)
320 < 宽度 < 481 480 移动手机(横向)
480 < 宽度 < 769 476 平板电脑(纵向)
768 < 宽度 < 1025 620 平板电脑(横向)
宽度 <= 1025 全屏幕(原始大小) 桌面设备

属性

该对话框允许您为自适应图像组件的实例编辑属性,其中很多属性都与其基于的图像组件的属性相同。这些属性位于两个选项卡中:

  • 图像

    • 图像

      从内容查找器中拖动图像,或单击打开浏览窗口并在其中加载图像。图像加载后,您可以裁剪、旋转或删除该图像。要放大和缩小图像,请使用图像下方的滚动条(在“确定”和“取消”按钮上方)

    • 裁剪

      裁剪图像。拖动边框可裁剪图像。

    • 旋转

      连续单击“旋转”,直到图像旋转至所需外观为止。

    • 清除​删除当前图像。

  • 高级

    • 标题

      自适应图像组件不使用此属性。

    • 替换文本

      要用于该图像的替代文本。

    • 链接到

      自适应图像组件不使用此属性。

    • 描述

      自适应图像组件不使用此属性。

扩展自适应图像组件

有关自定义自适应图像组件的信息,请参阅了解自适应图像组件

传送组件允许您通过以下方式显示与单个页面关联的图像:

  • 每次显示一幅图像
  • 短时间显示
  • 按指定的顺序显示
  • 在指定的延迟时间后显示

可单击控件还允许用户按需实时地循环查看显示的页面。单击当前可见的页面图像即可跳转到该页面。换言之,“传送”可充当导航控件。

属性

这些属性位于两个选项卡中:

  • 轮播

    在此,您可以指定轮播的操作方式:

    • 播放速度

      显示下一张幻灯片之前的时间(以毫秒为单位)。

    • 过渡时间

      两张幻灯片之间过渡的时间(以毫秒为单位)。

    • 控件样式

      下拉菜单提供各种选项;例如,“上一个”/“下一个”按钮、“右上”开关。

  • 列表

    在此,您可以指定页面在轮播中的包含方式:

    • 生成列表对象

      生成页面列表的方法有多种:“子页面”、“固定列表”、“搜索”或“高级搜索”(全部如下所述)。

      请注意,无论选择哪种方式,包含在列表中的页面均应具有与此页面关联的图像,传送中将显示该图像。如果给定页面的“页面属性”下没有该页面的图像,则应在开始操作之前将图像与页面相关联,否则传送将显示空白(或大部分为空白)的页面。请参阅编辑页面属性

      根据您选择的项目,将显示一个新面板:

      • 子页面选项

        • 父页面
          手动或使用选择器指定一个路径。如果将此选项留空,则使用当前页面作为父页面。
      • 固定列表选项


        • 页面选择页面列表。使用
          + 添加更多条目,并使用向上/向下按钮调整顺序。
      • 搜索选项

        • 开始

          手动或使用选择器输入起始路径。

        • 搜索查询

          您可以输入纯文本搜索查询。

      • 高级搜索选项

        • QueryBuilder 谓词记号

          您可以使用QueryBuilder谓词记号输入搜索查询。 例如,您可以输入“fulltext=Marketing”,以使内容带有“Marketing”的所有页面都显示在传送中。

          有关查询表达式的完整说明和更多示例,请参阅 QueryBuilder API

    • 排序依据

      从下拉菜单中选择jcr:titlejcr:createdcq:lastModifiedcq:template

    • 限制

      您希望在轮播中使用的最大项目数;这是可选的。

注意

您可以为 Adobe Experience Manager 创建一个自定义传送组件,使其显示位于 AEM DAM 中的数字资产。有关信息,请参阅为 Adobe Experience Manager 创建自定义传送组件

图表

图表组件允许您添加条形图、折线图或饼图。AEM 可根据您提供的数据创建图表。您可通过在“数据”选项卡中直接键入或通过复制并粘贴电子表格来提供数据。

  • 数据

    • 图表数据

      使用 CSV 格式输入您的图表数据;逗号分隔值格式使用逗号(“,”)作为字段分隔符。

  • 高级

    • 图表类型

      从饼图、折线图和条形图中进行选择。

    • 替换文本

      代替图表显示的替换文本。

    • 宽度

      图表的宽度(以像素为单位)。

    • 高度

      图表的高度(以像素为单位)。

下面显示了一个图表数据示例,其后是生成的条形图:

chlimage_1-192 dc_chart_use

注意

您可以创建一个自定义 AEM 图表控件来显示位于 AEM JCR 中的数据。有关信息,请参阅在图表中显示 Adobe Experience Manager 数据

内容片段

内容片段将作为独立于页面的资产来创建和管理。您随后可以在创作内容页面时使用这些片段及其变量。

设计导入程序

此组件允许您上传含有设计包的 zip 文件。

下载

下载组件可在所选网页上创建下载指定文件的链接。您可以从内容查找器中拖动资产或上传文件。

  • 下载

    • 描述

      随下载链接显示的简短说明。

    • 文件

      结果网页上可供下载的文件。从内容查找器中拖动资产或单击区域以上传可供下载的文件。

以下示例显示 Geometrixx 中的下载组件:

dc_download_use

外部

外部应用程序集成组件(外部)允许您使用 iFrame 将外部应用程序嵌入到您的 AEM 页面。

  • 外部

    • 目标应用程序

      指定要集成的 Web 应用程序的 URL,例如:

      https://en.wikipedia.org/wiki/Main_Page
      
    • 传递参数

      根据需要选中要传递到应用程序的参数对应的框。

    • 宽度和高度

      定义 iFrame 的大小

外部应用程序会集成到 AEM 页面的段落系统;例如,在使用目标应用程序 https://en.wikipedia.org/wiki/Main_Page 时:

chlimage_1-193

注意

根据您的用例,还有其他选项可用于外部应用程序的集成,例如,Portlet 的集成

Flash

注意

此基础组件已被弃用。Adobe 建议改用核心组件

注意

如果没有进行广泛的项目级别自定义,此组件将不再能够开箱即用运行。

Flash 组件允许您加载 Flash 影片。您可以从内容查找器中将 Flash 资产拖动到组件上,也可以使用对话框:

  • Flash

    • Flash 影片

      Flash 影片文件。从内容查找器中拖动资产,或者单击以打开浏览窗口。

    • 大小

      支持影片的显示区域的尺寸(以像素为单位)。

  • 备用图像

    要显示的备用图像

  • 高级

    • 上下文菜单

      指示是否应显示或隐藏上下文菜单。

    • 窗口模式

      窗口的显示方式,例如不透明、透明或显示为独立(实底)窗口。

    • 背景颜色

      从提供的颜色图表中选择的背景颜色。

    • 最低版本

      运行影片所需的 Adobe Flash Player 的最低版本。默认数量为 9.0.0。

    • 属性

      任何其他所需的属性。

图像

图像组件可根据指定的参数显示图像和相应文本。

您可以上传图像,然后编辑和处理该图像(例如裁剪、旋转、添加链接/标题/文本)。

您可以从资产浏览器中将图像直接拖放到组件上或其“配置”对话框中。此外,也可以从“配置”对话框中上传图像;此对话框还控制着图像的所有定义和操作:

chlimage_1-194

上传图像之后(不是之前),您可以根据需要使用就地编辑功能裁剪/旋转图像:

注意

就地编辑器在编辑时使用图像的原始大小和宽高比。您还可以指定高度和宽度属性。在保存编辑更改时,将应用属性中定义的任何大小和宽高比限制。

根据您的实例,页面设计还可能会强制应用最小和最大限制;这些限制在项目实施过程中开发。

还有其他几个选项在全屏编辑模式下可用;例如,地图和缩放:

注意

无法使用 Internet Explorer 监控上传过程。

Internet Explorer 用户需要上传图像,单击​确定,然后重新打开图像,以预览方式查看已上传的文件,并进行修改(即裁剪)。

有关AEM使用的HTML5功能的更多信息,请参阅支持的平台部分。

加载图像后,您可以配置下列各项:

  • 地图

    要映射图像,请选择“映射”。 您可以指定创建图像映射的方式(矩形、多边形等)以及该区域应指向的位置。

  • 裁剪

    选择“裁剪”以裁剪图像。 可使用鼠标裁剪图像。

  • 旋转

    要旋转图像,请选择“旋转”。 连续使用“旋转”,直到图像旋转成您需要的外观。

  • 清除

    删除当前图像。

  • 标题

    图像的标题。

  • 替换文本

    用于创建辅助内容时使用的替换文本。

  • 链接到

    创建指向资产或您网站中其他页面的链接。

  • 描述

    对图像的说明。

  • 大小

    设置图像的高度和宽度。

注意

有些选项仅在全屏编辑器中可用。

最终图像(带有​标题​和​说明)可能如下所示:

chlimage_1-195

布局容器

此组件提供了一种网格段落系统,让您可以在响应式网格内添加和放置组件。这样,您就可以根据目标设备(包括一系列手机、平板电脑和台式机)的宽度来定义不同的内容布局。

chlimage_1-196

注意

此组件已通过 HTML 模板语言 (HTL) 进行了实施。

列表

列表组件允许您配置用于显示列表的搜索条件:

  • 列表

    • 生成列表对象

      您可在此指定列表将检索其内容的位置。有下列几种方法:

    • 根据您选择的项目,将显示一个新面板:

      • 子页面选项

        • ​的子项(父页面)

          手动或使用选择器指定路径。 如果将此选项留空,则使用当前页面作为父页面。

      • 固定列表选项

        • 页面

          选择页面列表。 使用 + 添加更多条目,然后使用向上/向下按钮调整顺序。

      • 搜索选项

        • 开始

          手动或使用选择器输入起始路径。

        • 搜索查询

          您可以输入纯文本搜索查询。

      • 高级搜索选项

        • QueryBuilder 谓词记号

          您可以使用QueryBuilder谓词记号输入搜索查询。 例如,您可以输入“fulltext=Marketing”,以使内容带有“Marketing”的所有页面都显示在传送中。

          有关查询表达式的完整说明和更多示例,请参阅 QueryBuilder API

      • 标记

        指定​父页面标记/关键字​和您所需的匹配条件。

    • 显示方式

      希望列出项目的方式;包括链接、Teaser 和新闻。

    • 排序依据

      是否要对列表进行排序,如需要,可将该条件用于排序。您可以输入条件或从提供的下拉列表中选择一个。

    • 限制

      指定您希望在列表中显示的最大项目数。

    • 启用信息源

      指示是否应为列表激活 RSS 源。

    • 每页显示条目数

      您可立即在此指定要显示的列表项目数。所含项目多于指定数量的列表将使用分页以多个部分显示列表。

以下示例以显示子页面列表的方式展示了​列表​组件(设计由站点设计的自定义 CSS 定义来控制)。

dc_list_use

登录

注意

此基础组件已被弃用。Adobe 建议改用核心组件

注意

如果没有进行广泛的项目级别自定义,此组件将不再能够开箱即用运行。

此组件提供了“用户名”和“密码”字段。

chlimage_1-197

您可以配置:

  • 登录

    • 区域标签

      输入字段的导入文本。

    • 用户名标签

      用于标记用户名字段的文本。

    • 密码标签

      用于标记密码字段的文本。

    • “登录”按钮标签

      登录按钮的文本。

    • 重定向到

      您可以在网站上指定用户登录后应打开的页面。

  • 已登录

    • “继续”按钮标签

      用于指示用户已登录的文本。

订单状态

注意

如果没有进行广泛的项目级别自定义,此组件将不再能够开箱即用运行。

  • 标题

    • 标题

      指定要显示的标题文本。

    • 链接

      指定应显示订单状态的页面(产品)。

    • 类型/大小

      从提供的选择中进行选择。

chlimage_1-198

针对开发人员的 Adobe AIR API 参考

使用​引用​组件可以从 AEM 网站的其他页面引用文本(在当前实例中)。引用的段落内容会像在当前页面上一样进行显示。当源段落发生更改时,此内容也将随之更新(可能需要刷新页面)。

  • 段落引用

    • 针对开发人员的 Adobe AIR API 参考

      指定要引用的页面和段落的路径(包括内容)。

要指定段落的路径,您需要在(页面的)路径后面附加以下后缀:

.../jcr:content/par/<paragraph-ID>

例如:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

除了引用特定段落以外,还可以通过修改路径来指定整个段落系统。要指定整个段落系统,您需要在路径后面附加以下后缀:

/jcr:content/par

例如:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

完成配置后,该内容将像在源页面上一样进行显示。只有在打开组件进行编辑时,才能看出它是引用内容:

chlimage_1-199

搜索

注意

此基础组件已被弃用。Adobe 建议改用快速搜索核心组件

搜索组件会向您的页面添加搜索功能。

您可以配置:

  • 搜索

    • 节点类型

      如果搜索限制为特定的节点类型,请在此处列出它们;例如,cq:Page

    • 搜索路径

      指定要搜索的分支的根页面。

    • 搜索按钮文本

      名称显示在实际的搜索按钮上。

    • 统计数据文本

      文本显示在搜索结果上方。

    • 无结果文本

      如果没有任何结果,将显示在此输入的文本。

    • 拼写检查文本

      如果某人输入类似术语,则此文本将显示在该术语前面。

      例如,如果您键入 geometrixxe,则系统会显示“是否要:geometrixx”。

    • 类似的页面文本

      类似页面的结果旁显示的文本。单击此链接可查看具有类似内容的页面。

    • 相关的搜索文本

      相关术语和主题的搜索旁显示的文本。

    • 搜索趋势文本

      用户输入的搜索词上方的标题。

    • 结果页面标签

      在此列表底部显示的文本,带有指向其他结果页的链接。

    • 上一标签

      指向先前的搜索页的链接上显示的名称。

    • 下一标签

      指向随后的搜索页的链接上显示的名称。

以下示例显示了从标准安装的根目录中搜索单词 geometrixx 后的“搜索”组件。该示例还说明了结果分页情况:

dc_search_use

以下示例演示了一个拼写错误且无效的搜索词:

dc_search_usenotfound

Sitemap

注意

此基础组件已被弃用。Adobe建议改用导航语言导航痕迹导航核心组件

自动 Sitemap 列表,该列表(具有默认设置)列出了当前网站中的所有页面(作为活动链接)。例如,提取结果如下所示:

dc_sitemap_use

如果需要,您可以配置:

  • Sitemap

    • 根路径

      列表从中开始的路径。

Slideshow

注意

此基础组件已被弃用。Adobe 建议改用轮播核心组件

注意

如果没有进行广泛的项目级别自定义,此组件将不再能够开箱即用运行。

此组件允许您加载一系列将在您的页面上显示为幻灯片放映的图像。您可以添加或删除图像以及为每个图像指定标题。在“高级”下,您还可以指定显示区域的大小。

您可以配置:

  • 幻灯片

    • 新幻灯片

      您可以使用​Add(和​Remove)按钮指定幻灯片选项。

    • 标题

      根据需要指定标题。 此标题会覆盖在相应的幻灯片上。

  • 高级

    • 大小

      以像素为单位指定宽度和高度。

幻灯片放映组件随后会在较短的时间内按顺序重复显示每个图像,然后淡入到下一张幻灯片:

dc_slideshow_use

注意

此基础组件已被弃用。Adobe 建议改用文本核心组件

注意

与​**​**​文本🔗组件一样,表组件也基于富文本编辑器

尽管使用​文本​组件也可以构建表,但是对于表的构建,建议使用​​组件来完成。

​组件经过预配置,让您可以构建和填写表,以及设置表的格式。使用对话框,您可以配置表,并通过以下任一方式创建内容:

  • 从头开始创建
  • 从外部编辑器(例如 Excel、OpenOffice、Notepad 等)复制并粘贴电子表格或表。

您可以使用内嵌编辑器对内容进行基本更改:

dc_table

在全屏模式下,您可以配置表格布局:

chlimage_1-200

以下屏幕快照显示了表组件的示例;其设计取决于特定于站点的 CSS:

dc_table_use

标记云

标记云以图表形式呈现应用于网站内容的所选标记:

dc_tagclouduse

配置“标记云”组件时,您可以指定:

  • 要显示的标记

    要显示的标记从中收集的位置。从含有所有子项或所有标记的页面进行选择。

  • 页面

    选择要引用的页面。

  • 标记上无链接

    显示的标记是否应作为链接。

有关应用标记的更多信息,请访问使用标记

文本

注意

与​**​**​表🔗组件一样,文本组件也基于富文本编辑器

尽管使用​文本​组件也可以构建表,但是对于表的构建,建议使用​​组件来完成。

通过文本组件可以使用所见即所得 (WYSIWYG) 编辑器输入文本块,相应编辑器功能由富文本编辑器提供。通过精选的图标可以设置文本格式,包括字体特性、对齐方式、链接、列表和缩进。

chlimage_1-201

打开​配置​对话框时,还可以设置:

  • 分隔条
  • 文本样式

已设置格式的文本随后将显示在页面上;实际设计将取决于站点 CSS:

dc_text_use

有关文本组件和富文本编辑器所提供功能的更多详细信息,请参阅富文本编辑器页面。

就地编辑

除了基于对话框的富文本编辑模式以外,AEM 还提供了就地编辑模式,当文本在页面布局中显示时,可以通过该模式直接编辑文本。

文本和图像

文本和图像组件可添加文本块和图像。您也可以将文本和图像分开添加和编辑。有关详细信息,请参阅文本组件和图像组件。

chlimage_1-202

您可以配置:

  • 组件样式 (样式)

    您可在此左对齐或右对齐图像。默认为​​对齐,图像位于左侧。

  • 图像属性 (高级图像属性)

    允许您指定以下内容:

    • 图像资产

      上传所需的图像。

    • 标题

      块标题;鼠标悬停时将显示。

    • 替换文本

      无法显示图像时将显示的替换文本。如果留空,则将使用该标题。

    • 链接到

      指定目标路径。

    • 描述

      对图像的说明。

    • 大小

      设置图像的高度和宽度。

以下示例显示了图像左对齐的文本图像组件:

dc_textimage_use

标题

标题组件可以:

  • 显示当前页的名称;可通过将标题字段留空来实现这一点
  • 显示您在标题字段中指定的文本。

您可以配置:

  • 标题​如果您要使用页面标题以外的名称,请在此处输入该名称。

  • 链接
    如果标题将作为链接运行,则输入 URI。

  • 类型/大小
    从下拉列表中选择“小”或“大”。“小”生成为图像。“大”生成为文本。

以下示例显示​标题​组件的显示效果;其设计取决于特定于站点的 CSS。

dc_title_use

视频

注意

如果没有进行广泛的项目级别自定义,此组件将不再能够开箱即用运行。

视频​组件允许您在页面上放置一个预定义的现成视频元素。

另请参阅配置视频组件以与HTML5元素一起使用。

在将组件的实例放置到页面上后,您可以配置:

  • 视频

    • 视频资产

    上传或拖放视频资产。

    • 大小

      视频固有的大小(宽 x 高,以像素为单位)将出现在“大小”(参阅上文)旁边的框中。如果要覆盖视频固有的尺寸,请在此处手动输入宽度和高度尺寸。单击​确定​关闭对话框。

注意

支持的格式包括:

  • .mp4
  • Ogg
  • FLV (Flash视频)

列是控制 AEM 中内容布局的机制。标准安装中提供了用于创建 2 列和/或 3 列的组件。

以下示例显示了使用的 2 列组件。您可以将占位符用于新组件:

dc_columncontroluse

2 列

默认为 2 个相等列的列控件组件。

3 列

默认为 3 个相等列的列控件组件。

列控件

列控件组件允许用户选择如何将网页主面板中的内容拆分为多个列。用户可以选择所需的列数(从预定义的列表中),然后创建、删除或移动每个列中的内容。

  • 列控件

    • 列布局

      选择您要呈现的列数。创建后,每列都有自己的链接,用于在添加内容时拖动组件或资产。

表单

表单组件用于为访客创建表单以提交输入。表单和表单组件可用于收集用户反馈(例如,客户满意度调查问卷)和用户信息(例如,用户注册)等信息。

注意

请参阅 AEM Forms 帮助,以获取有关 AEM Forms 的信息。

表单是从多个不同组件中构建的:

  • 表单

    表单组件定义页面上新表单的开始和结尾。其他组件稍后可放置在这些元素之间,例如表格、下载等。

  • 表单字段和元素

    表单字段和元素可以包括文本框、单选按钮、图像等。用户通常在表单字段中完成操作,例如键入文本。有关详细信息,请参阅单个表单元素。

  • 个人资料组件

    与访客个人资料相关的个人资料组件用于社交协作以及需要访客个人信息的其他区域。

下面显示了一个表单示例。它由​表单​组件(开始和结尾)组成,其中包含两个用于输入内容的​表单文本​字段、一个用于引导文本的​常规文本​字段以及一个​提交​按钮。

dc_form

注意

有关开发和进一步自定义表单的信息,请参阅开发表单页面。相关信息包括添加操作和约束,预载字段以及通过使用脚本调用服务的方式执行操作,等等。

(许多)表单组件的常规设置

尽管每个表单组件都具有不同的用途,但许多表单组件都由相似的选项和参数构成。

配置任意表单组件时,对话框中都提供有下列选项卡:

  • 标题与文本

    您需要在此指定基本信息,例如表单的标题以及任何附带的文本。在适当情况下,该选项卡还允许您定义其他重要信息,例如字段是否可多选以及可供选择的项目。

  • 初始值

    允许您指定默认值。

  • 约束

    您可以在此指定字段是否为必填字段以及对该字段进行约束(例如,必须为数字等)。

  • 样式

    指示字段的大小和样式。

注意

您看到的字段差别很大,具体取决于各个组件。

这些选项卡为您提供必需的参数;具体的选项卡依各个组件类型而定,但可能包括:

  • 标题与文本

    • 元素名称

      表单元素的名称。该选项卡指示数据在存储库中的存储位置。

      这是必填字段,只能包含下列字符:

      • 字母数字字符
      • _ . / : -
    • 标题

      显示的字段标题。如果保留为空,则将显示默认标题。

    • 描述

      允许您根据需要提供用户的其他信息。说明在表单上的字段下方显示,其字体比标题字体小。

    • 显示/隐藏

      确定字段何时可见。

  • 初始值

    • 默认值

      打开表单时字段中显示的值;即在用户输入任何内容前显示的值。

  • 约束

    • 必填

      这取决于表单组件类型,但会提供一个或多个单击框,以指示此字段或此字段的某些部分是必需的。

    • 必需的消息

      通知用户此字段为必填字段的消息;必填字段还将标有星号和。

    • 约束

      可供选择的约束取决于表单组件类型。

    • 约束消息

      用于告知用户所需内容的消息。

  • 样式

    • 大小

      在行和列中。

    • 宽度

      按像素。

    • CSS

表单(组件)

表单组件使用​表单开始​和​表单结尾​元素定义表单的开始和结尾。它们始终是成对的,以确保正确定义表单。

dc_form-1

在表单开始和表单结尾之间,您可以添加表单组件,用于定义用户实际输入的字段。

注意

基础组件表单组件仅支持使用其他基础组件表单组件(按钮、文本、隐藏等)。不支持在基础组件表单中使用核心组件表单组件(反之亦然)。

表单开始

定义页面上新表单的开始时需要此组件。您可以配置:

  • 表单

    • 感谢页面

      为感谢访客提供其意见而引用的页面。如果留空,表单将在提交后重新显示。

    • 启动工作流
      确定提交表单后将触发哪个工作流。

  • 高级

    • 操作
      类型表单需要操作。该操作定义执行用户提交的数据时触发的操作(与HTML中的action=类似)。 有些客户需要相应的
      操作配置.

      标准 AEM 安装中包含以下操作类型选项:

      • 帐户请求

      • 创建内容

      • 创建潜在客户

      • 创建和更新帐户

      • 电子邮件服务: 创建订阅者并添加到列表

      • 电子邮件服务: 发送自动回复的电子邮件

      • 电子邮件服务: 使用户从列表中取消订阅

      • 编辑社区

      • 编辑资源

      • 编辑工作流控制的资源

      • 邮件

      • 所下的订单明细

      • 个人资料更新

      • 重置密码

      • 设置密码

      • 存储内容

        这是默认操作类型。

      • 通过上传存储内容

      • 提交订单

      • 取消订阅者的订阅

      • 更新订单

    • 表单标识符

      表单标识符可唯一标识表单。单个页面上具有多个表单时,应使用表单标识符;请确保它们具有不同的标识符。

    • 加载路径

      用于将预定义值加载到表单字段的节点属性的路径。

      这是指定库中节点的路径的可选字段。如果此节点具有与字段名称相匹配的属性,则表单上的相应字段将随这些属性的值预加载。如果不存在任何匹配,则字段将包含默认值。

      使用​加载路径,您可以预载必填字段中包含值的表单。请参阅预载表单值

    • 客户端验证

      指示此表单是否需要客户端验证(始终​进行服务器验证)。结合​表单 Captcha 组件可以实现这一点。

    • 验证资源类型

      如果您要验证整个表单(而非单个字段),则定义表单验证资源类型。如果您要验证完整表单,还应包含以下任一内容:

      • 客户端验证的脚本:

        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

      • 服务器端验证的脚本:

        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

    • 操作配置

      操作配置​中可用的选项取决于所选的​操作类型:

      • 帐户请求

        • 创建帐户页

          创建新帐户时使用的页面。

      • 创建内容

        • 内容路径

          表单转储的任何内容的内容路径。输入以斜杠/结尾的路径。 斜杠表示对于每个表单端口而言,新节点是在给定位置创建的;例如:

          /forms/feedback/

        • 类型

          选择所需类型。

        • 表单

          指定表单。

        • 呈现工具

          从列表中选择所需的选项。

        • 资源类型

          如果已设置,则会将此参数作为sling:resourceType添加到每个注释中

        • 视图选择器

      • 创建潜在客户

        • 潜在客户会添加到此列表中

          指定所需的潜在客户列表。

      • 创建和更新帐户

        • 初始的组

          要将新用户分配到的组。

        • 主页

          成功登录后显示的页面。

        • 路径

          创建和存储新帐户的路径(相对)。

        • 查看数据…

          单击此按钮可访问有关批量编辑器中表单结果的信息。从此处,您可以将信息导出到.tsv(制表符分隔)文件(例如,在Excel电子表格中使用)。

      • 邮件

        • 输入电子邮件应来自的电子邮件地址。

        • 发送到

          输入表单被发送到的电子邮件地址。

        • 抄送

          输入抄送电子邮件地址。

        • 密送

          输入密送电子邮件地址。

        • 主题

          输入电子邮件的主题。

      • 重置密码

        • 更改密码页

          更改密码时使用的页面。

      • 存储内容

        • 内容路径

          表单转储的任何内容的内容路径。输入以斜杠/结尾的路径。 斜杠表示对于每个表单端口而言,新节点是在给定位置创建的;例如:

          /forms/feedback/

        • 查看数据…

          单击此按钮可访问有关批量编辑器中表单结果的信息。从此处,您可以将信息导出到.tsv(制表符分隔)文件(例如,在Excel电子表格中使用)。

      • 通过上传存储内容

        此选项与​存储内容​的选项相同。

      • 取消订阅者的订阅

        • 潜在客户将从此列表中删除

          指定所需的潜在客户列表。

表单结尾

此组件标记表单的结尾。您可以配置:

  • 表单结尾

    • 显示提交按钮

      指示是否应显示“提交”按钮。

    • 提交名

      如果您要在一个表单中使用多个提交按钮,则应使用标识符。

    • 提交标题

      按钮上显示的名称,例如“提交”或“发送”。

    • 显示重置按钮

      选中复选框可使重置按钮可见。

    • 重置标题

      重置按钮上显示的名称。

    • 描述

      按钮下方显示的信息。

帐户名称

此组件允许用户输入帐户名称:

dc_form_accountname

地址

此组件允许您采用以下格式添加国际地址字段:

dc_form_addresfield

组件配置为立即使用,但您可以根据需要更改配置。例如,可以为地址的单个元素添加约束。将字段留空将使用默认设置。

Captcha

注意

此基础组件已被弃用。Adobe 建议改用核心组件

注意

如果没有进行广泛的项目级别自定义,此组件将不再能够开箱即用运行。

Captcha 组件需要用户键入屏幕上所示的字母数字字符串。该字符串会随每次刷新而变。

dc_form_captcha

您可为此组件配置不同参数,包括当 captcha 字符串无效时将显示的消息。

复选框组

通过复选框可以生成一个或多个复选框的列表,其中某些复选框可以同时选中。

dc_form_checkboxgroupuse

您可以指定各种参数,包括标题、说明和元素名称。您可以使用 + 和 - 按钮添加或删除项目,然后使用向上和向下箭头定位这些项目。

注意

使用​项目加载路径,您可以预加载值的复选框组列表。

请参阅预载包含多个值的表单字段

信用卡详细信息

注意

此基础组件已被弃用。Adobe 建议改用核心组件

此组件允许您提供输入信用卡详细信息所需的字段。您可以对其进行配置,以指定接受的卡类型和所需的信息(例如,安全码)。

chlimage_1-203

可以配置下拉列表,为用户提供一系列值选项:

dc_form_dropdownlistuse

您可以指定标题以及要在列表中显示的项目。使用 + 和 - 按钮,可以添加或删除列表项目,然后使用向上和向下按钮定位这些项目。您可以指定是否允许用户从列表中选择多个项目,还可以指定用户首次打开列表时应自动选择的项目(初始值)。

注意

使用​项目加载路径,您可以预载包含值的下拉列表。

请参阅预载包含多个值的表单字段

文件上传

文件上传组件为用户提供了选择和上传文件的途径。

dc_form_fileupload

注意

您可以创建一个自定义上传组件来将文件上传至 Sling Servlet。有关信息,请参阅将文件上传至 Adobe Experience Manager

隐藏字段

此组件允许您创建隐藏字段。隐藏字段可用于多种目的;例如,当您需要在提交表单后执行操作,或者在帖子处理期间需要使用隐藏数据时。

dc_form_hiddenfield

注意

还可以自定义您的表单,以根据表单中其他字段的值显示或隐藏特定表单组件。当仅在特定条件下才需要表单字段时,更改表单字段的可见性很有用。

请参阅显示和隐藏表单组件

图像按钮

图像按钮允许您使用自己的图像和文本创建按钮:

dc_form_imagebutton

图像上传

图像上传组件为用户提供了选择和上传图像文件的途径。

dc_form_imageupload

链接字段允许用户指定 URL:

dc_form_link

最常用于日历事件表单,它在该表单中用于事件的 URL/链接字段。

密码字段

此组件用于允许用户输入密码:

dc_form_password

密码重置

此组件为用户提供了两个字段,分别用于:

  • 输入密码
  • 重复输入密码以确认输入正确。

使用默认设置时组件将显示为:

dc_password_reset

单选按钮组

单选按钮组为您提供了一个或多个单选复选框列表,在任何特定时间都只能选择其中一个。

您可以指定元素名称、标题和说明。使用 + 和 - 按钮可以添加或删除项目,然后使用向上和向下箭头定位这些项目,以及根据需要指定默认值:

dc_form_radiogroupuse

注意

使用​项目加载路径,您可以预载包含值的单选按钮组。

请参阅预载包含多个值的表单字段

提交按钮

此组件允许您使用以下默认文本创建提交按钮:

dc_form_submitbutton

或者使用您自己的文本:

dc_form_submitbuttonuse

标记字段

此字段允许您选择标记:

dc_form_tags_use

您可以指定各种参数,包括可通过特殊选项卡使用的命名空间:

  • 标记字段

    • 允许的命名空间

      • Geometrixx Outdoors
      • 工作流
      • 论坛
      • Stock Photography
      • Geometrixx Media
      • 标准标记
      • 营销
      • 资产属性
    • 宽度(以像素为单位)

    • 弹出窗口大小

文本字段

可以将标准文本字段配置为您需要的大小且消息中包含您自己的潜在客户:

dc_form_text

工作流提交按钮

此组件允许您创建可在工作流中使用的提交按钮。

chlimage_1-204

在此页面上