本文档为您介绍表单组的配置方法。如果您是DataV专业版用户，可以将多个高级交互组件进行编组，形成一个表单组。通过表单组，您可以在蓝图编辑器中实现交互筛选功能。

建立表单组

  1. 使用空白模板创建可视化应用，并添加几个高级交互组件。
  2. 在图层栏或画布中，单击选中多个高级交互组件，或者拖拉鼠标，将想要归为一类的组件选中。
    建立表单组
  3. 单击鼠标右键，选择成表单组，将这几个组件添加到一个表单组中。

    表单组建立之后，可双击组标题重命名。

    表单组后与普通成组功能的区别为：表单组建立后会额外增加清空和提交按钮，并且表单组没有限制，可以多次生成。

    清空和提交按钮
    表单组建立之后，表单组外围及内部新生成的清空和提交按钮会自动导出到蓝图编辑器。
    说明 表单组本质上是个快捷操作，主要在蓝图编辑器配置中使用。在创建表单组的同时，DataV会自动绑定提交按钮和清空按钮与表单组之间的连线与交互，只需配置表单提交事件和表单清空事件的交互即可。

取消表单组

选择需要取消的表单组，单击鼠标右键，选择取消成组即可。

取消表单组
注意
  • 取消表单组后，该组里面的组件将全部回归到未成组状态。各组件相互独立，不再以组合为单位进行拖拉移动等操作。
  • 取消表单组后，清空按钮和提交按钮不会消失，只能手动删除。

清空按钮交互配置

表单组建立后，在蓝图编辑器页面的画布中，可以看到如下图所示的清空按钮的交互配置参数。

清空按钮交互配置
类型 事件/动作 说明
事件 当数据接口请求完成时 数据接口请求返回，抛出经过过滤器处理后的事件，同时抛出处理后的JSON格式的数据。
点击按钮时 当单击按钮时抛出的事件，同时抛出该按钮的内部数据。
动作 请求数据接口 重新请求服务端数据，上游转换器或图层节点抛出的数据将作为参数。例如，清空按钮配置了API数据源为http://api.test，传到请求接口描述动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1。
导入数据接口 按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。
更新组件配置 动态更新组件的样式配置。需要首先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要，在蓝图编辑器配置页面的数据处理节点中，更改对应样式的字段值。
显示 显示组件，不需要参数。
隐藏 隐藏组件，不需要参数。
切换显隐状态 切换组件显示或者隐藏。
参数示例： 
    {
      // 显示为true，隐藏为false。
      "status": true,
      // 显示动画。
      "animationIn": {
        // 动画方式，可选fade，不填无动画。
        "animationType": "fade",
        // 显示延时，单位为ms。
        "animationDuration": 1000,
        // 显示动画函数，可选linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      },
      // 隐藏动画。
      "animationOut": {
        // 动画方式，可选fade，不填无动画。
        "animationType": "fade",
        // 隐藏延时，单位为ms。
        "animationDuration": 1000,
        // 隐藏动画函数，可选linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }
移动 将组件移动到指定位置。
参数示例： 
    {
      // 移动方式。绝对定位：by，相对定位：to。
        "positionType": "by",
      // 指定位置。x坐标，y坐标。
      "attr": {
        "x": 0,
        "y": 0
      },
      // 动画方式。
      "animation": {
        "enable": false,
        // 动画延时。
        "animationDuration": 1000,
        // 动画曲线。可选值为：linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

提交按钮交互配置

提交按钮的交互配置参数如下，与清空按钮类似，详情请参见清空按钮交互配置。

提交按钮交互配置

表单组应用操作示例

以下示例以高级交互组件中的单选框、输入框，以及地图组件中的基础平面地图为例，为您演示表单组在蓝图编辑器的具体使用方法。

  1. 在画布编辑器页面，搭建所需要的单选框、输入框和基础平面地图组件。
  2. 同时选中单选框和输入框组件，单击鼠标右键，选择成表单组。
  3. 同时选中单选框、输入框和基础平面地图，单击鼠标右键，选择导出到蓝图编辑器。
  4. 确认导出后，单击顶部左侧菜单栏的蓝图编辑器图标（蓝图编辑器图标）。
  5. 在蓝图编辑器页面，查看自动生成的表单组交互配置。

    DataV会自动生成与编辑器页面中的表单组对应的交互配置，表单组两边清空按钮和提交按钮，分别绑定了清空表单和提交表单的动作。当单击了对应的按钮时，会触发对应的表单响应事件。

    表单组蓝图配置
  6. 在左侧的导入节点面板中，将基础平面地图组件拖到画布中。
  7. 将表单组事件中的当表单被提交时事件，与地图上的请求数据接口或者导入数据接口动作连线，即可触发地图上被筛选后的内容更新。
    表单组配置连线
  8. 添加其他连线和数据处理节点，并进行节点配置。
  9. 配置完成后预览并发布，即可在可视化应用项目中实现表单组的交互效果。

    详情请参见操作示例。