通过SAP Fiori Element快速开发UI5 App

关于SAP Fiori Element

大家知道UI5作为SAP产品最主要的用户界面，在SAP的产品开发过程中，产品team根据积累的经验，将最常见、最通用的设计和界面提炼出来，在UI技术上通过复用的方式来提高开发效率，有点类似模板的概念。今天为大家介绍的是非常强大的Fiori element技术。

SAP Fiori elements提供了对通用的需求应用的模板。 可以通过选择一些预置的模板就可以快速开发UI5 app。这些模板能够满足大多数的企业应用需求。

Fiori elments提供了一致性的用户体验，而且能够很快的开发出符合设计的UI5应用，可以大幅降低前端开发的工作量。特别适用于资源有限的开发团队。

还是以之前例子里用的免费服务来快速开发一个UI5的订单列表App：

http://services.odata.org/V2/Northwind/Northwind.svc/

使用Fiori Element最方便的方式还是通过SAP WEBIDE。

主要的步骤

选择项目类别

环境: Neo, 类别: SAP Fiori Elment, 模板: List Report

基本信息

项目名称，描述等

选择服务

服务地址: /V2/Northwind/Northwind.svc/

修改一下配置文件manifest.json:增加一行: useBatch: false

"": {
				"dataSource": "mainService",
				"preload": true,
				"settings": {
					"useBatch": false,
					"defaultBindingMode": "TwoWay",
					"defaultCountMode": "Inline",
					"refreshAfterChange": false,
					"metadataUrlParams": {
						"sap-value-list": "none"
					}
				}
			}
           

运行app

选择Component.js，右键运行

选择需要的字段

列表界面

小结

可以看到Fiori Element提供了多个常见的模板，通过几乎零代码的方式自动生成了可以直接运行的报表App。Fiori element另外还提供了通过annotation的方式来对app进行定制化。

参考阅读

https://news.sap.com/2019/12/sap-fiori-elements-partners-development-experience/

https://experience.sap.com/fiori-design-web/smart-templates/