提示

  • 本文旨在帮助用户快速理解Joget DX低代码开发平台如何构建一个Web应用
  • 建议读者以管理员身份登录Joget预置的应用,从前端利用 快速编辑模式 定位到相应的设计器比对理解
  • 有条件的用户也在应用内录入一些数据后,连接Joget数据库比对理解(Windows本地安装数据库默认为mysql/mariadb,端口3307,root无密码)
  • 如果您正在进行产品选型,您还可以阅读 产品选型导读

各设计器与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变量
  • 详见 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开发,格式化报表开发)
  • No labels