视图插件开发文档
本文档是供开发者阅读的「视图」插件开发文档,需要开发者具备前端开发基础,掌握Javascript、CSS和HTML等相关知识。
如果开发者熟悉 React JS,也可以通过查看HAP前端开源项目 https://github.com/mingdaocom/pd-openweb ,参考HAP系统视图代码进行插件的开发。
关于视图插件
什么是 视图插件?
视图插件又叫「自定义视图」,当HAP的表格、看板、层级、日历、画廊、详情、甘特图等系统视图不能满足用户视图展示需求的时候,开发者可以通过自己编写代码实现一个完全自定义的视图页面,用于展示工作表的记录数据。自定义视图支持搜索、筛选、统计、快速筛选和筛选列表等操作,还可以通过HAP公共Javascript接口实现调用系统组件,比如展示记录详情弹窗、调用新建记录窗口等等。
视图插件和系统视图有什么区别?
从使用者的角度看,视图插件和普通视图是没有任何区别的。当组织管理员通过发布开发者插件、安装插件或者导入插件后,所有已启用的插件即对组织下的所有用户生效,用户可以像使用表格、看板、日历等系统视图一样使用这些视图,也可以正常的为视图分配权限和进行视图分享等操作。
开发步骤
准备工作
- 安装 Node.js(>=16.20) 和 npm
- 准备集成开发环境(IDE),推荐 VS Code
- 如果是团队开发,请准备好代码版本管理工具,推荐 Git
创建视图插件
要创建一个视图插件,有两种方式。
1. 创建自定义视图
通过在新建视图时,创建一个「自定义视图」,此时系统会自动创建一个视图插件,并以当前工作表为该视图的开发调试环境。
2. 在插件中心制作插件
在系统首页进入「插件中心」
在插件「我开发的」页面中点击「制作插件」
通过此方式创建插件时,仍然需要选择一张工作表作为开发调试环境,选择后会自动在该工作表下创建一个新的视图用于开发调试视图插件。
创建好插件后,进入到工作表下新创建的这个自定义视图,可以进行下一步开发。
3. 插件需求分析
在制作视图插件之前,一定要对要开发的视图进行需求分析,明确视图的适用范围,并通过设计合理的设置项来提高视图插件的通用性。
比如,有两张工作表:订单和订单明细。
订单表 | 订单明细表 |
---|---|
![]() | ![]() |
现在开发者想自己开发一个视图,将「订单明细」的数据显示到主「订单」的表格中,主订单的数据将以合并单元格的方式同时展示两张表的数据,大概类似这样:
首先,在功能实现上,我们可以采取先加载主表格,再通过异步的方式获取子表数据进行加载。
其次,经过分析,这个视图插件如果要做到有一定的通用性,给任意一个工作表都能使用,那就需要增加一些使用者可以自由配置的内容:
- 这个视图表格的显示字段和顺序是允许使用者自行调整配置的;
- 一个工作表可能存在多张子表,那么就需要使用者配置要把哪张子表展示到主表格中;
通过对视图需求的整理,可以让用户更加明确开发的目标和实现的边界,也更容易将插件做到适应更多的通用场景,降低开发的成本。
4. 插件基础设置
i. 图标和名称
插件的名称建议能准确表达视图的作用,且不用带“视图”二字,比如:「地图」、「思维导图」、「树型表格」等等。
图标可以使用自定义图标,这个相当于插件的logo。
ii. 功能启用
视图插件允许用户自由选择是否启用「快速筛选」和「筛选列表」。当启用后,视图使用者在操作了快速筛选项和筛选列表后,系统将向插件发送事件触发消息,开发者需要在插件中添加事件处理句柄并通过传入的筛选条件处理数据筛选逻辑。
可以参考本文档附录中的 mdye 消息系统 示例代码。
iii. 定义视图设置项参数
![]() | ![]() | ![]() |
---|---|---|
主表显示字段 | 明细表字段 | 参数映射配置 |
在以上这个示例中,我们定义了两个视图设置项:「显示字段(showFields
)」和「子表明细字段(sub
)」,分别对应两个配置的需求。在「参数映射」中,开发者可以将实际的视图配置映射到字段里,并在代码中通过 env
变量获取到它的值。参考代码:
import { env } from "mdye";
const { showFields, sub } = env;
// showFields, sub 即为使用者配置的值,变量名称和配置中的变量ID一一对应
设置项参数有如下几种类型:
设置项类型 | 子类型 | 值类型 | 备注 |
---|---|---|---|
字段 选择器 | 字段单选 字段多选 | array[string] | 字段多选时,可以限制选择字段的数量 |
字符串 | string | ||
数值 | double | ||
枚举值 | 单选框 下拉菜单 | array[string] | 选项格式为 key=value ,其中 vlaue 为呈现给使用者的文字,key 为代码中获取到的值; 样式为单选框时,可以选择横向或竖向排列; |
布尔值 | 开关 勾选框 | boolean | |
分组标题 | null |
5. 创建本地项目
接下来,切换到「开发调试」面板,我们将根据向导创建一个本地项目,并将本地项目运行在调试工作表中。
i. 选择脚手架模板
开始本地开发前,需要先选择一个内置的脚手架模板,在本地执行初始化命令时会创建对应的模板文件。目前系统提供了以下模板供选择:
- React 基础示例模板
- JavaScript 基础示例模板
- React + Tailwind CSS 模板
- Vue 3 模板
- Vue 2 模板
ii. 安装 mdye cli 命令行工具
本地项目的初始化创建是通过HAP的命令行工具 mdye
来实现的,所以需要事先全局安装这个工具。mdye
是 MingDaoYun Extensions 的首字母缩写。
请在计算机终端命令行用以下命令安装:
$ npm install -g mdye-cli
如果报没有权限的错误,请用 sudo
来安装:
$ sudo npm install -g mdye-cli
安装完成后,可以用下面的命令来验证是否安装成功:
$ mdye --version
beta-0.0.34
如果能正常输出版本号,则表示安装成功。这 个工具的安装通常来说是一次性的,即后续开发新插件时无需再次安装该工具。如果该工具将来有新版本,则可以重新安装该工具进行升级。
mdye
完整的命令如下:
Usage: mdye [options] [command]
Options:
-v, --version 查看 mdye 版本
-h, --help 帮助
Commands:
auth [options] mdye auth 明道云授权登录
init [options] mdye init view --id <id> --template <template-name> 初始化项目,请从web端复制命令
start [options] mdye start 开始开发
build [options] mdye build
push [options] mdye push -m <message> 提交插件
whoami [options] mdye whoami 我是谁
logout [options] mdye logout 注销当前环境账户
sync-params [options] mdye sync-params -f <file-path> 同步插件参数配置,-f 非必填 默认文件路径为 ./.config/params-config.json
help [command] 子命令帮助
iii. 初始化本地项目
在「建立本地项目」步骤中复制创建插件本项目的命令,在本地终端中执行。