一篇读懂捷得(Joget DX)低代码开发

 

前言

 

如果您看过 5分钟挑战：从零到上线1个企业应用程序！并且跟着动手做过1个应用，不知道您是否被这种高效的开发与部署效率惊艳到？我按文章在 cloud.joget.cn 上试了一次，做一个简单的在线报名应用，用时3分30秒

 

小试牛刀之后，您一定想进一步深入了解Joget开发，本文正是为您全面了解Joget开发而准备

• 建议读者以管理员身份登录Joget预置的应用，从前端利用 快速编辑模式  定位到相应的设计器比对理解

• 有条件的用户可以 下载安装 本地版，在应用内录入一些数据后，连接Joget数据库比对理解（Windows本地安装数据库默认为mysql/mariadb，端口3307，root无密码）

• 您可点击阅读原文获取知识库完整链接，在PC上仔细研读

 

如果您正在进行开发平台选型，您还可以阅读 产品选型导读 更加全面地评估捷得低代码开发平台。

通过以下视频您可直观地了解捷得低代码平台开发应用的过程。

捷得DX如何帮助企业快速搭建管理系统

25分钟演示会议室预约系统开发

 

各设计器与Web应用的关系

 

从一个Web应用理解各设计器的作用与定位

设计器	功能定位说明
表单设计器	表单是用户录入数据或查看单条业务数据详情的界面
	除了定义表单样式，同时相当于定义了应用的数据表结构
列表设计器	列表是查询数据清单的界面
	列表上可以定义各种跳转
用户界面设计器	定义用户界面的主题风格
	菜单的编排，权限的控制
	引用其他设计器的设计元素（表单/列表/流程等）
	除引用表单/列表/流程等，还可通过菜单元素提供更多丰富的功能
流程设计器	流程不是必须的设计元素，表单与列表间的跳转即可实现各类非流程的功能需求（区别于BPM和工作流产品）
	流程在用户界面菜单中体现为两种形式：
	- 启动流程
	- 待办任务（任务箱）
其他扩展设计器	DX 7提供了其他扩展设计器（通过插件安装扩展）
	-  API设计器：无代码方式定义API
	-  报表设计器：可更便捷地定义报表页面布局

 

 

快速编辑模式

 

 

快速编辑模式

• Joget提供快速编辑模式（管理员右下角的控制按钮）

• 允许从最终用户界面快速定位到设计端

• 设计端编辑保存，前端刷新即时生效

• 可大幅提升系统维护效率（读懂别人的设计逻辑）

了解Joget URL

• 每个应用有一个唯一的ID

• 一个应用下可以有多个用户界面ID

• 一个用户界面下有多个菜单ID（每个ID对应一个菜单）

• 每个菜单通过URL参数和参数值展示不同的记录值

 

 

 

如何设计应用

 

表单设计

布局与基本使用

• 所见即所得，拖拽左侧表单元素至右侧完成配置

• 表单可分区（纵向），分区内可分列（横向）布局

• 左侧表单元素可通过插件扩展 

 

 

数据表关联

• 表单默认绑定一个自定义的数据表（以 app_fd_ 为前缀）

• 表单元素ID对应数据表字段名（以 c_ 为前缀）

• 表单自定义的数据表有默认7个固定字段，id为主键

• 通过部分表单元素中的外键/关联字段配置，可以实现一对多的表关联

 

 

属性配置与客户化

• 标准绑定器支持SQL或Java客户化表单或分区字段的加载与存储（例如从外部系统加载/存储数据）

• 权限可按表单级、分区级和字段级进行定义和控制

• 表单通过配置工具可定义表单提交后的系统动作

• 表单通过BeanShell插件可执行Java程序

• 表单通过客户化HTML元素可执行CSS/JS/jQuery/AJAX等前端客户化脚本

 

 

高级工具（应用设计工具）

• 权限控制：可叠加多个权限控制规则，可控制到字段只读/隐藏

• 国际化：自动抽取页面标签，按需翻译不同语言，实现应用的国际化（多语言）

• 应用帮助：可定义提示信息作为用户帮助，同样支持国际化（多语言）

 

应用生成器

• 基于设计好的表单，可一键生成应用（节省手工配置时间）默认有4个模板插件

• 生成表单相关的列表

  • 生成增删改查功能

  • 生成通用审批流程（详情可查看流程图）

  • 生成通用任务分配流程（详情可查看流程图）

 

 

列表设计

列表设计的基本步骤

• 定义数据源

  • 表单绑定器/高级表单绑定器 - 无代码配置获取数据

  • JDBC绑定器 - 通过SQL获取数据

  • Joget实体类 - 无代码配置获取Joget平台数据表(组织用户应用设计等数据)

  • 外部组织名录 - 当使用LDAP时获取组织用户数据

• 拖拽元素到数据展示区和查询条件区

• 按需定义数据格式化和跳转逻辑

 

高级工具（应用设计工具）

• 权限设置：与表单类似，可控制按不同角色查看不同的数据列

• 国际化：与表单类似，可实现应用多语言

 

 

数据列格式化定义

• 数据列可通过格式化作二次处理，标准插件如下：

  • BeanShell - Java脚本客户化

  • Javascript - JS脚本客户化

  • 日期 - 将原日期格式转化为指定格式

  • 默认 - 定义字体、颜色等，也可以将外键列转化成关联表的字段值

  • 子列表 - 点击后显示另外一个列表

  • 选项值 - 将原有的值根据映射关系显示为另外一个值

  • 流程状态 - 基于流程ID显示流程状态（图形方式）

• 格式化示例见下图

  • 选项值格式化 - 不同的值对应不同的颜色

  • 子列表格式化 - 点击后展开相关明细（需要将父列表的值传参给子列表）

 

 

数据列/按钮跳转（动作）定义

• 数据列和按钮均可定义动作，标准插件支持以下动作：

  • 超链接 - 携带当前行记录指定列的值，传参跳转到目标链接（见右图）

  • JDBC - 执行SQL语句，当前行数据可注入SQL

  • Bean Shell - Java脚本，当前行数据可注入Java脚本

  • 删除 - 删除绑定表单对应的数据表记录（需指定ID列）

• 关于URL（适用所有Joget开发配置）

  • 根据不同配置方法，可以在不同的Level跳转：

    • 菜单ID - 在当前用户界面内跳转（相同的用户界面ID内跳转）

    • /jw...  - 在当前Joget平台内跳转（适用需要跨用户界面或应用跳转）

    • http... - 任意外部地址（跳出当前Joget平台外）

  • 列表的查询参数可在列表设计器查询条件配置项获得

  • 表单的参数：

    • id对应表单绑定的数据表主键，决定了整条记录的主键值，无此参数即为新建

    • 字段ID=值，可作为表单新建时字段的预设值使用

    • fk_字段ID=值，将预设值设为只读

 

 

 

流程设计

流程图设计

• 泳道 - 代表一个用户角色

• 活动 - 由人操作的节点（表现为待办任务 - 对应任务箱菜单）

• 工具 - 由系统自动执行（表现为后台邮件发送、数据更新、调用接口等）

• 开始 - 启动流程的节点，通常也对应一个表单（对应启动流程菜单）

• 路由 - 流程走向的分流与控制（进行逻辑判断）

 

高级工具（应用设计工具）

• 国际化：与表单类似，可实现流程名称、活动名称等多语言设置 

 

 

工作流变量与Deadline

• 工作流变量可用于流程流转逻辑判断

• 或用于流程其他配置的逻辑判断，例如：限期（Deadline）的配置

• 工作流变量的值可通过表单字段配置项或其他工具配置获取

• 限期（Deadline）

  • 当活动生成后，在指定时间，或超过1个周期（单位可自定义）后被触发

  • 需要与活动上异常走向线条配合使用

  • 可实现流程超时提醒或升级处理的场景

• 同步与异步

  • 在期限配置和子流程配置中适用

  • 同步即结束当前的节点，按指定的异常线路往下流转

  • 异步即保留当前的节点，新开一个分支按异常线路往下流转

 

 

流程匹配设置

• 开始 - 可定义流程白名单，执行启动流程的权限

• 泳道（执行角色）- 定义每个角色的分配逻辑

• 活动 - 确定每个待办任务节点对应的表单，可配置：

  • Joget表单

  • 外部系统表单

• 工具 - 系统动作，具体参见插件描述（右图），补充说明：

  • 流水码 - 基于环境变量递增产生流水码赋值给表单字段或工作流变量（表单元素有类似插件）

  • 数据导入工具 - 将表单上传附件的Excel/CSV文件数据导入指定的数据表

• 路由 - 定义流程走向（V7新增功能，以前通过线条条件定义）

  • 根据工作流变量或Hash变量的返回值进行逻辑判断

  • 以IF...THEN...进行判断，通过添加组可以嵌套逻辑

  • "!"代表反向判断，“过渡”即流转走向线条

  • THEN后可决定流程走向，同时可更新工作流变量值

 

 

用户界面设计

界面结构

• 界面级配置在“设置”中

• 菜单提供一级分类（多级分类需要客户化JS）

• 每个菜单归属一个菜单类

• 菜单类可设为隐藏（但可用）

 

主题与客户化

• 用户界面提供不同的主题选择，可确定界面基本风格

• 每个主题均提供客户化CSS/JS片段代码空间（作用与本用户界面）

• 每个菜单提供菜单级的客户化CSS/JS片段代码空间（仅影响本菜单页面） 

 

 

权限设置

• 权限可分别在用户界面、菜单类和菜单三个级别进行控制

 

 

 

高级工具（应用设计工具）

• 权限设置：与表单类似，可控制按不同角色查看不同的菜单

• 国际化：与表单类似，可实现应用多语言设置

 

Hash变量

 

 

• Hash变量是Joget应用开发中最常用的功能

• Hash变量可以简单理解为Joget预置的函数，用于各类弹性配置和赋值，可用于：

  • 表单设计

  • 列表设计

  • 用户界面设计

  • 流程活动名称

  • 插件配置项

  • SQL脚本

  • BeanShell脚本

  • URL配置

• Hash变量允许嵌套使用

• 光标定位在配置项时，"ctrl+shift+#"可调用平台所有Hash变量

• 详见 官方知识库 和 文档提供的样例应用

 

 

环境变量

• 环境变量用于应用级的参数配置

• 可保持不同环境间迁移时不同环境参数的配置

• 应用举例：

  • 可能需要多处复用的脚本

  • 流水码插件的自增量基数 

 

 

应用资源

 

• 图片/文件等可作为资源保存在某个应用资源内

• 资源可跨应用被引用

• 每个资源均可定义使用权限

 

插件默认属性

 

• 功能1：提供应用级的插件，例如：用户通知插件

  • 本应用内所有流程待办任务产生时，均会发送通知（默认为邮件），无需在流程上逐个配置邮件通知工具

• 功能2：在应用级为某个插件配置默认值，例如：邮件通知工具

  • 在此插件内配置SMTP等共用的属性值，当流程使用邮件通知工具时，无需再配置此属性

  • 属性值优先级逻辑：工具配置值 > 插件默认属性配置值（工具配置为空时生效）

• 关于邮件发件箱SMTP配置的几种推荐配置方案：

  • 方案1：平台设置中配置SMTP发件箱

  • 方案2：插件默认属性中配置发件箱

  • 方案3：利用Hash变量 #form.table.field[id]# 由最终用户配置（设计一张id值固定的维护表）

 

扩展设计器

 

从V7开始，设计器本身可以作为插件形式扩展

API设计器

作用

• 无代码开发/管理API

功能

• 支持通过拖拽勾选设计API

• 可基于Joget组织开放权限

• 也可基于API Key+Secret或Token开放权限

• 可设置域名或IP白名单

• 提供API调用日志

• 通过插件可开发客户化API

   

  

 

报表设计器

作用

• 制作格式化的报表

功能

• 条码/二维码元素

• 图片/图表/地图元素

• 表单/子表单/数据列表元素

 

 

 

总结

 

1. 通过表单设计实现数据录入界面的设计，同时完成数据表结构的设计

2. 通过列表设计实现数据查询，与表单组合后，再配合格式化和传参跳转设置，实现各类数据管理功能

3. 通过流程设计实现多角色协同度高、规范性强的业务流程管理需求

4. 通过用户界面实现菜单的编排，界面主题风格、客户化UI的需求，其他非表单列表类的功能也均可通过用户界面菜单功能实现

5. 通过Hash变量可用最便捷的方式实现丰富功能配置

6. 通过环境变量和资源可实现应用级参数配置和资源文件的管理

7. 通过扩展设计器可让平台实现更多无代码开发能力（例如：API开发，格式化报表开发）