> ## 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. 使用场景

需要展示这个应用的整体数据，例如查看待我处理的、我创建的、抄送我的，也可以设置提交表单的快速入口

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639720941947-ef74bb7f-657d-4db7-8d22-81ed6bfed596.png)
</Frame>

应用

## 2. 整体介绍

自定义页面设计器整体分为「顶部操作栏」「左侧工具栏」「中间画布」「右侧属性配置面板」这四个部分

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639729367699-f570f1d6-11b2-4678-940e-107c06114f46.png)
</Frame>

表单编辑页面

下面会详细介绍这四个部分里的功能

### 2.1 顶部操作栏

#### 2.1.1 页面设置

参考 [**页面设置**](/zh/yida/custom-page/pkfvyw) 说明

#### 2.1.2 快捷键

宜搭设计器提供了一系列的快捷键操作，效果如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639729603531-1c51627e-9205-4862-bf50-1cd76a2d199b.png)
</Frame>

#### 2.1.3 历史记录

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

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639729629068-e57cd2ee-64eb-43d9-be2f-84c56411adc4.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639729644198-49f68479-a498-40ab-9b17-e8387eb24356.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612070458259-4314d45d-3911-4def-93de-278aced31591.png)
</Frame>

### 2.2 左侧工具栏

#### 2.2.1 大纲树

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

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

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639729876643-870a0f1c-ed31-4a36-8707-f50be9b7a8d7.png)
</Frame>

查看以下视频进行设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1639732873945-89bbcec1-2219-41c4-8b1a-1c11f9386b57.gif)
</Frame>

#### 2.2.2 组件库

点击组件库里的组件拖拽到画布中或大纲树中的指定位置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639731105863-dda30d82-3495-4ab3-8e91-911616d27a1d.png)
</Frame>

查看以下视频进行设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1639732817726-04c95e88-91e7-45b0-bda6-594a5843c02b.gif)
</Frame>

#### 2.2.3 区块模板

区块模板是为了提高 设计效率 而存在，合理地使用模板和区块能够提高日常页面设计中的效率，并遵循合理的设计范式，更多可查看 [**区块模板**](/zh/yida/custom-page/eab1wa)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732074644-17e9069f-7b8b-43c6-9b02-89fbb29b41ce.png)
</Frame>

#### 2.2.4 数据源

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

在控件的属性配置上可以进行对数据源的数据绑定，更多可以[**查看数据源面板**](/zh/yida/form/og76m2)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639731821888-377110f0-5278-4f3f-bde9-44ecbc556dec.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732117684-5fe0b579-7444-411f-a9fb-064dbcf3f2d8.png)
</Frame>

#### 2.2.5 动作面板

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

更多可以[查看动作面板](/zh/yida/developer-features/ocmxyv)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732186968-6fdcf46f-e29e-407a-8078-ea581e897fab.png)
</Frame>

#### 2.2.6 国际化面板

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

更多请[查看国际化面板](https://www.yuque.com/yida/help-v2/encgdf)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732213972-75943aa0-5f9e-43be-b9f9-c1c78f78023f.png)
</Frame>

### 2.3 中间画布

画布用来将组件进行排版、配置，从而完成页面的搭建，在画布中可以根据光标提示来进行拖拽布局，也可以对组件进行复制、删除操作，查看以下视频设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1635406516848-b14341b4-47dc-4d1f-8b07-269196e957fa.gif)
</Frame>

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

#### 2.4.1 属性设置

属性设置用来配置控件常用的一些属性配置，配置后在画布中的控件会实时看到配置变化的生效结果，注意动作绑定或变量绑定的结果需要在预览环境查看

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732286448-630a0ba6-f80f-4201-b457-cc59980d6751.png)
</Frame>

#### 2.4.2 样式设置面板

宜搭设计器在一些控件提供了样式配置的功能，如 图文展示 组件，更多的样式配置可以查看 [**样式设置**](/zh/yida/form/gdnsgw)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732330830-044a37d8-9c57-4b72-a61e-7e7b7f515ebd.png)
</Frame>

#### 2.4.3 高级

高级中用来配置控件一些定制化的需要

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639732638931-2530014d-a551-411c-ae42-8e1f3a45eb49.png)
</Frame>

注意

* 【是否渲染】请参考 条件渲染 介绍；
* 【循环】请参考 循环渲染 介绍；
* 【渲染唯一标识】请参考 渲染唯一标识（key） 介绍；

## 3. 常见问题

<AccordionGroup>
  <Accordion id="q1" title="Q：在自定义页面用明细组件可以关联多个表单里的子表单内容吗，然后子表单的内容再进行分页显示 ？">
    明细组件暂不支持分页。

    可以考虑使用容器组件--高级--循环渲染 + 自定义页面的分页器组件实现数据循环迭代+分页的功能。
  </Accordion>

  <Accordion id="q2" title="Q：应用内页面权限组有上限吗，最多可以配置多少个权限组？">
    除流程表单和普通表单外，其余页面最多可创建 100 个权限组，流程表单和普通表单分别可创建 100 个提交权限组、100 个查看权限组。
  </Accordion>
</AccordionGroup>