组件介绍

在设计页面时,页面中的所有内容均是由组件组成,每个组件有不同的属性,可以灵活的对每个组件的属性进行设置,以满足业务场景。

组件分为四类,分别是布局、字段、动作、数据

1. 布局

布局类组件主要用于页面的样式排版。

  • 分组:类似一个容器,可以把业务含义相近的内容放在这个分组容器内。
  • 选项卡:类似一个容器,每个选项卡可以添加多个选项页,可以把业务含义相近的内容放在选项卡的选项页容器内。

2. 字段

字段型组件是常用,也是用于支撑页面的主要组件类,每个字段型组件都对应一个模型字段。

  • 单行文本:常用于记录名称、身份证号或其他普通的文字内容。
  • 多行文本:常用于记录字数较多的文字,如意见、复杂备注等。
  • 整数:常用于输入整数的天数、数量等,如果会出现小数,请使用小数组件。
  • 小数:常用于输入金额、单价等,会出现小数的数值。
  • 下拉单选:从多个选项中下拉选择一个数据,作为数据值。选项可以是关联模型的数据,也可以是数据字典或布尔型开关。
  • 下拉多选:从多个选项中下拉选择多个数据,作为数据值。选项可以是关联模型的数据,也可以是数据字典。
  • 开关:常用于只有是否两种对立选项的选择。
  • 单选框:常用于在直接展示的选现中单选一个值,例如选择性别。
  • 复选框:常用于在直接展示的选现中多选一个值,例如选择爱好、选择课程等。
  • 富文本编辑器:一种可内嵌于浏览器,所见即所得的文本编辑器,类似于Office Word 的编辑功能,常应用于篇幅较长的说明性文字,支持改变字体样式、插入图片等。
  • 年份:常用于选择出身年份、一项计划的年份等。
  • 日期:常用于选择颗粒度到日期的Date类型字段,例如出生日期、入职日期、入驻日期等。
  • 日期时间:常用于选择颗粒度到时间的DateTime类型的字段,例如下单时间、发货时间、审批时间等。
  • 时间:常用于选择仅时间无日期的Time类型的字段,如设置规章中的上班时间、日志的提交时间等。
  • 颜色选择器:应用于自定义颜色,如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。
  • 文件上传:常用于上传附件、文件,例如Office文档、图片、视频、音频、其他格式的文件等。
  • 图片上传:常用于上传记录的图片,例如上传身份证照片、头像、商品图片等。
  • 标签:可输入保存多值,例如用户的标记标签。

3. 数据

与数据可视化设计器进行联动,可以选择自定义的图表或报表,在页面展示。

  • 图表:可以选择数据可视化设计器中允许被引用的图表,展示在页面中
  • 报表:可以选择数据可视化设计器中允许被引用的报表,展示在页面中

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

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

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年6月20日 am9:49
Next 2024年6月20日 am9:49

相关推荐

  • 页面

    1. 页面介绍 页面是增删改查数据的入口,数据信息的填写、查看都需要通过页面来展示、交互。页面设计是界面设计器的功能之一,提供页面搭建功能,以实现数据的录入、查看/查询、搜索等等。 2. 页面列表 进入界面设计器,默认会打开以卡片形式管理页面的列表。 如图,页面卡片上可预览到的信息分别有页面标题、页面缩略图、视图类型、页面对应模型名称、页面描述。 「页面标题、页面描述」作用是通过文字定义页面的名称以及对页面进行详细描述。 「页面缩略图」是自行上传的图片,用于在页面列表通过图片预览当前页面的大致布局样式。若未上传,将显示系统默认的图片,点此查看缩略图上传。 「视图类型」通过业务角度(运营管理、官网门户、商城等,目前提供了运营管理一种业务类型)进行分类。运营管理中包括表单、表格、详情、画廊、树视图。 表单常应用于数据的创建、编辑页; 表格可理解为数据的列表查看页面,除了常规表格外,本版本支持树表、级联高级视图; 详情用于设计数据的详情页; 画廊是以卡片形式呈现内容; 树视图是包括树表、级联高级视图; 表格-树表、树视图-树表两者之间的区别:表格-树表的主模型是表格的模型,树视图-树表的主模型是树表的模型、左侧表格是展开的内容; 3. 添加页面 操作添加页面,首先需要选择添加方式。目前提供了1种添加页面方式:直接创建。 3.1 直接创建 直接创建时,弹框中填写页面的基本信息,填写完成后进入页面设计页。 4. 页面操作 4.1 设计页面 操作设计页面后直接进入该页面的设计页面,可对组件布局、交互、属性进行设置。 4.2 编辑 操作编辑弹出页面的基本信息弹框,可对当前页面的基本信息进行编辑修改。 可修改的基本信息包括页面标题、操作栏位置、页面分组、页面描述。 4.3 查看被引用的信息 4.3.1 什么是引用? 页面与页面或页面与菜单之间的若存在交互则称为具有引用关系。 举例1:【页面A】中的一个「跳转动作」配置了跳转【页面B】,则称页面B被页面A引用,在页面B下可查看被引用信息。 举例2:比如【菜单1】绑定了【页面C】,则称页面C被菜单1引用,在页面C下可查看被引用信息。 4.3.2 查看的引用信息是什么? 引用信息分别有“存在引用关系的视图”、“存在引用关系的菜单”。页面下操作查看被引用信息,是查看当前页面被引用情况,如上述举例1,页面B被引用,而页面A非被引用,所以只可以在页面B下查看到“存在引用关系的视图”。 4.4 隐藏/可见 对于暂时不使用的页面,可以进行隐藏(隐藏后可再设置可见)的操作。 4.4.1 隐藏/可见会有哪些影响? 隐藏后该页面在跳转动作选择页面和菜单绑定页面时,不可见,已被使用的不受影响。再次操作可见后,即可选择到。 4.4.2 隐藏后的页面找不到了? 若需要对隐藏的页面进行操作,但是在列表未查找到某个隐藏的页面,请切换「是否可见」筛选项,页面列表默认展示所有“可见”的页面,切换为“全部”或“隐藏”,即可找到隐藏的页面。 4.5 删除 对于不再使用且没有被引用信息的页面,可以将页面删除。页面删除后无法恢复,请谨慎操作,对于不确定是否要彻底删除的页面,建议先操作隐藏。 删除前请确保当前页面没有引用关系! 5. 页面搜索 卡片上方是页面筛选和搜索区域,可通过应用、模型、业务类型、视图类型、自定义/系统、可见/隐藏等等筛选页面;搜索时仅支持使用页面名称进行搜索。同时筛选条件也具备记忆功能,即上一次在页面列表的筛选条件是哪些,再次进入页面列表,筛选条件默认为上次的条件。 其中自定义页面是所有人工添加的页面,系统页面为非人工添加的页面,由系统默认生成,只可用于查看,不可编辑、删除或设计。 6. 页面分组管理 6.1 页面分组 当页面过多时,可以自定义添加15个分组,将页面进行归类管理。默认展示全部分组,点击「全部」展开所有分组,点击分组进行分组下的页面查看或管理分组。 6.2 管理分组 展开分组后,点击「管理分组」,出现弹框,在弹框中可以修改分组名称、添加分组、删除分组。 6.2.1 添加分组 操作「+页面分组」,可以直接输入分组名称后回车以添加一个新分组,或快捷选择其他应用使用的分组。最多添加15个分组。 6.2.2 修改分组 双击分组标签,即可对已有分组进行名称的修改。若分组在其他应用也使用,则在其他应用内,该分组名称同步变化。 6.2.3 删除分组 若分组下有页面或分组有被其他应用使用,则分组无法删除。

    2024年6月20日
    1.7K00
  • 3.5.6 DSL配置大全(略)

    因为默认视图很难满足客户的个性化需求,所以日常开发中view的配置是避免不了的。本系列篇是比较全面地介绍View配置的各个方面涉及:视图、字段、动作、布局等

    Oinone 7天入门到精通 2024年5月23日
    1.8K00
  • 7.3.1 去除资源上传大小限制

    场景说明 全员营销标准软件产品对于视频上传限制为35M,该大小适合管理短视频类的素材。该软件产品的使用方为营销部门,营销部门不仅管理短视频素材,也负责管理电商商品的视频素材、公司团建的素材等,且不少素材的内存都远大于35M。 业务需求:将全员营销中的内容中心扩展成营销部门的内容统一管理中心,管理营销部门工作范围内的所有内容素材,且不受35M的限制。 实战训练 新增一个资源管理页面,替换原来的资源管理,并构建新的上传行为。 Step1 通过界面设计器,设计出必要管理页面 进入界面设计器,应用选择全员营销,模型通过搜索【素材】选择【Gemini素材】,点击添加页面下的直接创建 设置页面标题、模型(自动带上可切换)、业务类型(运营管理后续会扩展其他类型)、视图类型(表格)后点击确认按钮进入【内容中心-新素材管理】设计页面 进入页面设计器,对【内容中心-新素材管理】表格页面进行设计(更多细节介绍,请参考界面设计产品使用手册) a. 左侧为物料区:分为组件、模型。 ⅰ. 【组件】选项卡下为通用物料区,我们可以为页面增加对应布局、字段(如同在模型设计器增加字段)、动作、数据、多媒体等等 ⅱ. 【模型】选项卡下为页面对应模型的自定义字段、系统字段、以及模型已有动作 b. 中间是设计区域 c. 右侧为属性面板,在设计区域选择中组件会显示对应组件的可配置参数 在左侧【模型】选项卡下,分别把系统字段中的【素材名称】、【素材链接】、【素材来源】、【素材类型】、【更新时间】、【创建时间】等字段拖入设计区域的表格区 设置字段在表格中的展示组件,在设计区域切换【素材链接】展示组件为【超链接】 设置字段在表格中的展示组件的属性,在设计区域选中【素材名称】,在右侧属性面板中设置【标题】为【内容名称】 设置字段在表格中的展示组件的属性,在设计区域选中【创建时间】,在右侧属性面板中设置【标题】为【上传时间】 在左侧【模型】选项卡下,把动作分类下的提交类型【下载】和【删除】动作拖入中间设计区的动作区,并选择【删除】按钮,在右侧属性面板中设置【按钮样式】为【次要按钮】 在左侧【组件】选项卡下,把动作分类下的【跳转动作】拖入中间设计区的动作区,并在右侧属性面板中设置动作名称为【上传素材】,数据控制类型为【不进行数据处理】,打开方式为【弹窗打开】,【弹出内容】为【创建新页面】,【弹窗模型】通过搜索【素材】选择【Gemini素材代理-上传】,并点击保存 设计区选中【上传素材】按钮,点击【打开弹窗】设计【素材上传】的操作页面,此时会发现左侧【模型】选项卡下的当前模型切换成了【Gemini素材代理-上传】 a. 分别把系统字段中的【上传素材链接列表】拖入【Gemini素材代理-上传】的弹窗页面设计区。 b. 选中【上传素材链接列表】切换展示组件为【文件上传】 c. 选中【上传素材链接列表】并在右侧属性面板中 ⅰ. 设置【校验】分组下,设置【最大上传文件体积】为空,即不设置 ⅱ. 设置【校验】分组下,设置【限制上传文件类型】为打开,并勾选【图片】和【视频】 ⅲ. 设置【交互】分组下的宽度属性为【1】 在左侧【模型】选项卡下,把动作分类下的提交类型【上传素材】动作拖入中间设计区的动作区 在左侧【组件】选项卡下,把动作分类下的【客户端动作】类型拖入中间设计区的动作区,选中并在右侧属性面板中设置【动作名称】为返回,设置【客户端行为】为【关闭弹窗】,点击【保存】按钮来完成动作的基础设置 选中【返回】按钮、并在右侧属性面板中设置【按钮样式】为【次要按钮】 关闭弹窗返回主模型设计区 点击右上角【显示母版】进入页面最终展示形式,点击添加菜单项,并在输入框中输入【新内容中心】 点击菜单右侧设置图标,选择【绑定已有页面】,进行菜单与页面的绑定操作 在绑定页面中,模型选择【Gemini素材】,视图选择【内容中心-新素材管理】,点击确认按钮提交 最后别忘了点击右上角【发布】按钮对【内容中心-新素材管理】表格页面进行发布,回到界面设计器首页查看刚刚建好的表格页面 Step2 测试完成以后隐藏原【内容中心】菜单 进入【界面设计器】管理页面,通过点击【设计图标】进入任一页面的设计页面 点击右上角【显示母版】进入页面最终展示形式,找菜单【内容中心】点击菜单右侧设置图标,选择【隐藏菜单】,因为【内容中心】菜单是标准产品自带菜单,只能进行隐藏操作,无法进行如绑定页面和调整菜单顺序 Step3 回到全员营销应用,刷新页面体验效果 整个实战训练就到此结束,更多细节请参阅具体的产品使用手册

    2024年5月23日
    1.2K00
  • 4.1.21 框架之分布式消息

    消息中间件是在分布式开发中常见的一种技术手段,用于模块间的解耦、异步处理、数据最终一致等场景。 一、介绍 oinone对开源的RocketMQ进行了封装,是平台提供的一种较为简单的使用方式,并非是对RocketMQ进行的功能扩展。同时也伴随着两个非常至关重要的目的: 适配不同企业对RocketMQ的不同版本选择,不至于改上层业务代码。目前已经适配RocketMQ的开源版本和阿里云版本。 下个版本会对API进行升级支持不同类型MQ,以适配不同企业对MQ的不同要求,应对一些企业客户已经对MQ进行技术选择 对协议头进行扩展:如多租户的封装,saas模式中为了共用MQ基础资源,需要在消息头中加入必要租户信息。 二、使用准备 demo工程默认已经依赖消息,这里只是做介绍无需大家额外操作,大家可以用maven依赖树命令查看引用关系。 依赖包 增加对pamirs-connectors-event的依赖 <dependency> <groupId>pro.shushi.pamirs.framework</groupId> <artifactId>pamirs-connectors-event</artifactId> </dependency> 图4-1-21-1 分布式消息的依赖包 相关功能引入 增加模型、触发器都依赖MQ <!– 增强模型 –> <!– 增强模型 –> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-channel</artifactId> </dependency> <!– 触发器 api –> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-api</artifactId> </dependency> <!– 触发器 core –> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> 图4-1-21-2 增加模型、触发器都依赖MQ yml配置文件参考 详见4.1.1【模块之yml文件结构详解】的“pamirs.event”部分。 三、使用说明 发送消息(NotifyProducer) 概述 NotifyProducer是Pamirs Event中所有生产者的基本API,它仅仅定义了消息发送的基本行为,例如生产者自身的属性,启动和停止,当前状态,以及消息发送方法。它本身并不决定消息如何发送,而是根据具体的实现确定其功能。 目前仅实现了RocketMQProducer,你可以使用下面介绍的方法轻松使用这些功能。 使用方法 Notify注解方式 使用示例 @Component public class DemoProducer { @Notify(topic = "test", tags = "model") public DemoModel sendModel() { return new DemoModel(); } @Notify(topic = "test", tags = "dto") public DemoDTO sendDTO() { return new DemoDTO(); } } 图4-1-21-3 Notify注解方式使用示例 解释说明 使用Component注解方式注册Spring Bean。 Notify注解指定topic和tags。 topic和tags对应NotifyEvent中的topic和tags。 RocketMQProducer方法调用 使用示例 @Component public class SendRocketMQMessage { @Autowired private RocketMQProducer rocketMQProducer; /** * 发送普通消息 */ public void sendNormalMessage() { rocketMQProducer.send(new NotifyEvent("test", "model", new DemoModel())); rocketMQProducer.send(new NotifyEvent("test", "dto", new DemoDTO())); } /** * 发送有序消息 */ public void sendOrderlyMessage() { DemoModel data = new DemoModel(); data.setAge(10); rocketMQProducer.send(new NotifyEvent("test", "model", data) .setQueueSelector((queueSize, event) -> { DemoModel body = (DemoModel) event.getBody(); return body.getAge() % queueSize; })); } /** * 发送事务消息 */ public void sendTransactionMessage() { rocketMQProducer.send(new NotifyEvent("test", "model", new DemoModel()) .setIsTransaction(true) .setGroup("demoTransactionListener")); } } 图4-1-21-4 RocketMQProducer方法调用…

    2024年5月23日
    1.3K00
  • 业务域

    1. 业务域介绍 业务域是根据业务域对集成应用、开放接口进行归类管理。在创建集成应用、开发接口时,可选择归属的业务域。 操作入口:集成设计器——业务域。 2. 业务域管理 业务域管理提供新增、删除、搜索操作。 2.1 业务域列表 支持按照编码、名称、描述搜索业务域。 2.2 新增业务域 新增业务域:输入业务域名称、描述新增。 2.3 删除业务域 当前业务域未被其他数据记录引用时,可删除成功,反之如果被引用了,不允许删除。

    2024年6月20日
    2.4K00

Leave a Reply

Please Login to Comment