开发者学堂课程【宜搭低代码开发平台及认证教程 :宜搭认证课程-掌握表单设计(一)】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址: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,刷新页面,删除名字,输入张三李四,这时会把输入的内容打印出来,当输入框的值发生改变时,他就会触发这个函数,执行输入输出语句,打印语句。