通過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/