您查看的帮助内容对应的版本是:

以下组件适用于为标准网页创作内容。这些组件构成了适用于标准 AEM 安装的现成组件的子集。

一些组件可以通过 Sidekick 直接使用,还有一些组件则可以在设计模式中启用/禁用。

注意:

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

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

组件可以在编辑页面时使用,具体视所使用的 UI 而定:

  • 触屏优化 UI:
    • 页面编辑器侧面板的“组件”选项卡
  • 经典 UI:
    • Sidekick 的组件选项卡
    • 插入新组件选择器(当您在将组件或资源拖动到这里区域中双击时)

在这两种 UI 中,您可以选择一个组件并将其拖动到页面上的所需位置。然后,便可以编辑该组件:

组件按照各种类别(组件组)进行分类,这些类别包括(用于创作页面):

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

常规

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

帐户项

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

自适应图像

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

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

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

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

支持的图像格式

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

  • .jpg
  • .jpeg
  • .png
  • .gif **

注意:

** .gif 动图文件在 AEM 不可进行自适应呈现。

图像大小和质量

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

当图像为 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 格式输入您的图表数据;逗号分隔值格式使用逗号(“,”)作为字段分隔符。
  • 高级
    • 图表类型
      从饼图、折线图和条形图中进行选择。
    • 替换文本
      显示的用于替代图表的替换文本。
    • 宽度
      图表的宽度(以像素为单位)。
    • 高度
      图表的高度(以像素为单位)。

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

注意:

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

内容片段

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

设计导入程序

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

下载

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

  • 下载
    • 说明
      随下载链接一起显示的简短说明。
    • 文件
      在生成的网页上可供下载的文件。从内容查找器中拖动资产或单击区域以上传可供下载的文件。

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

外部

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

  • 外部
    • 目标应用程序
      指定要集成的 Web 应用程序的 URL;例如:
          http://en.wikipedia.org/wiki/Main_Page
    • 传递参数
      根据需要选中要传递到应用程序的参数所对应的框。
    • 宽度和高度
      定义 iframe 的大小。

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

注意:

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

Flash

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

  • Flash
    • Flash 影片
      Flash 影片文件。从内容查找器中拖动资产,或者单击以打开浏览窗口。
    • 大小
      包含影片的显示区域的尺寸(以像素为单位)。
  • 备用图像
    要显示的备用图像。
  • 高级
    • 上下文菜单
      指示应显示还是隐藏上下文菜单。
    • 窗口模式
      窗口的显示方式,例如不透明、透明或显示为独立(实底)窗口。
    • 背景颜色
      从提供的颜色图表中选择的背景颜色。
    • 最低版本
      运行影片所需的 Adobe Flash Player 的最低版本。默认为 9.0.0。
    • 属性
      任何其他所需的属性。

图像

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

您可以上传图像,然后对其进行编辑和操作(例如,裁剪、旋转、添加链接/标题/文本)。两种 UI 中的功能基本相同,只是外观不同:

  • 触屏优化 UI

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

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

    注意:

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

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

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

  • 经典 UI

    您可以从内容查找器中将图像直接拖放到组件上或其“编辑”对话框中 。此外,也可以双击“编辑”对话框的中心区域,以浏览本地文件系统并上传图像。“编辑”对话框的两个选项卡还控制着图像的所有定义和操作:

注意:

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

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

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

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

  • 映射
    要映射图像,请选择“映射”。您可以指定创建图像映射的方式(矩形、多边形等)以及该区域应指向的位置。
  • 裁剪
    选择“裁剪”可裁剪图像。可使用鼠标裁剪图像。
  • 旋转
    要旋转图像,请选择“旋转”。连续使用“旋转”,直到图像旋转成您需要的外观。
  • 清除
    删除当前图像。
  • 缩放栏(仅限经典 UI)
    要放大和缩小图像,请使用图像下方的滚动条(在“确定”和“取消”按钮上方)。
  • 标题
    图像的标题。
  • 替换文本
    创建辅助内容时使用的替换文本。
  • 链接到
    创建指向资产或网站中其他页面的链接。
  • 说明
    有关图像的说明。
  • 大小
    设置图像的高度和宽度。

注意:

在触屏优化 UI 中,某些选项仅在全屏编辑器中可用。

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

布局容器

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

注意:

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

列表

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

  • 列表
    • 生成列表对象
      在此处,可以指定列表将检索其内容的位置。有下列几种方法:
    • 根据您选择的项目,将显示一个新面板:
      • 子页面选项
        • 子项来源(父页面)
          手动或使用选择器指定一个路径。如果将此选项留空,则使用当前页面作为父页面。
      • 固定列表选项
        • 页面
          选择一系列页面。使用 + 添加更多条目,然后使用向上/向下按钮调整顺序。
      • 搜索选项
        • 开始
          手动或使用选择器输入一个开始路径。
        • 搜索查询
          可以输入纯文本搜索查询。
      • 高级搜索选项
        • QueryBuilder 谓词记号
          可以使用“QueryBuilder 谓词记号”输入搜索查询。例如,您可以输入“fulltext=Marketing”,以使内容带有“Marketing”的所有页面都显示在传送中。
          有关查询表达式的完整说明和更多示例,请参阅 QueryBuilder API
      • 标记
        指定父页面标记/关键字和所需的匹配条件。
    • 显示方式
      您希望列出项目的方式;包括链接、Teaser 和新闻。
    • 排序依据
      是否要对列表进行排序,如果排序,可将该条件用于排序。您可以输入条件或从提供的下拉列表中选择一个。
    • 限制
      指定您希望在列表中显示的最大项目数。
    • 启用信息源
      指示是否应为列表激活 RSS 信息源。
    • 每页显示条目数
      在此处,可以指定一次要显示的列表项目数。所含项目多于指定数量的列表将使用分页以多个部分显示列表。

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

登录

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

您可以配置:

  • 登录
    • 区域标签
      输入字段的引导文本。
    • 用户名标签
      用于标记用户名字段的文本。
    • 密码标签
      用于标记密码字段的文本。
    • “登录”按钮标签
      登录按钮的文本。
    • 重定向到
      您可以指定用户登录后应打开的网站页面。
  • 已登录
    • “继续”按钮标签
      用于指示用户已登录的文本。

订单状态

  • 标题
    • 标题
      指定您希望显示的标题文本。
    • 链接
      指定应显示订单状态的页面(产品)。
    • 类型/大小
      从提供的选项中进行选择。

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

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

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

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

.../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

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

搜索

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

您可以配置:

  • 搜索
    • 节点类型
      如果搜索被限制为特定的节点类型,则在此处列出它们;例如,cq:Page
    • 搜索路径
      指定要搜索的分支的根页面。
    • 搜索按钮文本
      实际搜索按钮上显示的名称。
    • 统计数据文本
      在搜索结果上方显示的文本。
    • 无结果文本
      如果没有任何结果,将显示在此处输入的文本。
    • 拼写检查文本
      如果某人输入类似术语,则此文本将显示在该术语前面。
      例如,如果您键入 geometrixxe,则系统会显示“是否要:geometrixx”。
    • 类似的页面文本
      在类似页面的结果旁边显示的文本。单击此链接可查看具有类似内容的页面。
    • 相关的搜索文本
      在相关术语和主题的搜索旁边显示的文本。
    • 搜索趋势文本
      位于用户输入的搜索词上方的标题。
    • 结果页面标签
      在此列表底部显示的文本,带有指向其他结果页的链接。
    • 上一标签
      在指向先前的搜索页的链接上显示的名称。
    • 下一标签
      在指向随后的搜索页的链接上显示的名称。

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

以下示例显示拼写错误且不可用的搜索词:

Sitemap

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

 如果需要,您可以配置:

  • Sitemap
    • 根路径
      列表开始的路径。

幻灯片放映

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

您可以配置:

  • 幻灯片
    • 新建幻灯片
      您可以使用添加(和删除)按钮选择幻灯片。
    • 标题
      根据需要指定标题。此标题会覆盖在相应的幻灯片上。
  • 高级
    • 大小
      指定宽度和高度(以像素为单位)。

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

注意:

文本组件一样,表组件也基于富文本编辑器

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

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

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

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

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

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

标记云

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

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

  • 要显示的标记
    要显示的标记从中收集的位置。从含有所有子项或所有标记的页面进行选择。
  • 页面
    选择要引用的页面。
  • 标记上无链接
    显示的标记是否应作为链接。

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

文本

注意:

组件一样,文本组件也基于富文本编辑器

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

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

  • 触屏优化 UI(全屏模式)

  • 经典 UI

当您打开配置对话框(触屏优化 UI)或编辑对话框的样式选项卡(经典 UI)后,您还可以设置:

  • 分隔条
  • 文本样式

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

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

就地编辑

除了基于对话框的富文本编辑模式以外,AEM 还提供了就地编辑模式,当文本在页面布局中显示时,可以通过该模式直接编辑文本。同样,实际的外观也取决于您所使用的 UI。

文本和图像

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

与文本组件和图像组件一样,实际的外观会因您所使用的 UI 而有所不同,但是在两种 UI 中,您都可以配置:

  • 组件样式样式
    您可以在此处左对齐或右对齐图像。 默认为对齐,图像位于左侧。
  • 图像属性高级图像属性
    允许您指定以下内容:
    • 图像资产
      上传所需的图像。
    • 标题
      块标题;鼠标悬停时将显示。
    • 替换文本
      无法显示图像时将显示的替换文本。如果留空,则将使用标题。
    • 链接到
      指定目标路径。
    • 说明
      有关图像的说明。
    • 大小
      设置图像的高度和宽度。

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

标题

标题组件可以:

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

您可以配置:

  • 标题
    如果您要使用页面标题以外的名称,请在此处输入该名称。
  • 链接
    如果标题将作为链接运行,则输入 URI。
  • 类型/大小
    从下拉列表中选择“小”或“大”。“小”生成为图像。“大”生成为文本。

以下示例演示将要显示的标题组件;设计取决于站点特定的 CSS。

视频

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

注意:

为了进行正确转码,您的管理员必须单独安装 FFmpeg

在未启用 Dynamic Media 的情况下,使用 FFmpeg 生成视频呈现,而对于启用 Dynamic Media 的 AEM,则使用视频转码器。有关更多详细信息,请参阅安装和配置视频转码器与 FFmpeg

它们还可以配置视频配置文件以便与 HTML5 元素结合使用。

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

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

注意:

支持的格式包括:

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

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

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

2 列

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

3 列

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

列控件

注意:

列控件组件仅可在经典 UI 中使用。在触屏优化 UI 中,使用预配置的 2 列/3 组件。

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

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

表单

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

注意:

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

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

  • 表单
    表单组件定义页面上新表单的开始和结尾。其他组件稍后可放置在这些元素之间,例如表、下载等。 
  • 表单字段和元素
    表单字段和元素可以包括文本框、单选按钮、图像等。用户通常在表单字段中完成操作,例如键入文本。有关详细信息,请参阅单个表单元素。
  • 个人资料组件
    与访客个人资料相关的个人资料组件用于社交协作以及需要访客个人信息的其他区域。

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

注意:

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

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

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

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

  • 标题与文本
    您需要在此处指定基本信息,例如表单的标题以及任何附带的文本。在适当情况下,该选项卡还允许您定义其他重要信息,例如字段是否可多选以及可供选择的项目。
  • 初始值
    允许您指定默认值。
  • 约束
    您可以在此处指定字段是否为必填字段以及是否对该字段进行约束(例如,必须为数字等)。
  • 样式
    指示字段的大小和样式。

注意:

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

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

  • 标题与文本
    • 元素名称
      表单元素的名称。该选项卡指示数据在存储库中的存储位置。
      这是必填字段,只能包含下列字符:
      • 字母数字字符
      • _ . / : -
    • 标题
      显示的字段标题。如果保留为空,则将显示默认标题。
    • 说明
      允许您根据需要为用户提供其他信息。说明在表单上的字段下方显示,其字体比标题字体小。
    • 显示/隐藏
      确定字段何时可见。
  • 初始值
    • 默认值
      打开表单时字段中显示的值;即在用户输入任何内容前显示的值。
  • 约束
    • 必需
      “必需”取决于表单组件类型,但它会提供一个或多个单击框,以指示该字段或其某些部分是必需的。
    • 必需的消息
      用于告知用户该字段为必需字段的消息;必需字段还会标有星号。
    • 约束
      可供选择的约束取决于表单组件类型。
    • 约束消息
      用于告知用户必需项目的消息。
  • 样式
    • 大小
      以行和列为单位。
    • 宽度
      以像素为单位。
    • CSS

表单(组件)

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

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

表单开始

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

  • 表单
    • 感谢页面
      为感谢访客提供其意见而引用的页面。如果留空,表单将在提交后重新显示。
    • 启动工作流
      确定提交表单后将触发哪个工作流。
  • 高级
    • 操作类型
      一个表单需要一项操作。此操作定义执行用户提交数据时触发的操作(与 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 电子表格中使用)。
      • 通过上传存储内容
        此项的选项与存储内容相同。
      • 取消订阅者的订阅
        • 潜在客户将从此列表中删除
          指定所需的潜在客户列表。

表单结尾

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

  • 表单结尾
    • 显示提交按钮
      指示是否应显示提交按钮。
    • 提交名
      在表单中使用多个提交按钮时的标识符。
    • 提交标题
      按钮上显示的名称,例如“提交”或“发送”。
    • 显示重设按钮
      选中该复选框可使重置按钮可见。
    • 重置标题
      重置按钮上显示的名称。
    • 说明
      按钮下方显示的信息。

帐户名称

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

地址

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

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

Captcha

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

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

复选框组

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

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

注意:

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

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

信用卡详细信息

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

下拉列表

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

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

注意:

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

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

文件上传

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

注意:

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

隐藏字段

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

注意:

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

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

图像按钮

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

图像上传

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

链接字段

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

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

密码字段

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

密码重置

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

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

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

单选按钮组

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

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

注意:

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

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

提交按钮

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

或者使用您自己的文本:

标记字段

此字段允许您选择标记:

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

  • 标记字段
    • 允许的命名空间
      • Geometrixx Outdoors
      • 工作流
      • 论坛
      • Stock Photography
      • Geometrixx Media
      • 标准标记
      • 营销
      • 资产属性
    • 宽度(以像素为单位)
    • 弹出窗口大小

文本字段

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

工作流提交按钮

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

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略