数据可视化-图表在业务页面如何加动态查询条件

前提

阅读此文章前,默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档

1.新建一个表单视图,要求表单的模型里有动态查询条件的字段

从左侧组件库找到“图表”组件,拖入到视图区域,在右侧属性面板选择已经发布过的图表
数据可视化-图表在业务页面如何加动态查询条件

2.将“组件库”->“模型”下的查询条件字段拖入到视图区域,然后再选择图表,设置图表组件属性面板内的“查询条件”

查询条件为rsql语法,里面的变量需要用${}包裹起来,其中的activeRecord为当前视图的数据对象,下图中的activeRecord.field000015推荐导购员的对象,我们拿了这个对象的id传到查询条件内
数据可视化-图表在业务页面如何加动态查询条件

3.绑定菜单后,可以去运行时页面查看效果

通过浏览器的开发者工具,我们可以看到,选中导购员后查询条件发生了改变,页面的数据也同步发生了变化
数据可视化-图表在业务页面如何加动态查询条件

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/16623.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
nation's avatarnation数式员工
Previous 2024年8月27日 pm6:35
Next 2024年8月28日 pm3:38

相关推荐

  • 集成开放-开放接口如何鉴权加密

    使用前提 已经阅读过文档【oinone 7天从入门到精通】的6.2章节-集成平台 已经依赖了内置模块集成平台eip和集成设计器eip_designer 一、为调用方创建应用 方式一: 通过集成设计器创建 可以选择开发接口列表中哪些接口授权该应用开放使用 方式二: 通过手动请求创建 curl –location 'http://127.0.0.1:8190/pamirs/eip' \ –header 'Content-Type: application/json' \ –header 'Cookie: pamirs_uc_session_id=3b3ed2fcade84fc49f2d94146a7694a0' \ –data '{"query":"mutation {\n eipApplicationProxyProxyMutation {\n create(data: {name: \"testOpen\", encryptType: RSA, description: \"test\"}) {\n name\n encryptType\n description\n openInterfaceList {\n name\n interfaceName\n id\n }\n appKey\n }\n }\n}\n","variables":{}}' 应用创建完成后,可以在表格页面开启使用,再通过查看密钥拿到appKey和appSecret 创建成功后可以获取到应用的appKey和appSecret 二、根据appKey和appSecret获取accessToken curl –location 'http://127.0.0.1:8094/openapi/get/access-token' \ –header 'Content-Type: application/x-www-form-urlencoded' \ –data-urlencode 'appKey=c65a8d76a93f4427b3702c55903ddda2' \ –data-urlencode 'appSecret=W2cMGZ0X6Av0kQOoKT4TWTaBalXkGsignr1M0Yi7+JJWJHVniiTz2mb9THGA7W5F' 三、验证请求 header中的signature签名参数在使用代码调用的时候需要使用教程中的SignUtil.signTopRequest()工具方法生成 curl –location 'http://127.0.0.1:8094/openapi/pamirs/queryById4Open' \ –header 'accessToken: T1SSd8aiJCFhsTyQepLCzRqcVsDH3wTjg9srXEZTp/QwsXdMnjf5OE1Nq/UYfEDp' \ –header 'signature: A1A958E1843E26BA002901058B2964C3' \ –header 'Content-Type: application/json' \ –data '{ "id": "111" }' 示例代码 eip开放接口md5加密参数示例代码此为md5加密方式的示例,解压后,将里面api目录下的文件复制到自有主工程的api子工程下,core目录下的文件复制到自有主工程的core子工程下

    2024年5月31日
    1.2K00
  • 界面设计器创建批量更新的动作

    界面设计器如果创建批量更新的动作 一、拖拽批量动作到表格区域 拖拽批量动作至表格区域,创建批量更新动作设置动作信息,设置完成之后点击保存 二、设置批量动作弹窗视图 点击设计弹窗,出现弹窗设计器界面将需要批量更新的字段拖入表单区,将待提交的数据需要展示字段拖入表格区域,比如更新名称,展示待提交数据的ID、名称、创建时间(注意:创建时间需要在表格中也展示)拖拽客户端动作进入动作区域,并设置动作信息,客户端行为选择批量更新动作设置成功,点击保存 三、发布设计好的批量动作,在运行页面看看效果 选择批量更新的数据之后点击批量更新将名称修改为‘批量修改名称’查看最后实现效果

    2024年4月22日
    3.4K00
  • 集成接口与数据流程的使用

    连接器 点击连接器tab,进入连接器页面,默认选择应用 应用 点击新增应用资源,抽屉打开创建应用的表单 创建应用成功之后,点击应用卡片,进入应用详情页 点击新增API,出现新增API与新增webservice的选项 点击新增API或者新增webservice,抽屉打开新增页面,需设置api名称、url、描述、请求参数、响应结果等信息 数据库 点击数据库tab,切换至数据库列表页 点击新增db资源,抽屉打开新增页面 数据库创建完成之后,点击数据卡片,可进入数据库详情页 点击新增API,抽屉打开新增页面,新增页面包含API名称、描述、请求参数、数据库操作、响应结果等内容(注意:响应结果中的取值表达式的值为查询结果中的列名,如列名取了别名,就写别名,截图有例子) 数据流程 点击数据流程tab进入数据流程列表页 点击创建流程,选择应用之后,点击创建,进入数据流程创建页 点击名称处的编辑操作可设置流程名称 触发-定时触发 点击触发节点,选择定时触发 设置好定时信息之后,点击保存(到定时时间之后会自动触发流程) 触发-消息触发 点击触发节点,触发方式选择消息触发,输入消息标识,设置参数(触发时根据消息标识触发,如果存在两个相同的消息标识,那触发时两个都会触发) 设置完成参数之后,点击确定 再点击保存,触发设置完成 消息触发的方式,可直接调用接口,或者写入到代码中触发,以下为接口触发方式 先调用登录接口 再调用消息触发接口(msgId为消息标识) 点击加号可添加节点,可选择API、新增数据、更新数据、获取数据、删除数据、更新流程参数、引用逻辑、延时、条件分支、子流程、循环、站内信、邮件、短信等节点 API节点 点击API节点 点击节点可设置节点名称 输入节点名称 点击节点设置,进入设置页面 先选择资源应用,再选择API(资源应用的数据为连接器创建的数据) 设置赋值表达式(当字段为必填,且无默认值时,赋值表达式必填) 设置完成点击,保存 API的响应结果可作为下个节点的参数 提示:当参数类型为对象非数组时,赋值表达式配置在对象的下个层级中,当参数类型为对象数组时,赋值表达式配置在对象中,具体见如下图片 对象非数组 对象数组 ### 循环节点-列表循环 设置循环节点 #### 设置循环列表 设置完成,点击保存(循环次数为获取的数据条数) 循环里面可添加节点 设置循环里面的节点,如选择新增节点,点击新增节点之后,选择应用,模型数据保存方式,点击创建 字段的表达式可选择循环节点的参数 设置完内容之后,点击保存 #### 循环节点-次数循环 点击循环节点,循环模式选择次数循环 循环开始值、结束值、步长,可通过表达式选择数字类型的,也可自己手动输入 设置完成之后,点击保存 ### 更新流程参数 第一步先进行流程配置 点击添加新参数 参数类型支持四种,文本、数值、日期(日期时间)、布尔 输入参数名称之后点击保存 保存成功之后,再切换至流程设计 第二步添加更新流程参数节点 第三步设置流程参数节点 进入节点设置之后,点击添加参数 选择参数,给参数赋值(注意布尔类型的值,直接输入ture或者false) 参数值设置完成之后点击保存 设置的参数可用于下个节点的赋值表达式中(如更新数据节点) 设置完成点击保存 ### 引用逻辑 添加引用逻辑节点 设置引用逻辑节点 选择应用、模型、函数,设置参数 配置表达式,配置完成,点击确定 节点信息设置完成之后,点击保存 ### 新增数据、更新数据、获取数据、删除数据、延时、条件分支、子流程、循环、站内信、邮件、短信节点与流程设计器用法一致 流程发布 流程设置完成之后,点击发布流程(如果是定时触发,将会到触发时间自动触发,如果是消息触发,当发送对应消息时触发,具体见上文中写的触发-消息触发)

    2023年11月10日
    1.1K00
  • 界面设计器的导入导出

    目录 依赖包安装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())…

    2024年5月16日
    2.3K00
  • 自定义字段的数据联动

    某种情况下,开发人员期望自定以的字段发生变化后,需要修改其他的字段,这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 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); } }

    2023年11月9日
    2.7K00

Leave a Reply

Please Login to Comment