在这里插入图片描述

上一篇讲了表单里的公式组件怎么让表单"自己会算账",这篇往回退一步,把表单设计器本身拆开看:一个表单从空白画布到能收数据、能联动、能校验,中间要经过哪些环节,设计器都提供了什么。

零代码平台的一切都从表单开始——表单定义了数据的形状,后面的表格视图、自动化、报表都是在这形状上长出来的。所以设计器好不好用,直接决定搭系统的效率。
在这里插入图片描述

一、画布与排版:拖拽即所得,但不只有拖拽

在这里插入图片描述

打开设计器,左边是字段调色板,中间是画布,右边是设置面板。把字段拖进画布就完成一次"建表",但排版能力比"能拖"要多:

  • 12 栅格自由布局:每个字段宽度可以设 1/4、1/2、3/4 或整行,一行最多放 4 个字段,拖边框即可调整;
  • 快速排列:一键把全部字段按一列、二列、三列、四列重排,密集信息表和移动端表单一键切换密度;
  • 撤销/重做:改错随手回退,不用怕手滑;
  • 独占一行字段:分段、标签页、描述、富文本、子表、签名、附件这七类自动占整行,其余字段自由并排;
  • 规模上限:单表最多 2000 个字段,横向菜单、超长检查表都装得下。

二、字段全景:4 组 36 种,按场景分组

在这里插入图片描述

布局字段(3 种):分段、标签页、描述——给长表单分区、分页、加说明。

常用字段(10 种):单行文本、多行文本、数值、单选、多选、日期、日期时间、电话、邮箱、地区——日常采集全覆盖,其中地区自带省市区联动。

高级字段(17 种),是和其他表单工具拉开差距的部分:

  • 金额、百分比、评分——带格式的业务数值;
  • 签名、附件、条形码——手写签字、材料上传、扫码录入;
  • 用户、部门——在组织架构里选人、选部门,不用手输;
  • 富文本、超链接——图文说明与外部链接;
  • 自动编号——单号按规则自动生成;
  • 公式——67 个函数实时计算(上篇详解);
  • 创建时间、创建人、更新时间、更新人——系统自动维护留痕。

关联字段(6 种):关联记录、级联选择、引用、汇总、子表——跨表引用、级联联动、一行展开明细、跨行汇总,这是把"表单"连成"系统"的关键。

三、每个字段都有的五件事

选中画布上任何字段,右侧面板都提供同一套基础设置:

  1. 字段名称 + 英文标识:英文名创建后稳定不变,是 Word/Excel 模板占位符 {{field_x}}、公式引用、API 对接的统一钥匙——改中文名不影响任何已接好的东西;
  2. 可见范围:按角色控制这个字段谁能看见;
  3. 宽度:1/4 到整行;
  4. 数据联动:选了关联记录后,可配"带出规则"——选中某条关联记录,自动把关联表的字段值填进本表对应字段,选个客户,联系人、地址全带出来;
  5. 值变更通知:字段值一变就触发通知,接自动化流程用。

四、校验规则:错误挡在提交前

  • 必填开关;
  • 不允许重复输入(单行文本、数值、邮箱、电话、超链接可用)——工牌号、序列号这类唯一值直接在表单层锁死;
  • 限定范围:文本限字数、数值限区间、金额限区间、多选限可选项数。

校验在填表端实时生效,不合规的数据根本进不了库。

五、条件联动:让表单"长脑子"

字段设置里的「事件」页签可以配条件联动,三要素:

  • 触发时机:值变化时 / 字段显示时 / 值被清空时;
  • 条件:任选字段 + 操作符 + 值,一个事件可加多条;
  • 动作:满足条件显示目标字段,不满足自动隐藏。

典型用法:检查结果选"异常"时,自动显示"异常说明"和"整改期限";选"正常"就隐藏——填表的人永远只看到跟自己相关的字段。

六、表单样式与数据权限

整个表单级也有统一设置:

  • 标题字段:指定哪个字段的值作为这条记录的显示名,列表页、关联选择里都用它;
  • 默认列数与标签位置:垂直 / 水平 / 右对齐,移动端单独设一套;
  • 分段样式与标签页:标签页放顶部还是左侧、单标签时自动隐藏;
  • 数据权限:谁能看所有记录、谁只能编辑自己创建的。

七、系统字段与发布

画布底部常驻四个系统字段:创建时间、创建人、修改时间、修改人,由系统自动维护,可以在表单样式里开关显隐。

点保存,表单定义即刻生效于所有消费方:填表页、表格视图、记录编辑弹窗、公开填表链接、公式引擎、数据联动——一次设计,到处生效,不存在"改了这里忘了那里"。

八、三步上手

  1. 左侧调色板把字段拖进画布,拖边框调宽度;
  2. 右侧面板配英文名、必填、范围校验,需要就加条件联动;
  3. 保存发布——表格视图和填表页同步生成,开始收数据。

九、在线体验与私有化部署

docker run -d -p 28888:80 registry.cn-zhangjiakou.aliyuncs.com/xuanyuanke/zerocode:latest
Logo

一站式 AI 云服务平台

更多推荐