专注于 可视化低代码表单设计器FormMaking的观察

342 阅读5分钟

在公司的低代码产品之外还有什么样的低代码项目,感兴趣起来看看了

下面我在看他们代码产品的过程记录📝


一个开源&闭源结合的专注于 可视化低代码表单设计器

form.making.link/docs/guide/…

官网的介绍 本项目采用 Vue 和 Element 进行页面构建,内置 i18n 国际化解决方案,支持二次扩展开发,支持自定义组件扩展。 项目分为 设计器MakingForm 和 生成器GenerateForm 可通过设计器可视化的完成表单的快速创建,并生成JSON Schema; 生成器可通过加载JSON Schema渲染出表单

看下来发现专注于:

  1. 表单配置:产出配置数据 JSON Schema
  2. 依据配置数据渲染表单

观察下来发现: 核心的组件拖拽渲染都实现的灵活且迅速,可以快速的实现低代码的基础拖拽渲染功能 组件种类: 拖拽组件较为丰富,涵盖了element-ui和ant-design组件库中常见的组件:

img_2024_11_27_18_33_58.png

字段id都为自动生成的,这样可以保证字段的唯一性,为了方便辨识格式都是组件类型 + 随机码的方式,例如:time_52lgrsmg

组件支持的配置:

基础配置

基础配置为element-ui和ant-design组件库中的基础配置,例如:label、placeholder等 不同的组件有不同的就配置,例如:input组件有maxlength属性,select组件有options属性,date组件有format属性等... 对应的是element-ui和ant-design组件库中的props属性的配置

高级配置

img_2024_11_27_18_45_36.png

高级属性的配置项目有:

2.1 动态值功能

可以通过数据源的方式动态的获取值,或者选择表达式的方式动态的获取值

其中表达式的方式其实是在获取表单上的一些数据,做数据组合 或者 数据计算的功能,例如:计算两个字段的和、差、乘、除等

看见的亮点在于:它是支持纯js执行的,也就是对有js基础的人非常优化,并且使用起来没有过多的学习成本。但是对于项目经理之类对无代码需求多的人来说,想要实现一些功能比较的费劲。或许足够全面的文档,以及有一些示例数据的AI可以帮助解决这个问题,当然js代码AI是最擅长的语言之一

该功能的使用文档:

img_2024_11_27_18_47_26.png

2.2 状态

状态包括隐藏和禁用,是所有组件都有的内容,并且在某些时候需要依据其他字段的数据或者状态去启用禁用或者隐藏显示某个字段。这是一个非常常见的需求,这里有永久禁用和使用表达式的方式去动态的隐藏显式

img_2024_11_27_18_56_00.png

使用起来的,需要配置对应的表达式,然后好像就实现了这么一个效果,这里在配置的时候并不明显,需要结合预览一起看

使用体验的话,感觉该功能当前比较的简单,仅仅在于表单上数据的获取或者是表单操作行数据或者操作行下标的获取

在面对一些人员数据相关,比如某些人或者具有某个部门的人才能查看字段的时候,当前的配置就不够使用了。但是对于人员信息什的没有什么要求的话,这个功能还是可以使用的

支持纯js是它最大的自由度

实现的方式: 代码编辑器组件中可以显示字段的占位元素,使用的是CodeMirror库做的一个效果,效果挺好的,在低代码的平台中大量的使用到了这个样的占位元素的代码编辑器的效果,或者是富文本编辑器的效果。但是当前发现的缺点是:没有表达式的校验。这样对于一些不熟悉js的人来说,会有一些困难

校验也好解决,可以转为实际运行的代码做一个校验,这个效果可以后面再说

2.3 动作设置

多个触发时机(多前端埋点):

img_2024_11_28_16_25_37.png

在选中触发方式之后会有对应的配置动作的弹框:

img_2024_12_17_16_22_16.png 配置的动作有很多贴近业务逻辑的功能,比如说:

  1. 在我打开表单,做初始化的时候想要做当前组件聚焦的效果,方便用户直接进行填写;提供了mounted生命周期自定义代码功能
  2. 在我填写完数据之后需要在失去焦点的时候做校验;提供了校验的节点
  3. 需要从其他的系统跳转到当前的系统,并且打开新增表单,继而获取浏览器地址栏中第三方系统拼接的参数去做表单的数据初始化,也可以在自定义js中去实现这个功能

img_2024_12_17_16_15_12.png

img_2024_12_17_16_21_58.png

动作配置面板偏小使用起来看着不方便,但功能使用上手简单


预览功能

预览功能pc端还是不错的,但是移动端的组件使用的也是pc端的element,在样式和交互上没有专门为移动端做的组件库那样丝滑好看

img_2024_12_17_17_47_25.png

api丰富

表单本身提供了很多的api,方便在配置的时候去修改参数

img_2024_12_17_17_33_17.png

在业务逻辑中常常对子表的数据有较多的要求,比如:子表依据一个规则去显式隐藏一个字段或者是禁用一列数据

这时候就必须要子表提供了对应的api去便捷的实现禁用、影藏效果

在表单的设计里面也有对应的api去实现

img_2024_12_17_17_39_33.png

黑夜模式很酷

img_2024_12_17_16_43_46.png


注:以上仅代表个人观点