检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
为华为云Astro轻应用高级页面添加组件 高级页面组件分类 高级页面支持的组件类型,以及每个类型下所包含的具体组件,如表1所示。通过该表,可帮助您快速了解各组件的位置分类,更加高效的开发高级页面。当预置组件不满足需求时,还可以自定义组件并上传到高级页面中使用,详情请参见为华为云Astro轻应用高级页面添加自定义组件。
使用模板创建华为云Astro轻应用标准页面 操作场景 系统预置了一些典型场景的标准页面模板,如果业务场景贴合已有模板,建议选择“基于模板”来快速创建标准页面。页面模板包括预置模板(通用模板)和自定义模板两大类。 预置模板(通用模板) 基础表单:基本的表单页面。 多区域表单:有间隔区域的多区域表单页面。
添加库扩展华为云Astro轻应用标准页面功能 如果您希望使用第三方库文件,而当前系统中不存在该库,您可以通过上传,新增该JS/CSS库,并在页面中设计并使用该库,实现引入第三方库的功能。 什么是库 库是指在设计页面时,需要依赖的库,如果缺少相应的依赖库,则页面中无法实现某些功能。
图1 选择更新按钮 上传本地的组件zip包,再单击“更新”。 返回插件列表页面,单击刚上传组件组件后的,完成组件的升级操作。 父主题: 应用前端开发
中增加以上表格样式代码,并根据实际情况修改列宽度,增加样式后,预览时即可看到拖动条。 图2 在样式代码中,增加表格列宽样式 父主题: 应用前端开发
将华为云Astro轻应用标准页面保存为模板 标准页面开发完成后,支持将该页面保存为模板。标准页面保存为模板后,该开发者用户、注册华为云Astro轻应用的华为账号、华为账号下其他华为云Astro轻应用开发者可直接使用该页面模板来创建标准页面。 自定义标准模板 参考登录华为云Astr
将华为云Astro轻应用自定义对象生成前端页面 生成列表页 基于当前对象直接生成一个列表页,用来维护管理对象里的记录数据。例如,对销售数据进行管理,需要一个管理界面,能通过一定条件查询到销售数据,并将销售数据通过列表形式展示在页面上。 参考登录华为云Astro轻应用应用设计器中操作,登录应用设计器。
是否对柱状条数据进行阶梯瀑布显示。瀑布图常用于经营情况分析,解释从一个数字到另一个数字的变化过程。比如评估公司利润、比较产品收益、突出显示项目的预算变更、分析一段时间内的库存或销售情况 、显示一段时间内产品价值变化等。 图4 阶梯瀑布效果 横向柱条效果:是否开启横向柱条展示效果。
在cmd命令窗口任意目录下执行“magno ui”命令,会在浏览器中自动打开图形操作界面。 图2 Scaffolding图形操作界面首页 图中区域1所示为项目管理栏,可以新建或导入本地资产工程。区域2所示为已有资产工程列表,首次使用Scaffolding脚手架工具此列表为空。若未能正常启动脚手架工具,请参考异常处理中操作进行处理。
在日常运行中,常监测到人员异常或故障信息,需要以告警显示的形式显示在前端界面中。为简化用例,采用手工输入消息数据的方式来模拟后台采集告警数据,通过服务编排触发告警事件,并将告警信息通过WebSocket推送至前端高级页面显示。 图1 WebSocket调用示例 WebSocket
$(document).bind('readerPageWidgetReady', function(){ // 执行相关逻辑 }); 父主题: 应用前端开发
什么是标准页面 AstroZero提供了三种前端页面:标准页面、高级页面和报表。本章节主要带您了解、学习并使用标准页面。 标准页面 标准页面是一种将一个或多个组件拖进画布,进行低代码甚至无代码的配置,即可快速完成业务功能的前端页面。对于一般的业务应用系统,例如请假电子流、出差报销
通过事件动作实现高级页面内组件的交互 操作场景 华为云Astro轻应用低代码平台为组件设计了事件-动作机制,实现组件与组件、组件与页面之间的交互。 事件是应用在运行时,页面内发生的动作或者用户执行的操作(例如单击组件、组件加载等)。 动作是响应事件后,按照设定的方式,对事件做出回
通过宏实现高级页面间组件的交互 操作场景 页面间组件的交互,除了需要事件-动作机制,还需要用到低代码中的页面宏。本章节通过具体示例,为您介绍页面间组件交互的方法。如图1所示,高级页面Page1中包含示例组件widgetEventTemplate,高级页面Page2中包含示例组件w
0/calculate”,平台会自动为您拼接完整的URL。 共享数据:是否共享数据。如果“数据类型”为“动态数据”,该参数才会显示,勾选表示某项目里多个组件调用一个公共的请求而访问同一个接口的数据,避免多次调接口。 调用周期:每隔多少秒调用一次后台接口或者获取静态数据,默认配置为“0
通过内置动作实现标准页面组件交互 华为云Astro轻应用预置了多种常用的事件交互动作,您可以根据需要直接使用,来实现页面或组件之间的交互。下面以编排一个重置功能的按钮为例,介绍如何通过内置动作编排事件。本示例主要是通过内置动作“重置表单”实现该功能,即重置表单数据。“提交表单”是
账号名”取值保持一致。 项目名 所用SMN资源对应区域的项目名。请与前提条件中获取的“项目”取值保持一致。 用户名 使用消息通知服务SMN的用户名。请与前提条件中获取的“IAM用户名”取值保持一致。 密码 登录消息通知服务SMN的用户密码。 项目ID 项目的唯一标识。请与前提条件中获取的“项目ID”取值保持一致。
隐藏”配置为布尔类型模型字段,在自定义JS代码中来控制模型字段取值,从而设置该组件是否隐藏,这种动态设置优先级是最高的。 样式 针对有丰富前端开发经验的用户,可通过“样式”面板对页面进行更深度的个性化布局定制。 布局:设置组件的宽度、高度等。 字体:设置字体大小、字体样式、颜色等。
字段,在自定义JS代码中来控制模型字段取值,从而设置该组件是否隐藏,这种动态设置优先级是最高的。 禁用:是否禁用该组件。 样式 针对有丰富前端开发经验的用户,可通过“样式”面板对页面进行更深度的个性化布局定制。 布局:设置组件的宽度、高度等。 字体:设置字体大小、字体样式、颜色等。
设置高级页面路由导航和路由视图组件属性 路由导航和路由视图组合使用,可实现路由导航以及展示当前生效路由对应的页面内容(如图1)。一个页面只支持放置一个路由导航和一个路由视图组件。路由导航和路由视图组件的属性和其他组件类似,可参考其他组件进行配置。 图1 页面预览效果 使用预置的路由导航和路由视图组件