宜搭认证课程-掌握表单设计(二)| 学习笔记

简介: 快速学习宜搭认证课程-掌握表单设计。

开发者学堂课程【宜搭低代码开发平台及认证教程 :宜搭认证课程-掌握表单设计(二)】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/738/detail/13111


宜搭认证课程-掌握表单设计(二)


三、案列详解

利用T恤尺码收集介绍整体的表单搭建的过程。

1、新建单据页面,页面名称 T 恤尺码收集。

image.png

2、最终要生成以下效果,两个组件,分组组件,基本信息和尺码信息。第一个分组里面有人员,性别,衣服尺码三个组件排在第一行,第二行有所在团队。在分栏设置里面有人员组件,有性别,衣服尺码。

image.png

3、拖入两个分组,第一个分组填写基本信息,第二个分组填写尺码信息。第一行使用分栏组件,将三个组件进行分栏排列,拖入分栏组件,点击布局里面的三栏,比例为6:6:12。

image.png

4、人员拖入单行输入框,性别拖入单选,衣服尺码拖入单选,单行输入框标题为人员,默认状态为只读,不允许修改,默认获取到当前登陆用户,默认值选择公式编辑,选择其他函数中 LOGINUSER,获取当前用户的姓名点击确定。

image.png

5、单选组件标题为性别,有两个选项,男,女。

image.png

6、性别左上角有个小红点,说明是必填的,校验勾选必填,错误提示请选择性别。

image.png

7、单选组件标题为衣服尺码,勾选必填,8个选项,如果一个一个填写会有些困难,可以使用关联其它表单数据。新建单据页面,从 excel 导入,上传T恤尺码统计员工数据,第一个表单是人员信息,第二个表单是所在部门,第三个表单是衣服尺码,第四个表单是女款,第五个表单是男款。

image.png

8、需要导入尺码信息,选择衣服尺码,点击下一步,点击导入。

image.png

9、名称修改为衣服尺码。

image.png

10、查看数据管理页,全选,可以看到衣服尺码都已经被导入进来。

image.png

11、切换到T恤尺码收集设计器,通过关联其它表单数据,衣服尺码,点击保存。

image.png

12、预览,衣服尺码已经被联动出来,人员也被自动获取。

image.png

13、所在团队也是拖入单选组件,可以看到它没有在分栏里面,可以通过大纲树操作进行矫正,把它拖入分栏中即可,如果拖动组件不好操作,就可以在大纲树进行调试。

image.png

14、所在团队的数据也可以通过关联表单联动过来,勾选必填,错误提示请选择团队。

image.png

15、新建单据页面,从 excel 导入,T恤尺码统计员工数据,选择所在部门,点击下一步,完成,名字修改成所在部门。数据管理页,设置显示字段,点击所在部门,点击确定,可以看到部门全部导入进来。

image.png

16、回到尺码收集页面,点击选项,关联其他表单数据,所在部门,保存,预览,可以看到所在部门全部关联过来。

image.png

17、设置所在团队的宽度,最大宽度100%,保存,预览。

image.png

18、衣服尺码有男款和女款,当选择性别时衣服尺码照片会进行联动显示,当选择男时,图片是男款图片,当选择女时,图片是女款图片。在设计器中,点击尺码信息分组,拖入一个容器,因为容器是一个载体,里面可以拖入其他的组件,把图片拖入大纲树容器中,把容器再复制粘贴一个,给第一个容器命名为男性尺码,给第二个容器命名为女性尺码,点击第一个图片,上传图片地址,男款,切到大纲树,点击第二个图片,上传女款图片地址。

image.png

19、点击性别,选项,关联选项设置,当选择不同选项时,自定义一些规则,让组件进行显示隐藏,点击关联选项规则,当选项为男时,显示男性尺码,当选项为女时,选择女性尺码,点击确定,保存。

image.png

20、预览,选择男,出现男的图片,选择女,出现女的图片。

image.png

21、性别选项,默认选择男,保存。

image.png

22、切换到T恤尺码收集,点击数据管理,点击新增,选择基础运维部,男L,点击提交。查看详情,可以看到提交的信息。

image.png

23、应用成功后,要进行上线和下线,点击设置,提交规则,勾选同一个账号只能提交一次。

image.png

24、点击分享设置,输入 t-shirts,点击免登提交,免费访问位置输入 t-shirts,保存。

image.png

25、其他同事就可以进入短链提交表单,用于搜集他的信息。

image.png

相关文章
|
4月前
|
BI
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
229 0
|
4月前
|
人工智能 自然语言处理 数据挖掘
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
「宜搭AI」开放新一期功能:智能数据分析、智能表单,已支持在宜搭网页端使用体验。
275 0
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
|
3月前
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动
|
5月前
|
安全
宜搭普通表单内可以添加外部链接的页面吗
宜搭普通表单内可以添加外部链接的页面吗
71 0
|
8月前
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
457 1
|
8月前
宜搭中,通过代码赋值后触发子表单的多行公式编辑
宜搭中,通过代码赋值后触发子表单的多行公式编辑
246 1
|
前端开发 容器
宜搭子表单的css设置
可以通过css的方式修改宜搭子表单的字体,行高,行间距等,仅提供个人操作供参考,具体情况请亲自测试再评价测试
341 1
宜搭子表单的css设置
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
宜搭子表单点击新增自动展开最后一项,折叠前面所有项. by 页一
670 0
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
宜搭高级开发师认证模拟题
五年高考,三年模拟
1631 1
宜搭高级开发师认证模拟题
|
前端开发 搜索推荐 JavaScript

热门文章

最新文章