宜搭是阿里巴巴自研的低代码应用构建平台,通过可视化拖拽的方式,传统模式下需要2 周才能完成开发的应用,用宜搭2 小时就能完成。
那么低代码是个什么东西呢?顾名思义,低代码就是少写代码,用户通过可视化地拖拉拽、配置等比coding门槛低的手段来开发应用,但是低代码平台的核心价值真的是少写代码吗?其实并不然,低代码应用平台的核心价值在于运行应用所依赖的基础架构,改变了应用交付和管理的模式,大幅缩减交付周期,最终帮助业务加速创新。也就是说如果低代码平台的打造核心一直盯着少写代码的话,产品很大概率会走偏。
如果你是不会代码的普通员工,深刻了解业务但却厌倦了求人做开发的日子,在宜搭你将拥有一个全新的身份——「低代码开发者」。我们通过以下的5大功能,就能高效搭建我们需要的应用,这里还顺便提一点,由于宜搭是附属在钉钉+的生态上的,它比起普通的低代码平台会少了很多麻烦,因为宜搭是和钉钉做了配套使用的,所以一般的低代码平台建设是需要考虑更多的,就是如何打造生态或者如何接入第三方生态,说白一点就是如何建设用户体系。
「表单」:填报数据,不需要审核确认,并带有数据协作功能,如修改、删除、导入、导出;还可以给不同的人不同的管理权限;
「流程表单」:填报数据,并带有流程审批功能,适合报销、请假申请或其他工作流;
「报表」:可以进行数据分析、结果展示等功能,如数据汇总、趋势分析;
「自定义页面」:通过低代码搭建展现任何类型的自定义页,借助数据源或更丰富的组件实现应用Portal、复杂业务场景页;
「外部链接」:在当前应用中将已存在的外部系统直接进行展示。
那我们要做一个人事服务系统,按以下的功能结构图,都需要用到它的哪些功能模块,接下来我们按我们人事服务系统的需求,来解剖一下有用到的宜搭的各个模块。
以办公信息-办公地址为例,我们需要创建一个【办公地址】的表单页,办公地址下面有:
1、办公点名称-文本输入框
2、地址-选择器
3、详细地址-文本输入框
对于地址这个信息,我们可以看到宜搭提供了【国家/地区】、【地址】两种组件,不熟悉这种名称定义的,建议就两个组件都拉出来,然后通过预览尝试一下效果,就能知道【国家/地区】实际是个国家级别的选择器,所以我们要用的是【地址】选择器;
宜搭在【地址】这里还是很贴心的,【地址】选择器自带了省市区街道多组合类型的设置,一定程度降低了用户的耗时,可惜他不支持搜索(用户无法直接配置实现搜索效果);
另外用户可以通过【级联选择】这个组件进行自定义数据源编辑实现省市区多级联动,使用【级联选择】组件的数据源编辑功能,点开就能看到示例,不懂技术没有关系,类比总是会的吧,他用了这个json结构能生成对应的选项,那我们就可以根据他的这个结构去调整修改成我们需要的选项:
献上我不规范的JSON:
[ { "value": "GD", "label": "广东省", "children": [ { "value": "sz", "label": "深圳市", "children": [ { "value": "ns", "label": "南山区" }, { "value": "ft", "label": "福田区" } ] }, { "value": "GZ", "label": "广州市", "children": [ { "value": "lw", "label": "荔湾区" }, { "value": "th", "label": "天河区" } ] } ] }, { "value": "SH", "label": "上海", "children": [ { "value": "sh", "label": "上海市", "children": [ { "value": "xh", "label": "徐汇区" }, { "value": "pd", "label": "浦东新区" } ] } ] } ]
▲ 广东省/深圳市/....正是我修改数据源后得到的选项
好,如此类推我们编辑好了这个人事服务系统的所有表单页,现在我们来看表单录入完之后的数据怎么管理,一般我们做web端系统就需要做一个表单页,再加一个列表页来对表单的数据进行统筹管理,对于这种情况宜搭有个快速通道 ——【创建管理页】,在这里可以一键创建对应表单页详情的管理列表,虽然粗暴,但是内容却十分齐全,基本能覆盖简单列表80%-90%的能力,以下为列表页三大能力特点的介绍:
1、CRUD基本齐全,其中R展开说说
查询 ——可以设置查询条件,宜搭会根据你选择的字段(表单页创建的组件类型)来生产对应组件类型的查询条件,比如用户选择的是【办公点名称】字段,它在表单页是一个文本输入框,所以这里自动生产的查询条件是一个文本搜索框,支持输入文本进行对应字段的文本匹配,其他查询条件同理;
列表展示 ——可以设置需要查看的字段,也就是表单页每个录入的字段
2、支持列表数据的导出导入
3、自带操作日志
那创建好了表单和列表,用户如何实现业务流动线呢?具体的业务领域不详述,通过表单一键生成的列表已经自带了表单新增与编辑,此时只需要将表单页隐藏起来,然后通过列表的「新增」、「编辑」来“打开”我们隐藏起来的表单页,即可实现在列表创建并且管理数据的业务场景。
想要实现表单的联动也是比较简单,也就是表单提交之后再进入详情页编辑怎么处理,宜搭是通过权限来设置从列表页跳转进表单是否可以编辑,以及设置在点击编辑按钮后的行为(点击编辑按钮之后表单页就是「提交状态」,此时可以设置此状态下的全部字段的状态,比如A字段只读,B字段隐藏之类的......这些都是通过【权限设置】这个入口进行设置)。
首先来看我们的人事服务系统那些地方需要用到它,会是一些用户提交了数据之后需要走审批流程的场景需要用【流程表单】,这里我们以「落户申请」表单页为例,主要展示审批的能力;
宜搭的流程表单只是比表单多了一个审批流,他并不是给你创建业务流程表单的意思,它将在表单提交后需要的审批流程内置到了这个功能里面,其余设计与表单基本无异;我们可以从上面看到业务单独给流程表单配置了一个审批流程设计器,不敢说100%,但是基本人员审批节点与消息通知抄送都是覆盖了的,这里也和大家推荐一下,别的系统的审批流程如果想做到高度配置化处理,参考这种设计就挺好的;因为宜搭新旧版的审批流我都体验过,这个截图是新的审批流(现在新创建的页面都是新的审批流,旧版的审批流可以通过宜搭现有的模版进行体验),也是我自己做流程设计工具会用的设计,强烈推荐。
最后人事服务系统基本成型了,如何来制作这个人事服务系统的首页,也就是我们常说的工作台/驾驶舱,先理解这个工作台驾驶舱要做些什么,我们才好去学怎么用宜搭来实现【工作台/驾驶舱】;一般首页就是做一些待办、通知等的快捷入口,有需求可以带一下汇总数据以供用户快速响应工作,那我们这个人事服务系统的首页就通过简单的便捷入口进行讲解:
首先创建页面我们来选择【新建自定义页面】,然后宜搭会跳转到选择页面模版,里面有“首页工作台”的分类,从缩略图我们可以看到我们想要的“首页”应该对应哪个模版,于是我们选择了“工作台模版1”,为什么我这里又不自己创建了而是要选择模版,其实宜搭的模版都能通过它提供的组件拼装出来的,所以这里是想教下大家通过模版更快地来学习低代码平台,模版就是最好的模仿教程,看以下模版上都是用了哪些组件来进行拼装成页面的,那以后设计页面的时候就可以不需要模版,通过拖拉拽组件就能生成自己的页面。
我们可以看到工作台模版自带了三个数据汇总,可以看出来这三个数据与表单数据还有审批流设置相关,那我一个都还没运行的系统怎么会马上就有数值呢?作为一个的低代码平台“专家”,马上就能反映过来,这里的文本是需要设置取值逻辑的;同理,下面各式各样的快捷入口也需要设置相对应的跳转链接;别问我为什么知道,页面上一个个组件地点击,然后右侧的属性面包一个个地看,再愚笨都能知道,聪明的各位就直接心领神会即可~
从图中我们可以看出想做到数据统计设置,就必须用到组件属性的“变量”设置,不懂代码也没有关系,其实宜搭已经针对几个场景做了预设的统计数据源,比如这个【待我处理】,它对应的变量就是"state.getTodoTasks",对应就是获取用户的待办数据(这个是宜搭预设的变量),然后我们这里需要的是待办数据的总数,结合JS语法修改这个变量,最后让我们的文本组件绑定上这个变量,那么在运行时既可以做到一个数据统计的效果
一般首页的快捷入口都是通过跳链来处理,宜搭这里提供了【链接块】的组件,支持系统内部页面选择以及外部链接设置,设置完之后只需要点击链接块范围内的热区即可实现跳链的效果
结语:宜搭结合了钉钉+生态,的确对于应用了钉钉的企业来说,是一个生产力尖刀,不需要去额外处理自研系统与钉钉的api对接,因为宜搭生产的系统天然就跟钉钉连接起来了;至于用户体验是一个持续迭代的过程,希望宜搭往后的使用门槛越来越低!也希望有更多资源涌入低代码这类赛道,为数字化出份力!