交互式通信创作UI简介 introduction-to-interactive-communication-authoring-ui

用于创作交互式通信的用户界面是直观的,为创作交互式通信的打印和Web渠道提供了以下功能:

  • 所见即所得拖放文档编辑器
  • 集成的资产存储库 — 可在交互式通信创作界面的资产浏览器中找到上传到服务器上并在其上创建的资产

当您创建或编辑现有的交互式通信时,使用以下用户界面元素:

交互式通信创作用户界面

A. ​侧栏​ B. ​页面工具栏​ C. ​内容区域

侧栏 sidebar

侧栏

A. ​渠道浏览器​ B. ​内容浏览器​ C. ​属性浏览器​ D. ​资产浏览器​ E. ​组件浏览器​ F. ​数据源浏览器 — 数据模型​ G. ​数据源浏览器 — 主内容

侧栏包括以下内容:

  • 渠道浏览器

渠道浏览器可帮助您在交互式通信的打印渠道和Web渠道之间切换。 根据您在渠道浏览器中选择的渠道,内容和组件等浏览器会显示相应的选项。

  • 内容浏览器
    在内容浏览器中,您可以查看所选渠道的文档对象层次结构。 作者可以通过点按文档对象树中的特定组件来导航到该元素。 作者可以在Web渠道中搜索对象,并从此树重新排列它们。

  • 属性浏览器

    可让您编辑组件的属性。属性会根据组件而发生更改。 例如,要查看文档容器的属性:
    选择一个组件,然后选择 字段级 > 文档容器,然后选择 cmppr

  • Assets浏览器
    分离不同类型的内容,如布局片段、图像、文档、页面、视频。 作者可以将资产拖放到交互式通信中。

  • 组件浏览器
    包含可用于构建文档的打印和Web渠道的组件。 您可以将组件拖动到交互式通信以添加元素,并根据要求配置添加的元素。 下表描述了用于打印和Web渠道的组件浏览器中列出的组件:

Component
打印渠道
Web渠道
功能
图表
添加可在交互式通信中使用的图表,用于显示检索自表单数据模型集合项的二维数据。
文档片段
允许向交互式通信添加可重复使用的组件、文本、列表或条件。 添加到交互式通信的可重用组件可以基于表单数据模型,也可以不使用表单数据模型。
图像
让您插入图像。
面板
-
面板组件是用于分组其他组件的占位符,可控制一组组件在交互式通信中的布局方式。 面板组件还允许您使一组组件对最终用户可重复,例如在填写教育凭证所需的多个条目中。 此外,最好在具有多个选项卡的交互式通信的选项卡中使用每个面板。
*
添加表格以便按行和列整理数据。
目标区域
**
在Web渠道中插入目标区域以组织特定于Web渠道的组件。
文本
-
向交互式通信的Web渠道添加文本。 文本可以使用表单数据模型对象使内容生动活泼。

*在打印渠道中使用布局片段添加表格。

**在打印渠道中,目标区域在XDP/打印模板中预定义。 无法使用交互式通信创作UI添加新目标区域。

  • 数据源浏览器
    数据源浏览器以您在创建交互式通信时选择的表单数据模型显示可用的数据源。

使用组件的要点 key-points-for-working-with-components

使用交互式通信组件时的要点如下:

  • 每个组件都具有控制其外观和功能的关联属性。 要配置组件的属性,请选择该组件,然后选择 cmppr 以在“属性”浏览器中打开组件属性。

  • 组件由其元素名称标识。 选择 cmppr 时,可以通过更改属性浏览器中的“元素名称”字段值来更改组件的名称。 元素名称字段仅接受字母、数字、连字符(-)和下划线(_)。 不允许使用其他特殊字符,元素名称应以字母开头。

  • 只要标题在交互式通信中可见,您就可以在编辑器中内联修改交互式通信组件的Title属性,而无需打开Properties浏览器。 为此,请执行以下操作:

    1. 选择可选择具有Title属性且已禁用Hide title属性的组件。

    2. 选择 aem_6_3_edit 以使标题可编辑。

    3. 修改标题并选择Return键或选择组件之外的任意位置以保存更改。 选择Esc键以放弃更改。

组件工具栏 component-toolbar

组件工具栏标签

选择某个组件后,您会看到一个允许您处理该组件的工具栏。 您可以获得用于剪切、粘贴、移动和指定组件属性的选项。您的选项包括:

A.配置:选择​ 配置 ​时,组件属性在侧栏中可见。

B.编辑规则:选择“编辑规则”时,将出现规则编辑器,您可以在其中编辑和创建选定组件的规则。 在规则编辑器中,您还可以选择其他表单对象(组件)并编辑/创建这些表单对象的规则。

C.复制:您可以使用复制选项复制组件,并将其粘贴到交互式通信中的其他位置。

D.剪切:您可以在交互式通信中使用剪切选项将组件从一个位置移动到另一个位置。

E. 删除:允许您从交互式通信中删除组件。

F. 插入组件:允许您在选定组件上方插入组件。

G. 粘贴:允许您粘贴使用上述选项剪切或复制的组件。

H. 分组:可让您选择多个组件(如果要剪切、复制或粘贴多个组件)。

I. 父项:允许您选择组件的父项。

J. 查看SOM表达式: ​用于查看组件的SOM表达式

K: 将面板中的对象分组: ​允许您将这些组件分组到一个面板中,以便能够对这些组件同时执行操作。 有关详细信息,请参阅面板🔗中的组对象。

L. 添加子面板(仅适用于面板):允许您向面板添加子面板。

M: 添加面板工具栏(仅适用于面板):允许您添加面板组件的工具栏。 然后,您可以在工具栏上执行进一步的操作。

此外,通过工具栏上的​ 替换 ​选项,您可以使用替代组件替换现有组件。 选项不适用于面板组件。

页面工具栏 page-toolbar

顶部的页面工具栏提供了一些选项,用于预览交互式通信并更改其属性。 您可以在创作交互式通信时预览该通信,并进行相应更改。 在页面工具栏中,您会看到:

  • 切换侧面板 切换侧面板 :可显示或隐藏侧栏。

  • 页面信息 pageinformationad :用于查看页面属性。

  • 模拟器 标尺 :用于模拟不同显示大小(如平板电脑和手机)的交互式通信的外观。

  • 编辑:允许您选择其他模式,例如“编辑”、“样式”、“开发人员”和“设计”。

    • 编辑:用于编辑交互式通信及其组件的属性。 例如,添加组件、删除图像和指定必填字段。

    • 样式:用于为交互式通信组件的外观设置样式。 例如,在样式模式下,您可以选择一个面板并指定其背景颜色。

    • 开发人员:允许开发人员:

      • 了解由哪些交互通信组成。
      • 调试何时何地发生的情况,这反过来有助于解决问题。
    • Target:用于启用或禁用自定义组件,或侧边栏中未列出的现成组件。

  • 预览:用于预览交互式通信在发布时的外观。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2