阅读此文章前，默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档
从左侧组件库找到“图表”组件，拖入到视图区域，在右侧属性面板选择已经发布过的图表
查询条件为rsql语法，里面的变量需要用
${}包裹起来，其中的activeRecord为当前视图的数据对象，下图中的activeRecord.field000015为推荐导购员的对象，我们拿了这个对象的id传到查询条件内
通过浏览器的开发者工具，我们可以看到，选中导购员后查询条件发生了改变，页面的数据也同步发生了变化
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/16623.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 了解联动关系的相关内容。【界面设计器】左树右表 名词解释 字段组件：为字段提供交互能力的组件，一个字段对应一个组件。 关联关系字段：在模型中与其他模型建立关联关系的字段。 可选项：选择组件使用的具体选项，可以是静态的，也可以是动态的。 选中：用户在使用选择组件时，针对某一选项标记或提取这一选项。 概述 本章内容主要是对【界面设计器】左树右表内容中提及的字段相关内容的补充，并非完整教程，有不清楚的地方可以交替阅读进行理解。 场景 沿用【界面设计器】左树右表中的两个场景。 我们可以做出这些优化： 将【商品类目】的【上级类目】组件改为【级联】组件。其第1级为【商品类目】，使用自关联依次展开。 将【部门】的【上级部门】组件改为【树下拉】组件。其第1级为【公司】，第2级为【部门】，【部门】使用自关联依次展开。 PS：本章不提供任何步骤介绍，请根据场景内容自行探索。 扩展知识 具备选择行为的组件 常用的选择组件可以进行一些基本的划分。 从可选数量来看 单选：只能选一个值。 多选：可以选择多个值。 从业务类型来看 枚举(Enum)：通过数据字典提供可选项。 布尔(Boolean)：可以看作一个特殊的枚举，其可选范围只有是和否。 一对一(O2O)和多对一(M2O)：对一(X2O)类型仅支持单选，通过关联模型的数据源提供可选项。 一对多(O2M)以及多对多(M2M)：对多(X2M)类型仅支持多选，通过关联模型的数据源提供可选项。 从交互形态来看 单选框(Radio) 多选框(Checkbox) 下拉选择(Select) 树下拉(TreeSelect) 级联(Cascader) 其中，树下拉(TreeSelect)和级联(Cascader)组件要求数据源可以构成树结构，因此通常使用这两个字段组件的都是关联关系字段。 下拉选择(Select) 在介绍树下拉/级联之前，我们有必要先了解一下在关联关系字段中使用下拉选择(Select)这一字段组件的表现情况。 根据关联关系字段对应的关联模型，我们可以获得其组件所需的可选项，在用户进行选中后，该组件将获得一个选项值，并且在表单提交、计算公式等被使用。 通常情况下，我们通过queryPage接口获取分页后的可选项列表，再通过点击/滚动方式获得其他页的可选项供用户选择。 树下拉(TreeSelect)/级联(Cascader) 与上述介绍的下拉选择(Select)不同点在于，其可选项是通过【联动关系】配置进行获取的，它并不要求直接获取到真正可以被选择的可选项，而是通过树结构依次展开的。用户可选择的可选项一定是与关联关系字段对应的关联模型相同的树节点。对于无法选择的节点，其主要作用在于将数据进行划分，以便于用户进行选择。 由于树节点具备特殊性，无法直接使用平台的任何一个模型。因此树结构被定义在UiTreeNode模型中，该模型是描述树结构的基本模型，其提供了多个接口为树结构的查询提供了基本能力。 通常情况下，在创建页面，我们通过UiTreeNode模型的fetchChildren接口依次获取其子节点。在编辑页面，我们通过fetchAll、reverselyQuery、reverselyQueryWithSize这三个接口获取回填的数据，根据不同情况进行调用。虽然使用来不同的接口，但最终都会使用当前模型的queryPage接口获取数据。
在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action
上下文在字段和动作中的应用 在业务场景中，常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时，我们需要配置相关「动作」中的上下文信息。 在 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需要是提交模型【前端视图】存在的字段才能传递。
场景 根据测试商品，汇总数据通过测试统计商品透出到数据可视化图表数据； 统计商品类目的最大库存以及平均售价信息 测试商品模型 @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品", labelFields = "name") @Model.Code(sequence = "SEQ", prefix = "IT", size = 8) public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Html @Field(displayName = "商品描述") private String description; @Field.Money(D=2) @Field(displayName = "商品价格") private BigDecimal itemPrice; @Field.Integer @Field(displayName = "商品库存") private Long inventoryQuantity; …. 测试商品统计 @Model.model(DemoItemStatistics.MODEL_MODEL) @Model(displayName = "测试商品统计", labelFields = "name") public class DemoItemStatistics extends IdModel { private static final long serialVersionUID = 5626273740800455515L; public static final String MODEL_MODEL = "demo.DemoItemStatistics"; @Field.String @Field(displayName = "类目名称") private String categoryName; @Field.Integer @Field(displayName = "商品库存") private Long inventoryQuantity; @Field.Money @Field(displayName = "商品价格") private BigDecimal itemPrice; } 自定义商品类目统计数据 【注意】 图表设计器能获取到的接口需指定：category = FunctionCategoryEnum.QUERY_PAGE，且出参和入参类型要与本示例一致 @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "商品统计列表", category = FunctionCategoryEnum.QUERY_PAGE) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.LOCAL, FunctionOpenEnum.REMOTE, FunctionOpenEnum.API}) public Pagination<DemoItemStatistics> queryPage(Pagination<DemoItemStatistics> page, IWrapper<DemoItemStatistics> queryWrapper) { List<DemoItemStatistics> list = new ArrayList<>(); List<DemoItem> items = demoItemService.queryListByWrapper(Pops.<DemoItem>lambdaQuery() .from(DemoItem.MODEL_MODEL) .eq(DemoItem::getStatus, ItemStatusEnum.ACTIVE)); if(CollectionUtils.isEmpty(items)) return page; Map<Long, List<DemoItem>> itemMap = items.stream().collect(Collectors.groupingBy(DemoItem::getCategoryId)); for (Map.Entry<Long, List<DemoItem>> longListEntry : itemMap.entrySet()) { long categoryId = longListEntry.getKey(); List<DemoItem> demoItems =…
