阅读此文章前，默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档
从左侧组件库找到“图表”组件，拖入到视图区域，在右侧属性面板选择已经发布过的图表
查询条件为rsql语法，里面的变量需要用
${}包裹起来，其中的activeRecord为当前视图的数据对象，下图中的activeRecord.field000015为推荐导购员的对象，我们拿了这个对象的id传到查询条件内
通过浏览器的开发者工具，我们可以看到，选中导购员后查询条件发生了改变，页面的数据也同步发生了变化
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/16623.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
目录 依赖包安装GraphQL的工具登录gql导出生成json文件子业务工程中导入示例代码 简介 通过调用导出接口，将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址：https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL，直接返回导出数据。适用于通过浏览器直接下载文件。 按模块示例调用代码 请求示例： mutation { uiDesignerExportReqMutation { download/export( data: { module: "demo_core", fileName: "demo_meta", moduleBasics: false } ) { jsonUrl } } } module参数：模块编码； fileName参数：指定⽣成的json⽂件名称； moduleBasics参数：指定是否只导出模块基础数据，如果为true，只导出内置布局、模块菜单、菜单关联的动作。 如果为false，还会导出模块内的所有页⾯，以及页⾯关联的动作元数据、页⾯设计数据 等等。 默认值为false。 按菜单导出 mutation { uiDesignerExportReqMutation { download/export( data: { menu: { name: "uiMenu0000000000048001" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } menu参数：菜单对象，指定菜单的name。只会导出该菜单及其绑定页⾯，不会递归查询⼦菜单 fileName参数：指定⽣成的json⽂件名称 relationViews参数：指定是否导出关联页⾯，默认为false，只导出菜单关联的页⾯。如果为true，还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 指定页⾯导出 mutation { uiDesignerExportReqMutation { download/export( data: { view: { name: "xx_TABLE_0000000000119001" model: "ui.designer.TestUiDesigner" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } view参数：视图对象，指定视图的name和model fileName参数：指定⽣成的json⽂件名称 relationViews参数：指定是否导出关联页⾯，默认为false，只导出菜单关联的页⾯。如果为true，还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 导出组件 导出全部组件数据 mutation { uiDesignerExportReqMutation { downloadWidget/exportWidget(data: { fileName: "demo_widget" }) { jsonUrl } } } fileName参数：指定⽣成的json⽂件名称 注意：⾃定义组件的元数据归属于页⾯设计器（ui_designer） 因此导⼊元数据的模块（module）并不是业务模块。组件导⼊建议使⽤pro.shushi.pamirs.metadata.manager.core.helper.WidgetInstallHelper 导出全部组件⽂件 当开发环境，和导⼊环境的oss不互通时，可通过⼀下⽅法导出⾃定义组件的css和js⽂件压缩包，在导⼊时⽀持指定zip⽂件上传到oss，并替换导⼊组件数据中的css和js⽂件路径。 mutation { uiDesignerExportReqMutation { downloadWidgetFile/exportWidgetFile(data: { fileName: "demo_widget" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码（运行时数据） @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoAppMetaInstall implements MetaDataEditor { @Autowired private ApplicationContext applicationContext; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if (!doImport())…
在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action
在业务操作中，用户通常期望能够在创建页面后立即进行编辑，以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能，使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中，我们首先需要设计出对应的页面。完成页面设计后，将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能，即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下： 前端自定义动作 一旦页面配置完成，前端需要对这个动作进行自定义。以下是一个示例的代码： @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤，我们实现了一个更智能的操作流程，使用户能够在创建页面的同时进行即时的编辑，从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅，同时也为用户提供了更灵活的工作流程。
目录 依赖包安装GraphQL的工具登录gql导出生成json文件业务工程中导入示例代码生产环境使用流程设计器 简介 通过调用导出接口，将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址：https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL，直接返回导出数据。适用于通过浏览器直接下载文件。 指定模块导出 请求示例： mutation { workflowDesignerExportReqMutation { export(data: { module: "demo_core", fileName: "workflow_meta" }) { jsonUrl } } } 指定流程编码导出 请求示例： mutation { workflowDesignerExportReqMutation { export(data: { workflowCode: "WF0000000000132500", fileName: "workflow_meta" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_WORKFLOW_META_PATH = "install/workflow_meta.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_WORKFLOW_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装流程设计器元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_WORKFLOW_META_PATH); } } } catch (Exception e) { log.error("初始化流程设计器导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) { if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装-流程设计器数据"); // 支持远程调用,但是执行的生命周期必须是LifecycleCompletedAllInit或之后. 本地如果安装了设计器,则没有要求 DesignerInstallHelper.bizInitialization(INSTALL_WORKFLOW_META_PATH); } } } 生产环境使用启动设计器 生产环境如无部署设计器docker镜像，可下载我们oinone-op-ds-all-mini-workflow镜像，单独安装流程设计器。由于导入的是流程设计器的数据，需要在流程设计器中编辑流程，合理设置相关的人员和自定义函数
