公开课01期 | 基于宜搭的《T恤尺码收集》应用搭建-阿里云开发者社区

开发者社区> 宜搭> 正文

公开课01期 | 基于宜搭的《T恤尺码收集》应用搭建

简介: 在阿里,T恤是程序员必不可少的元素。每逢公司或者BU(部门)的重大节庆日,比如双11 、年会、新BU成立仪式、大型活动等,都会给员工定制发放统一的T恤或者POLO衫服装。而我们每次发放T恤之前,有一步必不可少的就是收集员工的T恤尺码。

公开课视频回放

TB1NMiql4z1gK0jSZSgXXavwpXa-683-384.png

一、产品介绍

宜搭:人人搭建、人人使用。应用搭建,从未如此简单。

宜搭平台的命名取适宜搭建、容易搭建之意。平台集合了页面设计、业务规则定义、数据收集与分析三大核心能力,用户通过简单的拖拽、配置,即可完成业务应用的搭建。同时,平台还具备一次搭建双端适配、权限独立设置、定制消息提醒推送及海量信息存储等特性。旨在为广大中小企业提供一套低成本的企业应用搭建解决方案。

宜搭平台可支持信息发布、知识管理、Portal整合、数据管理、流程审批、移动办公等各种办公应用场景。
具体业务场景如:报名登记、调查问卷、财务管理、人力资源管理、行政管理、资产管理、客户管理、工作流转、任务审批等等。

产品文档:https://help.aliyun.com/product/109414.html

二、需求说明

在阿里,T恤是程序员必不可少的元素。每逢公司或者BU(部门)的重大节庆日,比如双11 、年会、新BU成立仪式、大型活动等,都会给员工定制发放统一的T恤或者POLO衫服装。

image.png

现实生活中,基本上每家企业都会给自己的员工发放T恤或者员工厂服,而企业给员工发放T恤,作用也是不言而喻的。

  1. 树立企业形象。在市场竞争中具有优秀形象的企业更容易在众多对手里脱颖而出,更容易得到客户的认可。
  2. 创造独特的企业文化。成熟的企业都有着自己独特的企业文化,不同企业文化熏陶下的员工,个性鲜明,工作状态更有激情。
  3. 统一企业形象,树立企业品牌。企业的发展离不开品牌塑造。
  4. 提高企业凝聚力。
  5. T恤衫宣传作用,广告无处不在。
  6. 员工可以尽快进入工作状态,规范员工行为。

而我们每次发放T恤之前,有一步必不可少的就是收集员工的T恤尺码。对于每一种不同的服装,比如T恤、POLO衫、套头衫等,它们的生产尺码都是不一样的。如果需要节约企业成本,定制生产,我们就需要提前收集员工的具体衣服尺码。我们需要知道男女分别多少件、各种尺码分别多少件、每个部门应该怎么分配等等。

搭建这样的一个收集应用,里面除了表单,还需要有各种各样的报表,进行数据的呈现和统计。而宜搭作为天然的表单报表搭建平台,可以做到0代码搭建,轻松搞定。相比传统的Excel收集方法,可以大大节省人力和时间成本。

三、流程图例

下面,我们来看一下用宜搭搭建《T恤尺码收集》应用的基本流程。

T恤尺码收集.jpg

在流程中,有三种角色,分别是应用管理员、员工(用户)、T恤操作员。

  • 应用管理员:搭建应用、搭建表单、录入部门信息、创建数据报表、分享表单链接。
  • 员工(用户):提交自己的T恤尺码信息。
  • T恤操作员:查看统计数据,发放T恤。

四、搭建表单

接下来,我们就开始按照上述流程一步一步搭建应用。

1. 创建应用

访问宜搭官网 https://www.aliwork.com,利用钉钉扫码登录到自己的企业。

切换到“创建应用”页面,点击“创建新应用”按钮,在弹出的对话框中,填入应用名字《T恤尺码收集》,然后点击“确定”按钮。

image.png

应用创建好之后,会自动跳转到应用的管理后台。

2. 创建表单

点击“新建单据页面”,再点击“创建空白单据”按钮,然后填入“T恤尺码收集”的单据名字。

image.png

创建好单据页面之后,会自动跳转到表单设计器里面,如下图所示:

image.png

接下来,我们按照右边大纲树的结构,拖入相对应的组件到设计器中。

image.png

组件详细的配置如下:

分栏组件,按照“4:6:14”的比例进行三列划分。

image.png

人员搜索框组件(提交人),设置为“只读”态,然后默认值采用“公式编辑”,插入“USER()”获取当前登录人的信息,多选则去掉。

image.png

image.png

单选组件(性别),添加“男”和“女”两个选项,同时选择“关联选项设置”,当选项为“男”时,显示包裹男性尺码图片的“容器M”,当选项为“女”时,显示包裹女性尺码图片的“容器W”。

image.png

image.png

单选组件(衣服尺码):设置选项为红框列表中的选项即可。

image.png

单选组件(所在团队):选项设置“关联其它表单数据”,这时候我们需要新创建一张用于输入“团队信息”的表单。

image.png

新创建一个单据页面,名字叫“团队信息录入”,然后拖入一个“单行输入框”组件,取名为“所在团队”,设置为“必填”校验即可。

image.png

image.png

这时候,我们再来关联上“团队信息录入 -> 所在团队”的字段,这样后面“团队信息录入”中填写的数据就会作为“所在团队”的选项值出现。

image.png

3. 录入部门信息

点击“团队信息录入”页面,然后切换到“数据管理”页,再点击“新增”按钮,会跳转添加团队信息的录入页面。

image.png

如果这时候出现「应用未上线,不能执行“提交”操作」的话,需要我们在管理后台,点击顶栏的“上线”按钮,然后点击“确定”,应用上线后,就可以添加数据了。

image.png

image.png

添加部门信息。

image.png

部门信息添加完成后,我们切换到“数据管理”页面,点击表格右上方的“齿轮”按钮,然后将“所在团队”勾选上,再点击“确定”,最后我们就能看到所提交的团队信息了。

image.png

image.png

image.png

这时候,再切换到“T恤尺码收集”的表单页面,就能看到“所在团队”已经将“团队信息录入”的数据全部关联过来了。

image.png

4. 设置编辑权限

因为T恤尺码每个人只能提交一次,所以需要将“提交规则”设置为“同一账号仅能提交一次”,然后点击“保存”按钮保存。

image.png

接下来,切换到“设置 -> 权限设置 -> 添加权限组”,填入权限组名称,并将“查看状态”下的“性别”、“衣服尺码”、“所在团队”三个字段设置为“可编辑”,再点击“确定”按钮保存。

image.png

最后,点击“添加人员”按钮,将创建人勾选上,并点击“确定”保存,这样我们的提交一次和编辑权限就设定完成了。

image.png

image.png

5. 分享表单链接

切换到“分享设置”,填入“tshirt”的短链名字,再点击“保存”按钮保存。最后点击“复制链接”的小图标,将链接复制好后,发送给公司的钉钉群中,让所有员工进行T恤尺码信息填写。

image.png

至此,所有的表单提交的部分就设置完了。

当所有员工的信息都提交完毕后,我们再“T恤尺码收集”的后台数据管理,就可以看到所有的提交数据。

image.png

这时候,我们点击表格右上方的“创建管理页”,点击“保存”按钮,可以创建一个管理页面,这样前台用户也能看到全员提交的数据了。

image.png

image.png

五、数据报表

信息收集完成后,我们开始制作一些数据报表来统计数据,让体感更加清晰明了。

首先,新建一个报表页面,名字叫做“统计表”

image.png

然后,同表单页面一样,按照右边大纲树的组件排列结构,将相对应的组件拖入到设计器中。

我们报表包括:

  • 顶部查询:可以精确查询团队、性别和衣服尺码等维度;
  • 数据看板:统计提交人数、提交团队数和各种尺码的总件数等;
  • 分团队尺码维度数据信息表:细分每个团队每种尺码的总件数分布;
  • 尺寸数分布统计饼图:将“分团队尺码维度数据信息表”中的每个团队需要的T恤总数统计出来,并且饼图区块可点击,点击进去之后,会展示团队对应的具体衣服尺码的分类数;
  • 男女数分布统计饼图:统计男女性别分类的总数,同时饼图区块可点击,点击进去之后,会展示性别对应的具体衣服尺码的分类数;
  • 分团队尺码维度数量柱形图:将“分团队尺码维度数据信息表”中的数据以柱形图的形式进行统计展示,比较直观的看到具体分布;
  • 详细信息表:将“T恤尺码收集”提交的数据集进行详细的表格展示,同时也可以导出为Excel,方面对数据进行二次加工处理。

image.png

1. 顶部查询

首先,分栏采用三栏布局。

image.png

然后,拖入一个“筛选”组件,并取名为“团队”,选择数据集为“T恤尺码收集”表单,值选择对应的“所在团队”,默认值会自动带出来。

这样,团队筛选组件的选项就会罗列“所在团队”的所有值,而且可搜索。性别和衣服尺码同样操作即可。

image.png

2. 数据看板

数据看板设置每行个数为 5 个。其它一些基础设置,可以自己摸索着玩。

image.png

选择数据集为“T恤尺码收集”,然后指标字段,前两项选择T恤尺码收集里面的“提交人”和“所在团队”字段,并设置聚合操作为“计数(去重)”。

image.png

image.png

后面八项全部采用公式设置,利用 COUNT 函数对衣服的各种尺码进行计数。

image.png

image.png

3. 分团队尺码维度数量信息表

选择数据集“T恤尺码收集”,然后选择列字段为“所在团队”、“衣服尺码”、“发起人工号”,其中“所在团队”采用降序排列,“衣服尺码”采用升序排列,“发起人工号”采用计数的聚合操作,并修改名字为“计数”

image.png

image.png

image.png

4. 尺寸数分布统计饼图

选择数据集为“T恤尺码收集”,然后分类选择“所在团队”,序列选择“提交人”,按照升序排列,并采用计数的聚合操作。其中,“所在团队”,配置它的钻取为“衣服尺码”,这样,当点击饼图区块的时候,就能看到详细的尺码统计。

男女数分布统计同理。

image.png

image.png

5. 分团队尺码维度数量柱形图

柱形图,选择数据集为“T恤尺码收集”,分类选择“所在团队”,序列选择“提交人”,并采用“计数”的统计,序列分组选择“衣服尺码”作为分组标识。

image.png

6. 详细信息表

详细信息表,选择数据集为“T恤尺码收集”表,然后字段添加“所在团队”、“性别”、“衣服尺码”、“提交人”、“流水号”等字段,其中所有的字段均设置为“不自动合并”。

image.png

image.png

六、数据查看

报表页面搭建完成后,配合之前团队提交的数据,我们切换到用户态进行查看,点击“统计表”页面,就可以看到具体的报表信息了。

image.png

1. 精确查询

1.1 按“团队”维度进行查询

image.png

1.2 按“性别”维度进行查询

image.png

1.3 按“衣服尺码”维度进行查询

image.png

2. 数据看板

image.png

3. 分团队尺码维度数据信息表


image.png**
image.png

4. 尺寸数分布统计饼图

image.png

点击下钻后的部门详细尺码分布,以“基础运维部”为例。

image.png

5. 男女数分布统计饼图


image.png
点击下钻后的部门详细尺码分布,以“男”性为例。

image.png

6. 分团队尺码维度数量柱形图


image.png

7. 详细信息表

image.png

点击最优栏的“流水号”链接,还可以查看具体的表单提交信息:

image.png

七、功能扩展

除了上述基本的功能和需求外,利用宜搭还可以做一些扩展和进一步细化的功能点,比如:

  • 如何实现性别、部门信息、款式图片的默认联动?

当用户打开页面后,除了自动获取当前登录人信息外,还可以自动识别性别并选中,并将部门信息关联带出来。

  • 如何实现批量导入表单数据?

当有的部门线下已经收集了一部分数据,需要批量导入到表单中。

  • 如何实现批量修改表单数据?

如果批量导入的数据出现有一个字段填写错误,或者我们表单新增了一个字段,这时候需要批量对用户的数据进行修改。

  • 如何创建并发布英文版本?

假设团队中有员工是外籍英文用户,他们使用的是英文界面的宜搭,我们需要设计英文版本的表单。

  • 如何按自动流程发放T恤,并通知到具体的员工?

在发放T恤的过程中,需要用到流程通知和发放流程确认。

  • 如何实现员工取完T恤后,库存T恤的数据相应的减1?

在员工领取完T恤并确认好流程之后,表单中的数量应该自动减1。

  • 如何统计已发放和未发放的人数、姓名及数量等?

在发放的过程中,我们需要每天统计一下已发放和未发放的人数等信息,然后再次发送消息通知。

  • 如何制作成模板并分发给其它应用使用?

当我们的应用搭建比较完整,并且其它团队和场景也需要使用到相同的应用时,我们就可以将它制作成模板并进行分发。

在下一篇文章中,我们将上述的功能详尽的一步一步实现出来,继续扩展并完善本收集应用。

八、项目总结

麻雀虽小,五脏俱全。当我们搭建一个应用的时候,都需要首先了解搭建平台的功能和架构,是否能够满足我们的需求,然后根据我们的业务需求,将业务流程图画出来,再一步一步根据平台的帮助文档,将整个应用进行搭建。如果有任何问题,都可以在答疑群里面咨询相关的技术人员。

宜搭具有强大的表单收集、数据收集和报表展示能力,这些都需要我们逐步去学习和深挖,配合帮助文档,可以轻松上手并0代码搭建出功能丰满的应用。

九、附录

男款尺码图片素材(右键另存为可保存到本地)
image.png

女款尺码图片素材(右键另存为可保存到本地)
image.png

数据 Excel 表

T恤尺码统计员工数据.xlsx

精彩内容推荐

宜搭公开课02期 | 客户关系管理CRM应用搭建
免费下载 | 《0代码,搭应用》宜搭白皮书首发


宜搭社区动态.gif

版权声明:本文中所有内容均属于阿里云开发者社区所有,任何媒体、网站或个人未经阿里云开发者社区协议授权不得转载、链接、转贴或以其他方式复制发布/发表。申请授权请邮件developerteam@list.alibaba-inc.com,已获得阿里云开发者社区协议授权的媒体、网站,在转载使用时必须注明"稿件来源:阿里云开发者社区,原文作者姓名",违者本社区将依法追究责任。 如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
宜搭
使用钉钉扫一扫加入圈子
+ 订阅

宜搭是阿里自研的0代码/低代码应用搭建平台。通过可视化拖拽的方式,让普通人轻松搭建出自己想要的应用。传统模式下需要13天完成的应用,用宜搭2小时便可完成。

官方博客
官网链接