开发者学堂课程【宜搭低代码开发平台及认证教程 ：宜搭认证课程-掌握表单设计（一）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/738/detail/13111
宜搭认证课程-掌握表单设计（一）
内容介绍：
一、课程目标
二、详情介绍
三、案例详解
一、课程目标
1、熟悉宜搭的页面类型
2、掌握 Excel 新建单据
3、掌握表单设计器的功能
4、熟悉高级展示页设计器的功能
5、可以独立完成，表单搭建工作
二、详情介绍
1、基础概念
（1）页面类型
支持搭建的页面种类。
①单据页面:
基础表单类型页面。
②流程页面:
基础表单类型页面、带有审批流程。
③展示页面:
Portal 类纯展示页面类型、主要用于首页、静态页等。
④报表页面:
图表呈现类页面、数据源来源于单据、流程。
⑤外部链接:
超链接跳转。
（2）设计器
搭建和设计各种页面类型的工具。
①组件选择区:
选择页面所使用的组件。
②设计器操作/预览区:
选择组件右侧出现组件设置、组件可拖拽换布局、删除、预览效果、 保存表单，在预览区可以实时看到组件显示的情况，可以看到 pc 端和移动端的预览情况。
③组件属性设置区:
设置每个组件的标题、布局、显示状态、组件的样式设置、组件的校验设置、组件的动作设置、公式、数据联动、选项关联等。
④顶部操作栏：
快捷键、帮助信息、保存按钮等
（3）组件
构成页面的一个个元素。
①布局类:
容器、分栏、分组。
②基础类:
文本、图片、图表、链接、链接块、按钮。
③高级类:
富文本。
④表单类:
单行输入框、多行输入框、数字输入框、单选、多选、日期、日期区间、评分、上传图片、上传附件、明细、地区选择、部门选择、超链接、人员搜索框、级联选择、标签选择。
2、页面管理
（1）如何新建
新建页面-中间有快捷新建入口，同时左上角也有新建页面入口。
（2）如何编辑
找到页面，鼠标 hover 在上面，当出现齿轮时，即可看到右侧编辑按钮。
（3）如何复制
找到页面，点击复制按钮，即可快速生成一个副本。
（4）如何删除/下线
找到页面，点击删除，即可删除页面。注意：删除不可恢复，需要谨慎操作!
（5）进入操作区
输入 www.alitwork.com，登陆，点击我的应用。
新建应用，宜搭开发者认证-初级。
点击宜搭开发者认证-初级，可以看到操作界面，中间区域是操作的快捷区域，分为五大块，新建单据页面、新建流程页面、新建报表页面、新建展示页面、新建外部链接，左上角也有新建的快捷入口。
点击新建单据页面，可以看到创建空白单据，从 excel 导入。
用excel导入进行创建，首先准备 excel 文档，打开宜搭 sample 数据的 excel 表，可以看到里面有十几列数据，只有一个表单，每一列数据上面会有数据值。上传宜搭 sample 数据，上传成功后，就会进行数据的预览，可以看到工作表中只有一个 sheet 表，如果还有其他 sheet 表可以切换选择，在预览数据里面可以看到前10条数据，同时可以看到 excel 头部的标题，点击下一步。
将所有 excel 里面的 title 都罗列出来，下面是每一个 title 所对应的组件的类型，比如人群分类，可以选择单行输入框，日期可以选择日期选择框，性别选择单项选择框，再点击导入，提示4000多条数据导入成功。
快速生成一个单据页面，点击数据管理，可以看到数据已经导入成功，目前只有46条，因为导入过程是一个异步操作，需要持续几分钟，不断的点击查询，可以看到数据在新增，多重复几次，就会将4000多条数据全部导入成功。
数据管理页界面，点击设置显示字段，全选，确定。
可以看到 excel 里面所有的数据集。
点击设置查询条件，点击全选，点击确定。
可以看到每个字段作为搜索条件进行查询，比如搜索性别为男，点击查询，这时就可以看到性别为男的所有数据都被查询出来。
选择教育水平为硕士或职业为客服，点击页面，就可以预览到通过 exce l快速生成的表单，点击编辑，跳转到设计器。
3、页面搭建
（1）Excel 新建单据
①通过 Excel 文件可以快速生成单据页面。
②可以识别多个 Excel 的表单。
③每个 Excel 表单中的字段对应一个单据的组件和字段。
④Excel 的内容会自动导入存储到数据库中。
（2）页面搭建及使用
①如何设计布局
②如何使用组件
③如何配置属性
④如何使用公式
⑤如何使用数据源
⑥如何使用动作面板
⑦如何使用插件
（3）操作
新建单据页面，创建空白单据，页面名称，单据页面。
跳转到单据页面对应的设计器中，可以看到整体结构，从左到右依次是宜搭平台，logo，点击应用名称可以快速跳转到设计器应用的管理后台界面，页面名称，中间有pc端和移动端的预览切换，中英文切换，设置可以快速切换整个页面设置，快捷键会详细介绍所对应的操作，点击帮助可以跳转到帮助文档，详细介绍了设计器的功能，包括整个平台的功能，全局搜索功能，自动布局，撤销，重做，修改历史，预览，保存。
侧边栏有组件库，点击组件库就可以看到所有的组件。组件分为几大类型，有表单类组件，布局类组件，基础组件，高级组件。
数据源，可以添加变量和远程请求。
监视动作面板，可以直接输写 javascipt 代码进行页面设置。
页面管理，可以快速的进行设计器的切换，点击宜搭 sample 数据就跳转到宜搭 sample 数据单据的设计器。
最下面是页面源码，所有页面操作生成的东西都会生成在页面源码里面，页面源码记录了整个页面的属性和组件以及代码数据源等信息。
切回单据页面，右侧是 sample 属性的面板。
点击大纲树，但是由于目前页面是空的，所以暂时看不到大纲树的内容。添加组件，拖入单行输入框，大纲树也会同步显示单行输入框，再拖入数字输入框和多行输入框，就可以看到大纲树会出现三个组件的列表。
在大纲树列表里面可以进行快捷操作，拖入布局类组件里的容器组件，在大纲树中把单行输入框拖到容器组件中。按ctrl c 再按 ctrl v就可以把数字输入框再复制出一个，多行输入框右边有一个隐藏的按钮，点击隐藏，在预览区域多行输入框就被隐藏了，再点击显示，多行输入框就会被显示出来，大纲树支持组件的快捷拖动，复制，删除，粘贴以及显示隐藏的操作。
双击单行输入框，这时会进入到属性面板设置中，点击数字输入框，或多行输入框，属性面板会进行相应的切换，在属性面板中可以进行快捷操作，标题可以设置成姓名，在设计器预览区域对应的显示成姓名，右边有一个地球的小图标，点击就可以设置中英文的显示，英文改成 name。
数字输入框可以设置为年龄，英文改成 age。
把下面的数字输入框删除，再拖入一个单选组件，设置成性别，英文改成 sex，保存。
多行输入框设置为个人简介，英文改成 introduce。
表单设置成功，上面有端的预览，点击移动端，可以看到移动端的界面。
再切换成英文。
设计器支持中英文切换，同时自动适配双端，点击预览，可以看到最终的效果。
性别选项，改成男，女，也可以默认选中为男，保存。
切换到数据管理，点击新增，可以进行输入，姓名张三，年龄28，性别男，个人简介我是一名学生，刚刚参加工作，暂存就是表单比较长时无法一次性输入完全，可以先保存起来，刷新页面下次再进入时，它会记录上次为提交的内容进行加载。
点击提交。
点击查看详情，就可以看到提交的单据。
再数据管理中点击查询，可以看到提交的单据页面。
点击设置显示字段，点击全选。
点击设置查询条件，全选。
把添加的字段全部显示出来。
4、组件功能
大致了解了表单的搭建的过程以及提交，数据展示以及查询整体的流程，接下来详细介绍设计器中组件的功能。
点击左侧面板，面板中可以看到组件。
（1）单行输入框是输入单行的本文，主要用于输入类型。
（2）多行输入框是输入多行文本。
（3）数字输入框是输入数字类型，比如金额、年龄等。
（4）单选可以输入选项，像问卷调查类型里面经常会用到选项，输入型。
（5）下拉选择主要用于下拉选项选择。
（6）多选主要用于多项选择的操作。
（7）下拉多选就是下拉多项选择的操作。
（8）日期主要用于提交日期格式，年、年月、年月日、年月日时分。
（9）日期区间可以设置开始日期和结束日期，同时可以限制可选的日期。
（10）上传图片，主要用于图片上传。
（11）上传附件，主要用于文件上传，可以限制最多上传5个，格式限制pdf，txt，doc，docx，jpg，上传大小限制对外部是2g。
（12）人员搜索框，主要用于搜索人，通过人员搜索到钉钉组织架构内的任何一个。
（13）地区选择，主要选择省市区的数据，同时还支持搜索模式。
（14）部门选择，可以选择组织架构下的所有部门，也可以进行树形结构的展示，也可以进行多选。
（15）评分组件，主要用于星级评分。
（16）国家选择，支持多选和单选，搜索模式。
（17）标签组件，快速填写标签，比如苹果，香蕉，菠萝。
（18）富文本框，主要用于输入样式和格式，网页比较丰富的展示元素。比如可以输入这是一段demo文本，点击百度进行跳转。
可以对百度进行超链接。
demo 进行加粗，同时也可以设置颜色。这是富文本，可以设置一些丰富文本的形式。
可以设置丰富的，比如设置默认值，居中显示，粗体，斜体，下划线，对齐方式，插入表格，插入图片，编辑源代码，将网页源码直接粘贴进来，进行展示。
（19）超链接，主要用于提交链接供用户跳转。
（20）级联选择，是二级三级多级的选择，数据可以设置部门，产品，作为两级进行选择。
（21）明细相当于子表单的概念，在明细中可以继续拖入表单组件，明细有表格模式，可以利用表格的形式进行查看。明细具有新增一条的操作，像报销表单。
（22）布局里面有分栏，分组，容器。拖入分组，分组是为了信息的区分，基础信息，把姓名，年龄，性别，个人简介拖转到分组里面。
分栏是给页面做分栏操作，可以分成两列，三列，四列，也可以进行不等分的分列，还可以进行自定义比例，比如4:12：4：4，分栏总份数是24份就可以。
容器，可以拖入一些其他的组件，容器包裹表单组件。
（23）文本，主要是写一段话，支持样式设置，输入
:root 4{
color:red;
font-size: 20px ;
margin-top: 10px;
padding:10px;
text-decoration: underline ;
}
(24) 图片组件，用于上传图片，也可以对图片进行约束，大小值400*200。
（25）图标，在大纲树里面有上百个图标可以进行选择，可以设置图标的大小，也可以设置图标的颜色，为了给页面增加一些丰富的图标，
（26）链接，就是超链接，链接内部页面进行跳转，同时也可以url外部链接，点击预览，再点击链接就会跳转到输入的链接。
（27）链接块是个容器，可以拖入其他的元素，比如图片，修改为宽400，高200，图片被链接块所包裹，链接块也可以进行链接的跳转，新开页面，预览，点击图片就会进行跳转。链接块可以作为一个载体进行页面的跳转。
（28）按钮组件主要用于提交，按钮类型，尺寸小中大，图标，颜色，样式。
（29）富文本可以进行设置，跟上述的富文本组件一样。
5、组件所对应的属性
选中一个组件，在右边会显示组件所有的属性，标题就是设置组件的 title，输入会同步显示。显示标题是标题的显示与隐藏。横向排列和竖向排列是输入框的排列，选择横向排列就是左右布局，选择竖向排列就是上下布局，描述信息是指对组件进行额外信息的说明，比如姓名只能输入中文，点击确定，这时描述信息就会显示在组件的下方。
提示文字就是中间占位符的说明，请输入姓名。
宜搭默认的最大宽度是446px，也可以设置为100%，点击新增，可以看到预览页面，把姓名的默认状态变为禁用，将年龄设置为只读，同时默认值为30，性别设置为隐藏。
刷新预览页，可以看到姓名是灰色底带边框，不允许用户进行输入，年龄没有边框，只显示一个数值，默认值，下面本来设置的是性别，但是因为状态设置为隐藏，所以在预览页是看不到的，个人简介可以正常输入内容。
详情页会展示提交的状态，年龄设置为只读态，不允许被修改，姓名是禁用态，不允许修改，性别被隐藏，默认值为男。
默认值有数据联动和无，把状态重新设置为普通，单行输入框的默认值是默认填充的值，比如输入张三。
可以填写公式，比如想获取当前登陆人，利用公式编辑，可以看到左边的函数列表，文本函数，时间函数，逻辑函数，数字函数，其他函数，公式用法跟 excel 公式用法一样。
用其他函数，点击公式，下面会出现公式的介绍，点击确定，保存。
刷新预览页面，可以看到通过公式获取到的姓名，被填写到表单中。
除了获取当前登陆人，还可以获取当前时间，添加一个日期组件，标题设置为当前日期，默认值设置为公式编辑，获取当前的时间，用 timestamp 嵌套 today，点击确定，保存。
刷新预览页，可以看到当前的时间，2020-08-12
默认值中还有数据联动，将其他表单的数据联动过来作为默认值进行填充。添加一个下拉选择，标题设置为我的爱好，再新建一个单据页面，页面名称为我的爱好。
拖入一个单行输入框，标题为爱好，再选择数据管理页，点击新增，填写爬山，点击提交。
再点击继续提交，输入看书。
再点击继续提交，输入游泳。
在后台查询，这时可以看到输入的三条爱好。
点击我的爱好，选项，关联其他表单数据，通过选择我的爱好，点击保存，再刷新页面，可以看到我的爱好里面有三个选项。选项关联到另外一张表单的选项。
校验也是经常使用，比如姓名是必须要进行填写的，错误提示请填写您的姓名，最小长度是两个汉字，错误提示不能少于2个字，最大长度设置成8个字，错误提示最多不能超过8个字，点击保存。
这时选完必填之后会发现组件左上角有个小红点，再刷新页面，红点已经提示，把名字删除会触发必填校验，出现错误提示，输入一个字张，已经填写内容，说明必填校验通过，但是不满足最小长度的校验，输入张三，这时满足了最小长度和最大长度，合理值，如果输入五个张三，超过8个字，触发最大长度校验，出现错误提示。如果没有通过校验，是不被允许提交的，同时弹出错误提示。只有输入合法，正常提交才是可以正常通过的。
多端显示，pc 端和移动端，顶部栏有 pc 端和移动端的预览，点击移动端，比如我的爱好，只能在 pc 端显示，移动端隐藏，这时直接在右侧勾选即可，保存。
高级，每一个组件都有唯一的 id。
动作设置是主要用于设置动作函数，比如姓名，点击高级，新建一个动作，这时就有一个回调函数的填写，
export function onChange（ctx, {value} ) {
Console.log(value);
}
向控制台输入打印的值，保存，打开 console，刷新页面，删除名字，输入张三李四，这时会把输入的内容打印出来，当输入框的值发生改变时，他就会触发这个函数，执行输入输出语句，打印语句。
