宜搭低代码开发初体验(0代码图文demo)

avatar
前端菜鸡 @荣怀

什么是宜搭

宜搭是阿里巴巴自主研发的低代码应用开发平台,宜搭具备高度的灵活性和适应性,在应用搭建过程中,宜搭还提供了丰富的组件和模板,能够快速构建高质量、可靠的应用。

更多介绍,可看官方说明:docs.aliwork.com/docs/yida_s…

宜搭能解决什么

只要你熟悉业务流程,只要你有搭建应用的构思,在宜搭平台上,你可以只用掌握 0 代码或少量代码,就开发定制你的个性化应用。

  • 通过可视化拖拉拽,完成应用的布局和设置,所见即所得
  • 通过对话式的命令行,完成应用内不同模块的逻辑关联,实现数据超融合
  • 搭建的审批流关联钉钉组织架构,也可自定义审批人,实现管理精细化,无纸化
  • 提供多种关联与跳转配置,数据间自由切换,并相互校验,使应用轻易获得强大交互能力。
  • 多种打开路径(钉钉内置应用、浏览器网页登录),摆脱空间、设备限制,极大提高便利性。

开始学习

钉钉账号创建与登录默认大家已经做好前置准备了,这里不再做更多说明,如果有需要可以去宜搭网站进行登录处理:csz7kl.aliwork.com/workPlatfor…

需求背景

用于学生向老师咨询问题的简单答疑页面。

流程为: 学生提问--》根据问题类型分配老师----》老师解答。

⚠️⚠️ 值得注意的是,宜搭里面,不同的流程我们往往都是在一张表单里面搭建,只不过是根据,不同节点,对表单的内容根据流程节点进行隐藏展示处理。

需求理解后,开始进行页面搭建。

1.创建应用:简单线上答疑

2.创建普通流程表单,记得修改表单名字(例如:线上答疑),进入编辑状态

⚠️⚠️ 涉及到流程流转,创建的时候需要用流程表单

image.png

进入编辑

image.png

3.表单内容编辑

  • 设置学生提问分组内容

    image.png
  • 拖入表单元素(右侧属性面板里面有详细参数设置)

    单选框以及多行文本

image.png
  • 设置教师答疑分组以及表单内容

    最后加上必填校验,表单呈现如下:

image.png

表单修改,记得及时保存。想看效果可以点击页面右上角预览查看。

❕❕到目前为止,学生提问-老师答题都有了,那怎么分配老师呢 分配老师需要维护不同的老师负责的类型对应表,那么我们可以新建一个老师管理底表。

4.新建老师管理底表(普通表单)

表单搭件

  • 选择老师(成员组件)
  • 负责范围(子表单)方便设置老师多个负责范围

image.png

表单内容创建后,提交时增加唯一性校验,防止重复添加

表单设置,添加公式如下:

  • 添加公式
image.png
  • 设置公式后,拉到校验底部,可添加阻断提示文案:

image.png

宜搭提供了丰富的校验函数,用于不同的场景。右侧都有详细说明可以查看。

数据管理,新建一条底表数据

image.png

新增底表

image.png

负责范围选择情感咨询和学习咨询,结果新增了一条数据

image.png

🚩🚩此处数据存在一对多的关系(一个老师对应多个负责范围),在做数据筛选的时候不方便,这时,我们通常会建一个一对一关系的db表,用于同步底表数据。

创建DB表单

  • 表单内容与老师管理底表一一对应
image.png

如何同步老师管理底表的数据到db表单呢

同步数据

  • 回到老师管理底表,在表单设置里面,对应的表单时间,增加公式执行
image.png

具体规则如下:

image.png

以上规则表示:

  • 单据提交
    • 插入处理。将老师管理底表新增的数据同步插入到DB 表中,字段一一对应
  • 单据删除
    • 删除老师管理底表中的数据的同时,删除DB表中与底表里面选择老师字段相同的数据
  • 单据编辑
    • 更新DB表中的数据,其中那条数据的选择老师字段雨负责范围字段与底表中的字段一一对应相等。

老师管理底表重新新增一条一对多的数据,DB表会同步如下数据:

注意:表单变更后,原来生成的数据不会自动更新同步,需要新增数据或者编辑原来的数据才会同步最新的表单结构

image.png

5.流程表单完善

目前为止,老师管理表单设计完成。但还存在一个问题。

🤔️ 学生发起问题后,不同的问题类型,有不同的老师数据可供选择,那么在流程中,这些老师数据从哪里取呢?

一般我们会在表单中,增加一个隐藏字段,用于记录这类筛选结果,这里新增了一个成员字段,该成员字段的默认值选择数据联动,后面流程里面还会提到。

image.png

联动设置为:

image.png

🚩🚩 注意!!隐藏字段记得在高级设置中,设置为始终提交,这样,才能在后续流程中应用到这个取值。

image.png

6.流程设计

  • 创建新流程
image.png
  • 发起节点设置

    发起人(学生)只需要展示学生提问环节表单内容,其余隐藏。

image.png
  • 审批环节设置如下:

审批人,设置为表单内成员字段,就是上面我们隐藏的联动出来的老师数据

image.png

不需要展示的字段,隐藏,非当前环节只需展示的,可设置为只读

image.png
  • 最后添加抄送节点,节点内容全部只读(除隐藏字段外)
image.png

流程设置好后,保存,发布流程。

现在你就可以去宜搭里面,“我创建的”应用列表里,找到当前的“简单线上答疑”,进去答疑了。

当然,这个只是宜搭的一小部分功能,关于宜搭数据统计,以及代码干预处理,后面持续更新~