页面设计

1. 功能说明

页面设计时界面设计器中「页面」模块的设计入口,在这个界面,进行页面的设置、搭建、设计、排版。

主要分为顶部操作栏、左侧工具栏、中部设计画布区、右侧属性面板。

image.png

2. 操作栏

进入页面设计,顶部显示了页面的标题,以及返回、发布等操作。

2.1 发布

页面设计完成后,点击「发布」运行页面生效。若不点击发布,页面也有自动保存的功能,但在发布前,自动保存也等同于草稿,不会正式生效。

发布时如果有属性不符合校验规则(必填的属性未填、输入的内容校验不通过),会发布失败,相应的字段会特殊标记,需要查看并修改属性。

image.png

2.2 显示/隐藏母版

进入页面设计时默认不展示母版,可以手动操作显示母版

3. 工具栏

左侧的工具栏中包括组件库、页面设置等模块。

3.1 组件库

组件库中包含组件和模型,组件是当前设计器支持的所有组件,模型是页面所在模型下的所有字段和动作。

3.1.1 组件

组件中展示了系统支持的所有组件。包含

1)布局类组件,如分组、选项卡等,使用布局组件可以将页面进字段分类、分页;

2)字段类组件,如单行文本、整数、日期等等,使用字段类组件时都会在模型下对应创建一个字段;

3)动作类组件,如跳转动作、提交动作、链接动作等。

image.png

3.1.2 模型

组件库顶部,由组件可切换为模型:模型选项下,会展示当前模型的所有字段,以及系统默认动作。可以直接拖拽字段至设计画布中,会应用形成某个组件,可对组件进行多样的属性设置,优化交互。

image.png

3.1.2 组件和模型有什么区别

1展示内容维度不同

组件中展示的内容是组件信息,如分组、选项卡、单行文本、文件上传等;模型中展示的是模型下已有的所有字段。

2使用功能不同

组件中的组件使用前需要在模型中创建一个字段,当然,创建好的字段也会存在于模型中;模型中的字段可直接使用,并且使用时会在设计画布中对应生成个默认组件。

3使用场景不同

如果模型中已经存在目标字段,应直接选择从模型中拖拽字段;如果模型中没有需要的字段,可以在页面中增加一个组件,实际上也是在新增一个字段。

3.2 页面设置

页面设置中可以修改当前页面的标题、分组、页面描述,同时也是给页面上传缩略图的唯一入口。

image.png

4. 设计画布

将组件或字段拖拽至设计画布区,会生成样式。点击组件,右侧可对其进行设置,大部分属性可实时在画布中展示效果。

5. 属性面板

右侧属性面板抽屉中可以设置属性或查看字段信息,通过不同的属性配置化实现组件的多样化。

image.png

5.1 属性

属性中包括基本信息(如标题、占位提示、描述说明等)、校验信息(如是否必填、长度校验等)、交互信息(如排序方式、是否展示计数器等)

image.png

5.2 字段

首次从组件中拖拽,会先展示字段信息,并且是需要先创建一个字段,字段创建成功后,再次切换字段选项,只读展示当前组件所对应的字段基本信息。同理,如果是直接从字段中拖拽,字段选项中,只读展示当前字段基本信息。

image.png

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9405.html

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年6月20日
下一篇 2024年6月20日

相关推荐

  • 3.3 Oinone以模型为驱动

    模型(model):Oinone一切从模型出发,是数据及对行为的载体: 是对所需要描述的实体进行必要的简化,并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。模型由元信息、字段、数据管理器和自定义函数构成; 符合面向对象设计原则包括:封装、继承、多态。 本章会带大家快速而全方位地认识Oinone的模型。会从以下几个维度去对模型展开详细介绍。 构建第一个Model 模型的类型 模型的数据管理器 模型的继承 模型编码生成器 枚举与数据字典 字段序列化方式 字段类型之基础与复合 字段类型之关系与引用

    Oinone 7天入门到精通 2024年5月23日
    1.5K00
  • 数据大屏

    1. 业务场景 数据大屏是利用相应的系统来分析数据,通过图形的形式为企业提供客观、直接的数据分析结果,让业务人员和企业决策者直观面对数据背后的信息,实时监测企业数据,给予更直观的决策场景体验,助力企业数字化运营升级。 2. 操作流程 1)进入数据可视化,进入数据大屏tab,维护分组信息; 2)在二级分组名称后点击“+”【添加数据大屏】,对数据大屏进行设计; 3)创建完成后可以【编辑】数据大屏; 4)数据大屏完善后,可以点击【发布】数据大屏,则数据大屏此时可以被显示器引用播放; 5)如果数据大屏有更新,则可以点击【更新发布】; 6)如果数据大屏数据不再可以公开使用,则需要通过【隐藏】功能将数据大屏的引用权限收起,但不影响已被使用的数据大屏; 7)隐藏后可以【取消隐藏】,数据大屏恢复隐藏前的状态和功能,可以被引用 。 3. 操作流程图解 3.1 创建分组 1)操作流程:创建分组 2)操作路径:数据可视化-数据大屏-创建分组 3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建数据大屏 3.2 编辑分组名称 1)操作流程:选择分组-编辑分组名称 2)操作路径:数据可视化-数据大屏-编辑分组名称 3)鼠标移动至需要修改的分组上,点击出现的「编辑图标」,可以修改分组名称,修改后分组名称实时更新 3.3 删除分组 1)操作流程:选择分组-删除分组 2)操作路径:数据可视化-数据大屏-删除分组 3)鼠标移动至需要删除的分组上,当分组下无报表时出现「删除图标」,可以点击图标后删除分组,删除一级分组时对应所有的二级分组也会被删除,删除后消失,只有分组下没有数据大屏的分组才能直接删除成功 3.4 创建数据大屏 1)操作流程:选择二级分组-创建数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-创建数据大屏 3)鼠标移动至需要创建数据大屏的二级分组上,出现「+」,点击图标后=需要填写数据大屏标题 a数据大屏标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复; 4)输入标题后进入设计页面 3.5 编辑数据大屏 1)操作流程:选择数据大屏-编辑数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-编辑数据大屏 3)只能编辑未发布或者已发布但没有被隐藏的数据大屏,且存在三种编辑情况 a. 第一种:点击数据大屏标题后的编辑图标,仅能编辑数据大屏标题; b. 第二种:点击数据大屏中的数据大屏标题、备注后的编辑图标,可以直接编辑数据大屏标题; c. 第三种:点击【编辑】按钮,进入数据大屏设计页面,带出已有的组件内容,编辑时的规则与创建时一致,编辑后可以点击保存进行更新,如果未保存直接返回,则编辑无效; 4)编辑后实时生效,数据大屏信息保持展示最新效果 3.6 删除数据大屏 1)操作流程:选择数据大屏-删除数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-删除数据大屏 3)未发布或者已发布但没有被隐藏的数据大屏,并且没被引用,才展示数据大屏菜单名称后的删除图标 4)删除后数据大屏消失 3.7 复制 1)操作流程:选择数据大屏-复制数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-复制数据大屏 3)点击【复制】按钮,复制成功,名称为copy of 原数据大屏标题,展示在原数据大屏分组的最后一个 3.8 发布 1)操作流程:选择数据大屏-发布数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-发布 3)选择单个未发布且没有被隐藏的数据大屏,点击【发布】按钮,数据大屏状态变为已发布,展示最近发布时间; 4)如果数据大屏发布后有更新内容,会展示的更新类型:更新数据大屏信息/更新数据大屏内容 3.9 查看最近一次发布的版本 1)操作流程:选择数据大屏-查看最近一次发布的版本 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3)当数据大屏发布后有更新,在最近发布时间左侧展示【查看】,在最近发布时间下展示更新的类型,点击查看可以查看最近发布的版本 3.10 更新发布 1)操作流程:选择数据大屏-更新发布数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3)选择单个已发布且没有被隐藏的数据大屏,并且该数据大屏在上次发布后有所更新,可以点击【更新发布】按钮,将最新的数据大屏内容发布至业务系统,业务系统引用的数据大屏为最新内容; 4)如果更新了内容,但未点击更新发布,则展示的仍是上次发布的数据大屏 3.11 隐藏 1)操作流程:选择数据大屏-隐藏数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-隐藏数据大屏 3)数据大屏默认不隐藏,点击数据大屏左侧的是否隐藏可以切换 a. 未发布的数据大屏,较隐藏前,不可以操作【发布】,可以【取消隐藏】; b. 已发布的数据大屏,较隐藏前,只能操作【导出图片、导出excel、取消隐藏】; 4)隐藏后的数据大屏不可以被用于展示在其他大屏上,但不影响已经被引用的数据 3.12 取消隐藏 1)操作流程:选择数据大屏-取消隐藏数据大屏 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-取消隐藏数据大屏 3)隐藏后的数据大屏可以取消隐藏,切换是否隐藏=否,取消隐藏后,数据大屏恢复隐藏前的状态和功能,可以被引用 3.13 查看引用 1)流程:选择图表-查看被哪些报表/数据大屏/页面引用 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更多-查看引用 3)选择具体的数据大屏,查看当前数据大屏被引用的所有信息 3.14 不允许别人编辑 1)流程:选择数据大屏-不允许别人编辑 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人编辑 3)选择自己创建的数据大屏,对数据大屏是否允许其他人编辑进行设置;如果设置为不允许,则其他人无法编辑数据大屏 3.15 不允许别人引用 1)流程:选择图表-更多-不允许别人引用 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人引用 3)选择自己创建的数据大屏,对数据大屏是否允许他人引用进行设置;如果设置为不允许,则其他人无法选择到 3.16 导出图片 1)操作流程:选择数据大屏-导出图片 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-导出图片 3)选择数据大屏后,点击【导出图片】按钮可以将当前数据大屏导出为图片 3.17 导出EXCEL 1)操作流程:选择数据大屏-导出EXCEL 2)操作路径:数据可视化-数据大屏-二级分组-数据大屏-数据大屏导出EXCEL 3)选择数据大屏后,点击【导出EXCEL】按钮可以将当前数据大屏包含的图表导出为EXCEL 4. 数据大屏设计页面 4.1 缩放自适应 1)流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)进入页面后,默认按照当前屏幕展示最适合的数据大屏尺寸,可以通过+、-进行自定义缩放,每次缩放10% 4.2 全屏 1)流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)进入页面后,设置完成,可以【全屏】查看效果,按esc退出全屏 4.3 保存 1) 流程:创建数据大屏-进入数据大屏设计页面 2) 操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3) 进入页面后,设置完成后进行保存,数据大屏保持最新内容 4.4 添加、编辑、删除组件 1)流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)可以添加图表、文本、通用标题、倒计时、时间器、图片、轮播图、视频、边框等组件;图表组件中,一个图表只能添加一次,其他组件不限制数量; 4)所有组件添加后均可进行设置样式,有编辑权限的图表组件可以通过【编辑】图标直接进入图表设计页面; 5)添加后均可删除,删除后组件不再展示在数据大屏画布中,可以重新添加 4.5 数据大屏设置 1)操作流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)设置数据大屏时可以设置屏幕的宽高、背景颜色、背景图片、主题 a. 宽高:根据数据大屏需要投放的屏幕大小进行设置; b. 背景颜色:当数据大屏无图片背景时可以调整背景颜色; c. 背景图片:支持为数据大屏上传一张图片作为背景; d. 主题模版:可任选其一,需要先选定模版后再进行设计,不然设计完后再修改模版,会清空已选组件。 4.6 图表组件设置 1)操作流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)拖入图表组件,可与边框合为一体,可以设置图表的显示内容、边框信息、动画效果、刷新频率 a. 图表显示内容:展示标题、副标题、描述、标签、图例,一屏展示条数,原图表有的内容在设置展示后展示在数据大屏,原图表没有的内容设置展示后不生效; b. 边框信息:包括边框样式、背景颜色、边框线条颜色、展示边框标题、边框标题内容、边框标题颜色、边框标题字体大小; c. 动画效果:可以设置自动轮播,为是时可以设置结束后停顿时长、速度、切换形式; d. 刷新频率:设置图表获取数据的频率,自动刷新、刷新频率。 4.7 文本组件设置 1)操作流程:创建数据大屏-进入数据大屏设计页面 2)操作路径:数据可视化-数据大屏-创建/编辑-设计页面 3)拖入文本组件后,可以输入多行文本,可以设置内容、对齐方式、字体大小、字体加粗、字体颜色、背景颜色、边框样式、文字滚动、结束后停顿、速度 4)当文字滚动开启时,文字会按照一行展示,通过设置结束后停顿和速度来控制文字滚动的效果 4.8 通用标题组件设置…

    2024年6月20日
    1.4K00
  • 3.5.7.4 自定义页面

    页面是什么 在Oinone前端体系中,页面是一个核心概念,它代表着终端用户所看到的当前视图。这个视图可以有多种形式,主要取决于页面是如何定义和构建的。在深入理解页面之前,我们需要了解两个关键的功能:自定义布局 和 自定义母版。 作用场景 自定义布局 提供了布局调整的强大功能,但在某些情况下,它可能无法完全满足特定的需求。这时,自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充,允许开发者从更深层次自由地控制和设计用户界面。 当标准布局无法实现所需的视觉效果或功能时,自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计,添加特定的交互元素,或者整合复杂的业务逻辑,以创造独特且丰富的用户体验。 自定义页面 自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例,展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./view: 图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件 首先,我们定义了一个名为 CustomViewWidget 的 TypeScript 组件,并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件 其次,我们创建了对应的 Vue 单文件组件 CustomView.vue,用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局 接下来,我们使用 registerLayout 函数注册了一个表格视图布局,并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例 效果 图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用 当我们注册了自定义视图后,它就可以在表格视图中被使用。在表格视图的布局中,我们通过 标签将自定义视图嵌套在表格中,从而覆盖了表格的默认布局 5. 入参一致性 值得强调的是,registerLayout 函数和自定义布局的规则是一致的,这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则,从而实现更加灵活和统一的视图布局设计 与内置组件结合 1. 注册视图元素布局 首先,我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…

    2024年5月23日
    1.6K00
  • 3.6 问题排查工具

    当前端发起对应用的访问时,如果出现错误,那么我们可以通过以下方式进行简易排查,如果排查不出来,则也可以把排查工具给出的信息发送给Oinone官方售后进行进一步分析。本文将通过模拟异常信息,来介绍排查工具,提供了哪些辅助信息帮我们来快速定位问题。 排查工具基础介绍 通过前端页面的 /debug 路由路径访问调试工具的页面,假设我们的前端页面访问地址为http://localhost:6800,那么我们的排查工具请求路径就是 http://localhost:6800/debug排查工具可以帮我们排查前端页面元数据异常和后端接口的异常 排查前端页面元数据 将问题页面浏览器地址栏内 page 后的部分复制到调试工具的 debug 路由后重新发起请求,如图可以看到调试工具展示的信息,可以根据这些信息排查问题。 排查后端接口 后端接口出现问题后,打开(在原页面)浏览器的调试工具,切换到“网络”的标签页,在左侧的历史请求列表中找到需要调试的请求,右键会弹出菜单,点击菜单中的 “复制”,再次展开该菜单,点击二级菜单中的“以 fetch 格式复制”,这样可以复制到调试所需要的信息 2.复制调试信息到“接口调试”标签页内的文本框内,点击“发起请求”按钮获取调试结果 我们可以看到页面展示了该接口的各种调试信息,我们可以据此排查问题。 场景化的排查思路 业务代码中存在代码bug 报错后发起调试请求,我们可以看到,调试工具直接给出了异常抛出的具体代码所在位置,此时再切换到“全部堆栈”下,可以看到是业务类的233行导致的空指针异常,查看代码后分析可得是data.getName().eqauls方法在调用前未做条件判断补全该判断后代码可以正常执行 业务代码中没有直接的错误,异常在平台代码中抛出 报错后发起调试请求可以看到异常不在业务代码内再切换到“全部堆栈”,可以看到具体异常信息,提示core_demo_item表出现了重复的主键,该表是DemoItem模型的我们还可以切换到“sql调试”的标签页,可以看到出错的具体sql语句经过分析可以得知是240行的data.create()�重复创建数据导致的。 三、排查工具无法定位怎么办 当我们通过排查工具还是没有定位到问题的时候,可以通过调试页面的“下载全部调试数据”和“下载调试数据”按钮将调试信息的数据发送给官方售后人员帮助我们定位排查问题。 点击页面最顶部的“下载全部调试数据”按钮,可以下载页面调试数据和接口调试数据点击“调试接口”标签页内的“下载调试数据”按钮,可以下载接口调试数据 四、排查工具细节

    2024年5月23日
    1.9K00
  • 高级组件

    本篇主要结合业务场景介绍高级组件的使用方法。 级联选择/树选择 级联选择与树选择是同一类业务场景、不同的交互体验,在这里我们一起说明。 业务场景 行业分类、产品类目/分类等自关联场景,案例以行业分类说明。 操作步骤 Step1:搭建模型 搭建行业模型,在行业模型中创建多对一字段“上级行业”,指多个子行业对应一个上级行业。如下图: Step2:界面设计 创建行业的表格视图,绑定菜单,并且在此视图中增加“跳转动作 – 新增行业”; 创建新增行业表单,将“上级行业”拖进画布中,组件切换为“级联选择”,属性面板配置“选项字段、搜索字段、透出字段”,平台低代码为每个模型自动生成了名称、编码字段,如果不使用平台提供的名称、自建名称时,需要配置这三个字段; 为“上级行业”设置联动关系,自关联默认选择行业、标题定义为行业名称、自关联的字段为上级行业。 配置后发布表格、表单视图,即可获得级联选择效果。 表单视图中将“上级行业”切换为“树选择”组件,在发布后,即可获得树选择效果。 Step3:效果展示 级联选择 树选择

    2024年6月20日
    1.9K00

Leave a Reply

登录后才能评论