飞搭系列 | 自定义组件实现组件灵动扩展

169 阅读5分钟

前言

汉得飞搭aPaaS低代码平台(FEIDA,以下简称“飞搭”)是基于低代码理念打造的融合 aPaaS 平台,助力企业快速搭建业务应用。作为 HZERO 生态的重要组成部分,致力于充分融合 HZERO 的各平台能力,提供企业用户在线化灵活搭建业务应用的能力,支撑企业普惠化(低门槛、高协作)、敏态化(高效率)低成本化地快速响应市场变化,加速复杂业务场景落地。

概要介绍

在低代码系统开发的过程中,遇到样式别具一格、数据汇总逻辑繁复的组件需求时,怎样达成组件的灵动拓展,并且让扩展后的组件与页面上的其他组件实现操作联动,无疑是页面搭建的核心关键所在。

飞搭支持通过上传手写开发的组件作为自定义组件,并支持自定义组件与飞搭页面内其他组件联动,实现高低代码融合,从而完成页面组件的扩展。

本篇将介绍飞搭自定义组件的使用流程,对飞搭的组件扩展能力进行介绍:

开发自定义组件

基于HzeroJs + react 16.x,实现自定义组件的开发

上传自定义组件

通过上传资源包或URL,在组件管理中心上传自定义组件

使用自定义组件

页面配置中使用自定义组件,并支持与页面内其他组件联动

一、开发自定义组件

01. 场景说明

在商业智能和数据分析领域,聚合视图组件可以将来自不同数据源的数据进行整合和汇总,以直观的图表、表格等形式呈现给用户。

例如,企业可以使用聚合视图组件来展示销售数据、客户行为数据等,帮助管理层快速了解业务状况,做出决策。通过对数据的聚合和可视化,用户可以轻松发现数据中的趋势、模式和异常值,从而更好地进行数据分析和挖掘。

02. 实现介绍

  • PC端基于HzeroJs + react 16.x,移动端基于hips-front + vue 2.6.x,开发实现自定义组件;

  • 定义自定义组件入参、出参、内置函数;

  • 本地开发模式支持URL,在线预览调试;

  • 开发完成,导出本地资源,导入线上环境。

二、上传自定义组件

01. 场景说明

基于已开发完成的自定义组件,将自定义组件上传至组件管理中心,统一管理,并提供给后续的页面设计使用。

02. 配置介绍

  • 支持以资源包或URL地址2种方式生效自定义组件;

  • 支持管理组件的入参、出参及内置函数;

  • 支持查询组件被使用的位置。

三、使用自定义组件

01. 场景说明

上传自定义组件至组件管理中心后,即可在页面设计中使用自定义组件。联动自定义组件与飞搭页面内其他组件,是页面可扩展性的重要体现。

02. 配置介绍

  • 自定义组件调用页面内其他组件操作:
    ○ 支持将自定义组件出参数据赋值页面内其他字段、变量等。
    如:页面中使用「五星评分」自定义组件,将评分后的数据存入页面内表单组件。
    ○ 支持使用自定义组件内数据联动查询页面内其他组件数据。
    如:「聚合视图列表」自定义组件联动查询页面中的采购申请列表数据。

  • 页面内其他组件调用自定义组件:
    ○ 页面内组件支持联动查询自定义组件数据。
    如:采购订单列表联动查询「脱敏」自定义组件数据。
    ○ 页面内组件支持联动保存自定义组件数据。
    如:编辑「五星评分」自定义组件数据,并保存。

03. 实现效果示例

结语

飞搭低代码平台作为 HZERO 生态的重要组成部分,致力于充分融合 HZERO 的各平台能力,提供企业用户在线化灵活搭建业务应用的能力,支撑企业普惠化(低门槛、高协作)、敏态化(高效率)和低成本化地快速响应市场变化,加速复杂业务场景落地。

本篇介绍了飞搭自定义组件的开发、上传及使用,实现高低代码融合。飞搭自定义组件保证了页面组件的扩展性,同时支持了与页面中已有组件的联动。飞搭支持轻松搭建,快速实现基本功能,也支持通过灵活的配置,实现复杂的场景需求。

接下来,我们将持续推出飞搭平台专题系列教程,帮助您更好地掌握飞搭平台的使用技巧,敬请期待!

联系我们

1. 如果您想了解飞搭更详细的功能介绍和产品信息请查阅我们的产品文档:
请在PC端打开 👉汉得焱牛开放平台

2. 如果您有疑问或者建议,可以通过开放平台进行工单反馈,问题分类请选择【产品/汉得aPaaS平台-飞搭】:
请在PC端打开👉汉得焱牛开放平台

3. 相关产品咨询或更多信息了解,欢迎联系我们。邮箱:openhand@vip.hand-china.com