配置表单组

建立表单组

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

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

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

   

   表单组建立之后，表单组外围及内部新生成的清空和提交按钮会自动导出到蓝图编辑器。

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

取消表单组

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

清空按钮交互配置

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

    {
      // 显示为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. 配置完成后预览并发布，即可在可视化应用项目中实现表单组的交互效果。

   详情请参见操作示例。