> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 表单介绍

> 介绍宜搭表单设计器的使用方法，包括顶部操作栏、左侧工具栏、中间画布和右侧属性配置面板等功能区域的详细说明。

## 1. 适用场景

需要收集信息、或商品录入等场景。

## 2. 表单设计器介绍

宜搭的整个设置页面统称为设计器页面

整体页面分为「顶部操作栏」「左侧工具栏」「中间画布」「右侧属性配置面板」这四个部分，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639446786540-5c3fd70a-7eaa-441c-8886-d3b1f6c0c3f6.png)
</Frame>

### 2.1 顶部操作栏

#### 2.1.1 表单设置

表单设置可以对表单进行布局配置、表单提交校验、表单的一些规则配置。

<Warning>
  **注：流程的表单设计器有些区别，表单校验需要在流程里配置。**
</Warning>

* 高级流程校验 配置请查看 [节点提交规则](/zh/yida/process/meiv3y)
* 普通流程校验 配置请查看 [节点提交规则](/zh/yida/process/emt041)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639446837741-a243798f-21b7-435b-9b28-581e31ab7448.png)
</Frame>

* 表单列数配置请查看： [表单布局](/zh/yida/form/ex2ohg)
* 表单校验配置请查看： [表单校验](/zh/yida/form/un1t9v)
* 表单事件配置请查看： [表单业务规则](/zh/yida/form/dssg6y)

#### 2.1.2 页面设置

页面设置可以对表单页面自定义布局和设置页面生命周期的事件回调配置。

* 页面布局请查看： [表单布局](/zh/yida/form/ex2ohg)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639446875493-3b7b7951-cce1-4b7b-866e-f486ab7ae5af.png)
</Frame>

* 生命周期回调

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639446920818-ea89d9b6-1e02-4cf6-80fd-8473e32fd284.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639446953542-082b2bcc-07f2-4cf1-9fef-28098f1b7082.png)
</Frame>

#### 2.1.3 快捷键

宜搭设计器也提供了对应的快捷键操作可使用快捷键快速完成设置，如图所示

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447001494-afad9da1-2f2b-4724-8073-e12a5ebd22a5.png)
</Frame>

#### 2.1.4 全局搜索

表单组件较多的情况下，可通过全局搜索快速搜索需要的组件。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447036262-40561327-9e42-4c7e-bf81-29ae0a34fe0d.png)
</Frame>

#### 2.1.5 历史记录

宜搭设计器提供了查看历史记录的功能。每次保存时会自动存储一次记录，最多保存 50 条，可以查看最近的 50 次保存记录，并可以进行回滚操作、查看变更操作。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447075379-1ca1dd7e-2328-4b61-898f-959586d11625.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447087823-9d5a6244-7cda-41f2-a012-3c6f2da83235.png)
</Frame>

### 2.2 左侧工具栏

#### 2.2.1 大纲树

大纲树可以让您更清晰来看页面的整体布局，您可以通过在大纲树上对控件进行批量拖拽、批量删除。

* 双击大纲树可以更改别名，用来区分多个相同的控件。
* 点击右上角的「 固定 」图标，可以将大纲树面板固定在左侧。
* 按住 CMD / CTRL 键，可在大纲树上进行多选操作。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447134682-4c928555-8595-45f3-8d63-728f82fde4d0.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1639447233458-49b11e6d-9cec-4b45-b8d1-f6cd5fc1b358.gif)
</Frame>

#### 2.2.2 组件库

点击组件库里的组件进行拖拽，可将控件拖拽到画布中或大纲树中的指定位置，你也可以点击组件直接将组件插入到画布当中。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447267359-f1c8b205-1ada-47ef-b6f0-ce6184dc80db.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1639447605927-53ec5ca7-47eb-4df9-851e-ffa3acecc994.gif)
</Frame>

#### 2.2.3 数据源

数据源可以声明一个变量或者一个远程变量，用于动态展示一些数据使用。

在控件的属性配置上可以进行对数据源的数据绑定。

详情配置请点击：[数据源面板](/zh/yida/form/og76m2)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447745440-b2458e4e-b15c-4a5b-8c73-772d50b1670e.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447798666-a60dee19-4f39-43a2-b077-f92ee266bf12.png)
</Frame>

#### 2.2.4 动作面板

动作面板可以用来编写[**JavaScript**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 代码，来实现一些更定制化的需求。

详情配置请点击：[JS 动作面板 - 前端代码开放](/zh/yida/developer-features/ocmxyv)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447885251-22d7a354-b230-4249-ab84-b29389171668.png)
</Frame>

#### 2.2.5 国际化面板

国际化面板可以用来配置多语言文案的管理，在控件的属性配置上可以进行对多语言数据进行数据绑定。

详情配置请点击：国际化

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639447917187-4792b2ca-4227-4f05-8c7c-40744669425e.png)
</Frame>

#### 2.2.6 中间画布

画布用来将控件进行排布、配置，从而完成页面的搭建，在画布中可以根据光标提示来进行拖拽布局，也可以对控件进行复制、删除操作，复制和删除都可以直接使用快捷键。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1639448022075-8381ee51-47b4-42d4-bf2e-b7f4acd39d85.gif)
</Frame>

### 2.3 右侧属性配置面板

#### 2.4.1 属性设置

属性设置用来配置控件常用的一些属性配置，配置后在画布中的控件会实时看到配置变化的生效结果。

点击 \{/} 可以对当前的属性进行 [**数据绑定**](/zh/yida/form/og76m2)，从而达到动态显示的效果。

**注：数据绑定的结果展示设计器中无法实时生效，需要在预览环境查看**。

详情配置可点击：[组件基础信息](/zh/yida/form/snftao)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639448072720-21d8e2f7-c5ee-4e9e-af96-7362c559644b.png)
</Frame>

#### 2.4.2 样式设置面板

宜搭设计器在，图文展示，布局容器，分组等组件提供了基础样式配置的功能，可修改宽，高，背景，如图所示：

详情配置可点击：[自定义样式介绍](/zh/yida/form/gdnsgw)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639448149177-43f30841-b494-4062-8349-62bc812f9c99.png)
</Frame>

#### 2.4.3 高级

高级主要是用来配置控件去对它设置一些特殊的需求。

详情配置可点击：[组件基础信息](/zh/yida/form/snftao)

①唯一标识：当前控件的唯一标识，用来在代码中获取当前控件实例的，从而进行对控件的一些高级操作。

②多端显示：多端显示用来配置当前控件在哪个端显示使用，默认全部显示，当配置了某个端不显示时，该控件不会在当前的端上进行渲染。

<Warning>
  **注：如果配置了此选项将不会提交数据到服务端，当使用代码获取当前控件的实例时会返回 null**。
</Warning>

③数据提交：默认值为「仅显示时提交」，当表单控件的「默认状态」配置了隐藏时，默认是不会将数据提交到后台如果需要提交隐藏字段的数据时，可以将此选项选择为 「始终提交」。

**注：该选项是配合控件的「默认状态」属性。**

④动作设置：用来给控件配置事件回调，通过写代码的方式来完成一些复杂的业务逻辑。更多可以查看[**动作面板**](/zh/yida/form/uezmum)的使用。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639448650060-f69e4678-a69a-42fb-89e6-8aacf19ff62e.png)
</Frame>