开发者学堂课程【宜搭低代码开发认证教程： 宜搭认证课程-掌握表单设计（二）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/299/detail/3500
宜搭认证课程-掌握表单设计（二）
要查询性别为男，职业为客服的数据
显示数据集
点击页面，预览生成的表单，并点击编辑按钮，就会跳转到编辑器中。
3、页面搭建
Excel 新建单据
• 通过 Excel 文件可以快速生成单据页面
• 可以识别多个 Excel 的表单
• 每个 Excel 表单中的字段对应一个单据的组件和字段
• Excel的内容会自动导入存储到数据库中
页面搭建及使用
新建一个单据页面，新建一个空白单据
表单搭建
设计器整体结构
顶部栏：
左侧栏：
组件库分为表单内容类组件、布局类组件、基础类组件、高级组件
数据源可以添加变量和远程请求
JS 动作面板，可以直接写 JavaScript 代码直接写页面设计
JavaScript 代码：function printLog(obj) {
console.info(obj);
}
页面管理 点击页面管理可以进行一个快速的切换
点击宜搭 Sample 数据后可以快速切换
页面源码—记录了所有的属性和组件及代码数据源这些信息
右侧栏：属性面板
大纲树展示（通过输入组件来同步大纲树）：
在大纲树中能进行一些快捷操作，例如拖入，复制粘贴，显示隐藏
例如将单行输入框拖入一个容器中，单行组件就会位于容器组件中
将数字输入框进行复制粘贴，将多行输入框隐藏，预览区输入框就会被隐藏
双击输入框进入属性面板设置，进入不同输入框属性面板会有一定的不同区别。
在属性面板上可以进行一些快捷设置，例如设置标题
将标题换成姓名、年龄、性别、个人简介等
PC端、移动端、中英文预览
提交及暂存
暂存可以暂时保存录入信息，再次进入时未提交内容可以加载出已填信息。
提交后单据，点击查询后即可看到单据信息。
各个组件的作用
• 单行输入框—主要输入单行文本
• 多行输入框—主要输入多行文本
• 数字输入框—主要输入数字类型
• 单选输入框—主要输入单选类型
• 下拉选择框—主要用于选项选择
• 多选—主要进行多项选择的操作
• 下拉多选框—主要进行下拉选择多项操作
• 日期—主要用于提交日期格式
• 日期区间类型—用于设定时间段，限制可选日期
• 上传图片、附件—用于上传图片附件并限制数量与格式
• 人员搜索框—可以搜索到组织架构内的任何人
• 地区选择—主要用于选择省市区的数据，同时支持搜索模式
• 部门选择—可以选择组织架构下的部门，支持搜索模式，并进行树形展示，也可以多选
• 评分组件—用于评分
• 国家组件—用于选择国家，支持单选与多选
• 标签组件—可以快速填写标签
• 富文本框—主要用于输入一些带有样式的、一些网页中比较丰富的展示元素，可以输入一些链接、文字等，在文字上设置超链接，设置文字颜色等。插入表格，设置格式，看源代码等
• 超链接—用于提交一些链接，供用户进行跳转
• 级联选择—是一个支持二级三级甚至多级的一个选择
• 明细—相当于子表单的概念，在明细中可以拖入一些表单组件，也有表格模式，具有新增一条的操作
• 分组—一般为了进行基础信息的区分，在大纲树中可折叠展开
基本信息的分组
• 分栏—给页面做分栏操作，可分四列，可进行自定义比例分栏，也是一个容器，可拖入其他组件
• 容器—在容器中可以拖入其他组件
• 文本—写一些文本类，一段话，同时支持一些样式设置
输入样式设置代码后：
:root {
color: red;
font-size: 20px;
margin-top: 10px;
padding: 10px;
text-decoration: underline;
}
• 图片组件—用于上传图片进行展示，也可以对大小值进行设置
• 图标—可使用系统图标，并可以设置图标大小
• 链接—可以链接内部类，也可以链接外部类
预览结果：
跳转到百度页面：
• 链接块—可以拖入其他元素作为载体进行跳转，如用图片可进行页面的跳转
预览：
点击图片后：跳转到 Sample 数据页面
