本文档以通用标题组件请求数据,并分发给数字翻牌器多行文本组件,完成数据更新为例,介绍如何使用蓝图编辑器功能,通过合并请求进行数据分发。

前提条件

准备好您的交互需求。

本案例的交互需求为:通用标题组件请求数据,并将请求到的数据分发给数字翻牌器多行文本组件。

背景信息

本案例的实际应用场景为:多个组件共用一个数据请求,产生单个组件请求数据,并分发给其他组件。
说明 本文档适用于多个组件的数据可以通过API或SQL数据源等一次都获取到时,减少数据请求次数。

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
  • 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了翻牌器组件之间的联动。
    • 通用标题:组件具备抛出请求接口返回数据的能力。
    • 数字翻牌器&多行文本:属于被联动组件,具有接收数据并执行动作的能力。
  • 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件下游组件的执行动作绑定,从而实现页面内组件间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互

  1. 画布编辑器页面,搭建所需要的通用标题多行文本数字翻牌器组件,详情请参见添加组件
  2. 数字翻牌器的配置面板中,清空标题名、前缀内容和后缀内容配置项。配置数字翻牌器
    注意 此步骤为可选步骤,您可以根据需求自定义标题名、前缀或后缀内容。
  3. 通用标题组件放置于画布外,并修改组件的数据内容。通用标题数据内容
    本案例中,通用标题组件配置的数据如下。
    [
        {
            "num": "123",
            "text": "这是多行文本组件",
            "value": "接收数据组件"
        }
    ]
    注意 本案例内的通用标题组件只用于请求数据,放置于画布外,在预览发布时不会显示在大屏上。添加组件
  4. 组件配置完成后,单击画布编辑器图层栏内三个组件,右键选择导出到蓝图编辑器标题多行文本数字翻牌器导出到蓝图编辑器
  5. 单击画布编辑器页面左上角,单击蓝图编辑器图标,切换到蓝图编辑器配置页面。蓝图编辑器界面入口
  6. 蓝图编辑器页面,将左侧导入节点栏内的通用标题多行文本数字翻牌器节点拖至画布中。
  7. 拖动添加一个序列执行逻辑节点到画布中,在节点配置面板中新增一个处理方法后将序列执行内的两个处理方法重命名为取文本数据取翻牌器数据
    具体操作方法请参见序列执行
  8. 将画布中的多个节点按如下样式连线。多个节点连线样式
    本案例需要进行两次连线:
    • 通用标题当数据接口请求完成时事件,与序列执行节点左侧的执行动作相连,再将节点右侧的取文本数据处理方法与多行文本导入数据接口动作连线。
    • 通用标题当数据接口请求完成时事件,与序列执行节点左侧的执行动作相连,再将节点右侧的取翻牌器数据处理方法与多行文本导入数据接口动作连线。
  9. 配置画布中序列执行内的取文本数据取翻牌器数据这两个处理方法。
    1. 单击序列执行逻辑节点,进入右侧配置面板,选择面板内其他配置栏下方的取文本数据处理方法,单击右侧下拉框打开脚本编辑区域。
    2. 在脚本编辑区域,输入代码,完成后单击完成
      当前处理方法的示例代码如下。
      return [{
        value:data[0].text
      }];
    3. 使用同样的方式配置取翻牌器数据处理方法。
      当前处理方法的示例代码如下。
      return [{
        value:data[0].num
      }];
      说明 通用标题内的当数据接口请求完成时事件,事件中包含该组件所有数据。数字翻牌器多行文本组件的导入数据接口动作接收到上游传过来的内容后,会用新导入的数据覆盖组件原本的数据。序列执行节点负责将上游抛出的事件内容进行加工处理,把处理后的数据直接给数字翻牌器多行文本组件使用。
  10. 处理方法都配置完成后,单击蓝图编辑器配置页面右上角的预览图标,查看数据分发效果。交互展示