云巧动态表单的国际化方案解密

简介: 介绍云巧动态表单以及解决的问题和价值,解密云巧动态表单的国际化能力和整体方案

背景

1.什么是云巧动态表单

云巧动态表单是一个面向企业级表单的解决方案,它提供完整的表单生命周期,包括从表单的创建、可视化搭建、预览、发布、填报、数据统计到下架的完整产品链路。

2.动态表单解决什么问题,价值是什么

对行业用户:

  • 【减少维护工作量】降低企业运营成本
  • 【设计便利】提供所见即所得、Web拖拽的方式设计表单,满足快速定制业务的需求,表单视图可以按需调整
  • 【满足各种负责业务】表单引擎提供丰富的控件库,能够做到“零代码”

对ISV:

  • 【接入成本低】依托云巧可组装体系,方便快捷和业务集成
  • 【扩展能力强】支持多维度能力扩展和定开,提供编辑器的源码级定开能力和控件级的扩展定开能力
  • 【底层能力强】提供丰富的表单控件,易用的可视化搭建,表单数据的存储、搜索和管理能力,跨端渲染能力

3.为什么要做国际化

GTS作为全球技术服务部门,需要面向海内外的项目交付,同时我们服务的企业也拥有大量的国际用户,因此动态表单的搭建和填报场景均需要国际化支持。

4.国际化能力介绍

【可视化配置】支持可视化配置表单字段在不同语言环境下的国际化配置并预览实时效果

【多语言切换】表单填报侧支持多语言切换能力

国际化整体方案

表单国际化-全链路架构图

国际化整体方案设计

核心模块

  1. 【语言环境管理模块】负责语言环境的管理
  2. 【语言包管理模块】负责表单国际化语言包的管理
  3. 【国际化包装器】负责表单控件的国际化属性封装和映射

方案设计

  1. 动态表单设计器在表单的设计阶段引入「国际化包装器」,对创建的表单控件逐一进行初始国际化包装
  2. 「国际化包装器」通过订阅「语言环境管理模块」和「语言包管理模块」,追踪语言环境的变化和语言包的更新
  3. 表单设计器通过外部切换语言从而set当前语言环境,「语言环境管理模块」再将变化派发给国际化包装器,触发表单字段的重新包装
  4. 表单设计器通过国际化setter,对当前语言环境下的表单字段进行增量更新语言包,「国际化包装器」接收到来自「语言包管理模块」的派发广播,触发表单字段的重新包装
  5. 「国际化包装器」输出更新后的表单,在表单设计器进行预览
  6. 同上,动态表单渲染器通过这套「语言切换-动态更新」的模式,渲染出最终表单国际化效果,并支持多语言切换


技术难点

难点1:国际化包装器如何包装表单控件?

国际化包装器内部会针对每一个表单控件的「文本展示类属性」进行国际化映射,包括控件的通用属性和个性化属性,经过映射后的表单控件即可根据当前语言环境展示对应的国际化配置。

难点2:国际化包装器在什么时机对表单字段进行包装?

国际化包装器会在表单字段的 onFieldReact 副作用钩子的回调事件进行包装,它会在字段初始化的时候执行一次包装的回调函数,同时自动追踪依赖,当依赖数据发生变化时包装的回调函数会再次执行,因此依赖的国际化数据更新时表单字段得以重新包装和输出。

难点3:国际化包装器如何与语言环境管理模块以及语言包管理模块进行交互?

语言环境管理模块和语言包管理模块均通过 @formily/reactive 创建一个可订阅对象来存储各自的数据,在每次操作该对象的属性数据时,会自动通知订阅者,国际化包装器引用该对象后成为订阅者从而获得语言环境和语言包的更新。

难点4:表单设计器对于国际化setter的设计

表单设计阶段需要支持对表单字段进行可视化地配置当前语言环境下的属性文案,因此需要一个「国际化setter配置器」来支持,setter内部核心能力就是 支持对表单字段属性在当前语言环境下的读写操作:通过语言环境管理模块和语言包管理模块读取国际化内容,在用户修改内容后增量更新到语言包对象上,从而完成可视化的国际化配置能力。


效果展示

可视化配置表单国际化

表单填报国际化展示和多语言切换

相关文章
|
JSON 前端开发 JavaScript
开源表单方案 Formily 的核心设计思路
Formily 是一个数据+协议驱动的表单解决方案,它站在Reactive响应式编程巨人的肩膀上,构建出了从基础表单到低代码领域的高性能通用基础能力,同时其配套的跨框架+跨终端组件生态体系,也能让用户更高效的开发日常业务表单,尽可能的减少了重复冗余的逻辑实现。本篇内容来自白玄在第十六届D2前端技术论坛的分享,将为你介绍如何在高复杂业务场景下提高我们的表单性能与表单开发效率。
3697 1
开源表单方案 Formily 的核心设计思路
|
缓存 运维 安全
云巧组件标准
可组装式应用的理论,结合了云原生的理念和交付质量要求,云巧对云巧组件设计了六大维度的标准。根据这六大维度名称的英文首字母组成单词ACCORD
1839 0
|
1月前
|
Web App开发 存储 自然语言处理
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
推荐一款价值几万元的免费开源GPTs导航!还可自定义数据源做成通用导航站!
|
2月前
|
移动开发 小程序 前端开发
【5月开发者日回顾】自定义TabBar、自定义组件支持 observers两大功能即将上线
【5月开发者日回顾】自定义TabBar、自定义组件支持 observers两大功能即将上线
14 0
|
搜索推荐 UED
睿哲信息:国际化企业快速本地化,需掌握这三点
企业跨境出海,寻求本地化,已经是当下众多企业选择的发展方向。那么企业该如何在不稀释品牌特性的前提下,顺利地完成本地化的转变呢?有着多年的互联网开发经验的睿哲信息,为大家总结了关键的三点,助力您的企业快速地实现本地化策略!
|
Java API
JavaWeb开发——软件国际化(动态元素国际化)
JavaWeb开发——软件国际化(动态元素国际化)
189 0
|
JSON 移动开发 数据格式
强大的移动端表单开发方案 @alitajs/dform
强大的移动端表单开发方案 @alitajs/dform
314 0
强大的移动端表单开发方案 @alitajs/dform
|
JSON 运维 JavaScript
《前端那些事》从0到1开发动态表单
前沿:中后台应用中表单需求颇多,左手一个表单,右手又是一个表单,无穷无尽,如果用模版一个个来写,不单写起来费时费力,而且看起来也是天花乱坠,于是这个时候你会去设想,那有没有什么方式可以去替换琐碎的手写表单模版的方式呢?让表单是“配出来”的,而不是撸出来的,让你轻松解决 form 表单,也不再为表单而烦恼。答案就是:动态表单
254 0
《前端那些事》从0到1开发动态表单
|
JSON 自然语言处理 JavaScript
前端国际化的另类方式
前端国际化的另类方式
|
移动开发 缓存 小程序