自定义页面设计器简介

​

1. 使用场景

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

​

2. 整体介绍

自定义页面设计器整体分为「顶部操作栏」「左侧工具栏」「中间画布」「右侧属性配置面板」这四个部分 表单编辑页面 下面会详细介绍这四个部分里的功能

​

2.1 顶部操作栏

​

2.1.1 页面设置

参考 页面设置 说明

​

2.1.2 快捷键

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

​

2.1.3 历史记录

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

​

2.2 左侧工具栏

​

2.2.1 大纲树

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

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

查看以下视频进行设置

​

2.2.2 组件库

点击组件库里的组件拖拽到画布中或大纲树中的指定位置 查看以下视频进行设置

​

2.2.3 区块模板

区块模板是为了提高 设计效率 而存在，合理地使用模板和区块能够提高日常页面设计中的效率，并遵循合理的设计范式，更多可查看 区块模板

​

2.2.4 数据源

数据源可以声明一个变量或者一个远程变量，用于动态展示一些数据使用 在控件的属性配置上可以进行对数据源的数据绑定，更多可以查看数据源面板

​

2.2.5 动作面板

动作面板可以用来编写 JavaScript 代码，来实现一些更定制化的需求 更多可以查看动作面板

​

2.2.6 国际化面板

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

​

2.3 中间画布

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

​

2.4 右侧属性配置面板

​

2.4.1 属性设置

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

​

2.4.2 样式设置面板

宜搭设计器在一些控件提供了样式配置的功能，如 图文展示 组件，更多的样式配置可以查看 样式设置

​

2.4.3 高级

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

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

​

3. 常见问题