阅读此文章前，默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档
从左侧组件库找到“图表”组件，拖入到视图区域，在右侧属性面板选择已经发布过的图表
查询条件为rsql语法，里面的变量需要用
${}包裹起来，其中的activeRecord为当前视图的数据对象，下图中的activeRecord.field000015为推荐导购员的对象，我们拿了这个对象的id传到查询条件内
通过浏览器的开发者工具，我们可以看到，选中导购员后查询条件发生了改变，页面的数据也同步发生了变化
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/16623.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
该功能依赖应用环境(designer_metadata)模块, 请确保体验环境的后端yml配置有该依赖 一 产品功能说明 设计同步部署 设计同步部署功能实现不同环境设计数据一键同步的目标，即将A环境设计完成的模型、界面、等设计数据一键部署至B环境。使用此功能，需要在‘应用中心’安装‘应用环境’：‘应用环境’安装完成，进入发起同步部署环境——>业务应用——>‘应用环境’，对要进行快速部署的发起环境、目标环境进行配置：在进行多个环境同步部署设计数据时，必须正确配置发起环境、目标环境。完成配置后，在应用中心，选择目标‘已安装’应用，在操作下拉菜单选择待部署设计类型，即可按照指引完成操作： 设计导出 设计导出功能具备将已安装应用所属（应用技术名称）设计元数据，如模型、界面、流程、集成设计、数据可视化导出为json文件的能力，具备筛选导出、一键导出两种方式以满足不同业务场景需要。目标是实现在多个环境通过技术接口调用、或通过应用中心导入界面完成导入，使设计元数据在不同环境之间快速迁移同步： :::info 因平台允许多个应用名称相同，能够唯一定位具体应用使用的是‘应用技术名称’，因此识别应用标识的依据为应用技术名称。::: 设计导入 迁移导入 对于已导出设计元数据json文件，如果导出类型为‘迁移导出’，可以在不同环境，通过应用中心——>已安装应用——>设计导入（迁移），实现设计数据导入： 标品导入 对于导出类型为‘标品导出’的设计元数据，目前只支持通过技术接口形式完成导入，暂不支持界面进行可视化导入操作。 导出导入任务 不同环境设计元数据以导入json文件方式进行迁移的基础是设计导出，基于界面导入实现设计元数据在不同环境进行迁移场景、或通过技术接口导入以实现标品升级的场景，存在导出类型为迁移导出、标品导出的区别。使用此功能的操作者需要依据实际需求场景进行相应导出类型的选择。 导出任务查看 对于已经执行导出的任务，可通过‘应用环境——>设计导出’查看导出任务信息： 导入任务查看 对于已经执行导入的任务，可通过‘应用环境——>设计导入’查看导入任务状态、进度、详细信息： 部署任务 部署任务功能用于查看设计数据同步部署功能任务状态、详细信息；分为发起环境任务查看、目标环境任务查看。无论是发起环境，或是目标环境，均通过所属环境‘应用环境’中‘部署任务’功能进行查看： 二 产品功能操作手册 设计导出 环境迁移导出 点击‘业务应用——>应用中心’，进入应用中心，默认显示‘应用列表’标签页：选择‘已安装’应用——>操作，出现操作菜单：选择‘设计导出’，显示支持导出的各设计项： 模型导出 操作菜单选择‘模型导出’：打开模型导出信息弹窗：在弹窗页中存在要素信息项及操作项： 导出类型：选择‘迁移导出’。 文件名称：默认为‘应用名称+设计类型’。 导出模式：异步模式，不可修改。 导出格式：JSON文件，不可修改。 一键导出：操作项，直接导出当前应用下的所有无代码模型，不需要筛选。 筛选导出：操作项，进入无代码模型导出筛选页，选择要导出的设计数据。 一键导出 点击‘一键导出’，关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’，进入无代码模型导出筛选页：筛选页面按照‘模型类型’、‘可用/废弃’、‘来源’选择或输入查找条件，点击‘搜索’，进行条件搜索，查找满足条件无代码模型：点击‘重置’按钮，清空已输入查找条件：点击列表标题栏勾选框，可进行全选/取消全选操作，全选——选择全部模型，取消全选——取消所有已勾选项：勾选要导出模型，点击‘导出’按钮：回到应用中心，右上角提示导出信息：导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 界面导出 ‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>界面导出，弹出界面导出信息项弹窗，‘导出类型’选择‘迁移导出’： 一键导出 点击‘一键导出’，关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：界面导出会将所选菜单项、菜单目录路径、菜单绑定页面、页面使用的自定义组件全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’，进入应用环境——>界面导出筛选页面，显示当前应用下所有菜单项：查询项‘菜单名称’输入名称，点击‘搜索’按钮，进行模糊查找匹配的菜单项：点击‘清除’按钮，清除已输入的查询内容：勾选菜单项后，点击‘导出’按钮：回到应用中心页面，同时页面右上角提示导出进行中信息：界面导出会将所选菜单项、上级菜单目录项、菜单绑定页面、页面使用的自定义组件全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 流程导出 点击‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>流程导出，弹出导出信息弹窗：‘导出类型’选择‘迁移导出’。 一键导出 点击‘一键导出’：关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：一键导出流程数据会按照应用技术名称，将当前应用下所有流程、元数据、涉及的业务数据如审批用户、角色等全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’：进入流程数据筛选页面，显示当前应用（技术名称）下所有已发布流程：支持按照流程名称（模糊匹配）、触发方式（模型触发、定时触发、日期触发、子流程）进行筛选；输入筛选条件，点击搜索按钮，查找匹配结果：点击‘清除’按钮，清空筛选内容：勾选列表流程项，点击‘导出’按钮：返回应用中心，同时页面右上角提示导出信息：流程导出会将应用（技术名称）下的所有已发布流程及相关元数据、业务数据全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 集成导出 点击‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>集成导出，弹出集成导出信息项弹窗，‘导出类型’选择‘迁移导出’： 一键导出 点击‘一键导出’，关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：一键导出集成数据会按照应用技术名称，将所有已发布数据流程；以及所有已启用连接器（与应用无关）、已启用开放接口（与应用无关）全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’：进入集成数据筛选页面，默认显示‘连接器’标签页——>应用（已启用）数据项列表：可选项： 连接器：应用（已启用状态）、数据库（已启用状态）、与应用无关。 数据流程：已发布状态，且属于发起导出应用（技术名称）下的数据流程。 开放平台：API接口（已启用状态）、与应用无关。 以上各项在列表中展示的数据均可勾选并支持导出为json文件：勾选列表数据项，点击‘导出’按钮：回到应用中心，右上角显示导出提示信息：导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 数据可视化导出 点击‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>数据可视化导出，弹出数据可视化导出信息项弹窗，‘导出类型’选择‘迁移导出’： 一键导出 点击‘一键导出’：关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：一键导出数据可视化会将所有已发布图表（含路径目录）、报表（含路径目录）、数据大屏（含路径目录）、图表模版全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’：进入数据可视化筛选列表页面，默认显示‘图表’标签页，并展示已发布图表数据项列表：标签页： 图表：显示所有已发布状态图表，以树形结构展示，支持按照‘图表名称’模糊匹配查找。 报表：显示所有已发布状态报表，以树形结构展示，支持按照‘报表名称’模糊匹配查找。 数据大屏：显示所有已发布状态数据大屏，以树形结构展示，支持按照‘数据大屏名称’模糊匹配查找。 图表模版：显示所有图表模版，列表形式展示，支持按照‘图表名称’模糊匹配查找。 勾选列表数据项，点击‘导出’按钮：关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：筛选导出数据可视化数据会将所有已发布图表（含路径目录）、报表（含路径目录）、数据大屏（含路径目录）、图表模版全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 标品导出 点击‘业务应用——>应用中心’，进入应用中心，点击‘应用列表’标签项；选择‘已安装’应用，点击操作，出现操作菜单：选择‘设计导出’，显示支持导出的各设计项： 模型导出 点击‘业务应用——>应用中心’，进入应用中心；点击已安装应用——>操作，出现操作菜单：选择‘设计导出——>模型导出’：打开导出信息弹窗： 一键导出 导出过程同《1.1.1.1 设计导出/环境迁移导出/模型导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.1.2 设计导出/环境迁移导出/模型导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 界面导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>界面导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.2.1 设计导出/环境迁移导出//界面导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.2.2 设计导出/环境迁移导出/界面导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 流程导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>流程导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.3.1 设计导出/环境迁移导出/流程导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.3.2 设计导出/环境迁移导出/流程导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 集成导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>集成导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.4.1 设计导出/环境迁移导出/集成导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.4.2 设计导出/环境迁移导出/集成导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 数据可视化导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>数据可视化导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.5.1 设计导出/环境迁移导出/数据可视化导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.5.2 设计导出/环境迁移导出/数据可视化导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 导出任务查看 点击‘业务应用——>应用环境’，进入应用环境：点击‘设计导出’，显示导出任务信息列表：点击导出任务项操作栏‘详情’，进入导出任务详情查看页：点击‘关联文件’，可保存下载导出文件：点击‘返回’按钮：回到导出任务信息列表页。 设计导入 环境迁移导入 进入导入目标环境，点击‘业务应用——>应用中心’，进入应用中心；选择要导入设计数据的已安装应用： 模型导入 导入 选择‘模型导入’：打开导入文件上传信息弹窗：选择要导入的json文件：选择文件后，显示待导入文件：点击‘确定’按钮，执行设计数据迁移导入：如果选择的导入文件类型为非迁移导出文件，则右上方提示（其它设计类型迁移导入文件类型同此）：导入文件选择正确，点击确定后，右上角提示导入信息：点击‘设计器——>模型设计器’： 验证导入结果 进入导入环境模型设计器，查看导入数据是否已成功导入： 界面导入 导入 选择‘界面导入’：打开导入文件上传弹窗：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入界面设计器，检查导出数据是否正确导入： 流程导入 导入 选择‘流程导入’：打开导入文件上传弹窗页面：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入流程设计器，检查导出数据是否正确导入： 集成导入 导入 选择‘集成导入’：打开导入文件上传弹窗：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入集成设计器，检查导出数据是否正确导入。验证连接器：验证数据流程：验证开放接口： 数据可视化导入 导入 选择‘数据可视化导入’：打开导入文件上传弹窗：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入数据可视化，检查导出数据是否正确导入：验证图表：验证报表：验证数据大屏：验证图表模版： 设计导入任务查看 导入环境，点击‘业务应用——>应用环境’，进入应用环境；点击‘设计导入’：显示所有设计导入信息列表：点击‘详情’，查看设计导入详细信息：点击‘返回’按钮，回到导入信息列表展示页： 同步部署 部署环境管理 创建部署环境 选择：业务应用——>应用环境，进入应用环境；默认显示当前所有已配置环境： 删除部署环境配置 未勾选任何已配置部署环境时，删除按钮不可用：勾选一条或多条已配置环境信息，点击”删除“，可完成已配置部署环境删除： 编辑部署环境配置 点击部署环境配置项操作栏‘编辑’操作，进入部署环境配置项编辑页：支持对所有配置项数据进行修改编辑；其中标红项为必须，即不能为空，且名称不能重复。点击‘返回’按钮，放弃本次编辑，回到部署环境配置项列表页：点击‘确定’按钮，保存编辑内容，并回到部署环境配置列表展示页： 部署环境详情查看 点击部署环境配置项，操作栏‘详情’，进入部署环境配置项详情查看页面：点击‘返回’按钮，回到部署环境配置列表展示页： 确认部署目标环境配置 进入应用环境，点击‘部署环境配置’，显示当前已配置环境列表：检查是否已配置同步部署目标环境，如已存在，无需再次配置。 模型部署…
依赖包 在业务工程的pom中增加数据可视化运行的依赖包 参考文档 如何添加数据可视化运行时依赖 数据可视化设计图表、报表和数据大屏 在数据可视化中设计好业务合适的图表，并且发布以后，在界面设计器中可以嵌入该图表同样处理的还有报表 在界面设计器中在页面中透出图表、报表和数据大屏 设置图表，选择已经对应的图表 可在表单以及详情的页面中嵌入对应的图表、报表和数据大屏 更新图表、报表和数据大屏 修改图表以后，需要更新发布，对应业务页面上才会更新最新的图表
某种情况下，开发人员期望自定以的字段发生变化后，需要修改其他的字段，这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段，设计元件 2: 在模型区域，搜索提交方式，如果找到了，就把该字段拖拽进来, 如果找不到，就在元件中的组件区域，拖拽一个文本字段，按照下面的配置进行配置，然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数，将其拖拽进来 3: 从模型区搜索提交数据，将其拖拽进来4: 从模型区搜索提交字段，将其拖拽进来 5: 发布 （记得刷新页面哦） 最后再到对应的设计器页面，选中该字段，进行配置 提交方式为blur或者change ， 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段，如果配置的指定字段，那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }
上下文在字段和动作中的应用 在业务场景中，常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时，我们需要配置相关「动作」中的上下文信息。 在 oinone 平台中，上下文主要分为以下三种： activeRecord：当前视图数据 rootRecord：主视图数据 openerRecord：触发弹窗的对象 参考文档：oinone内的主视图数据和当前视图数据使用介绍 activeRecord 表示当前视图的数据。例如，若动作配置在表单上，则指代当前表单的数据；若配置在 o2m、m2m 字段表格上，则指代选中的行数据。 rootRecord 表示根视图的数据。若当前视图是表单页，则代表表单的数据；若为表格页，则代表表格的数据。 openerRecord 表示触发弹窗的对象。例如，在弹窗内的字段或动作中，可通过 openerRecord 获取触发弹窗的信息。 这三者均为对象 (Object) 类型。 界面设计器配置 在 o2m、m2m 表格字段弹窗中携带当前视图数据 假设我们设计了一个包含 o2m、m2m 表格字段的表单页面。打开相关弹窗时，需将表单中的 code 数据传递至弹窗中。 选择相应的「动作」，如创建或添加。在右侧属性面板底部找到「上下文」，添加格式为对象 {} 的上下文信息。 以键值对的格式添加上下文信息：{code: rootRecord.code}。 设计弹窗时，将 code 字段拖入弹窗中。 完成设计后保存并发布。 大家可以看到，上下文中的key是 code，但是value是rootRecord.code，这里取的是rootRecord而不是activeRecord，因为我们上面讲过如果当前动作配置在o2m、m2m的字段表格上面，那么activeRecord就是表格选中的行，我们现在要取的是表单上的code字段，所以需要用rootRecord。 注意点：key需要是提交模型【前端视图】存在的字段才能传递。
界面设计器如果创建批量更新的动作 一、拖拽批量动作到表格区域 拖拽批量动作至表格区域，创建批量更新动作设置动作信息，设置完成之后点击保存 二、设置批量动作弹窗视图 点击设计弹窗，出现弹窗设计器界面将需要批量更新的字段拖入表单区，将待提交的数据需要展示字段拖入表格区域，比如更新名称，展示待提交数据的ID、名称、创建时间（注意：创建时间需要在表格中也展示）拖拽客户端动作进入动作区域，并设置动作信息，客户端行为选择批量更新动作设置成功，点击保存 三、发布设计好的批量动作，在运行页面看看效果 选择批量更新的数据之后点击批量更新将名称修改为‘批量修改名称’查看最后实现效果
