1. 什麼是Fiori Element？
在之前的博客《學習SAP Fiori，需要先了解哪些知識點？》中，我有提到，不熟悉前端開發三件套“HTML + CSS + JS”的同學，也可以完成Fiori的開發。很多同學好奇，是如何完成的？其實，就是通過使用 SAP Fiori Element。
聊幾句SAP Fiori Element的歷史。
SAP Fiori Element只能又稱作“SMART template”，通過這個名字便可知道，Fiori element是啥。
Fiori element是SAP爲Fiori APP提供了一套開發框架，可以理解爲“模板”。Fiori 應用程序的的開發人員，可以根據自己的業務場景，選取相應的模板，開發過程中，通過使用OData的annotation便可以自動生成Fiori的前臺UI。
什麼意思呢？
如果沒有Fiori element，那麼Fiori APP頁面上的每一個元素，都是需要通過開發人員手動繪製的（使用 HTML + CSS）, 例如控件的位置，顏色，大小等等，顯然，這樣是重複而且繁瑣的。
而SAP Fiori Element抽象出來了最常用的App模式，形成了模板（在Fiori element中稱之爲floorplan）。通過使用模板，有關UI設計的重複性工作將大大減少，Dev們可以將更多的時間和精力專注於業務邏輯的實施。
使用SAP Fiori Element，能保證UI風格的一致性，同時極大提高開發的效率和App的穩定性。
2. Fiori element的優點
- 無需“HTML + CSS + JS”進行UI相關的coding
- 基於Odata metadata和annotation，以及manifest.json的配置，便可以自動生成Fiori App
- 不需手動創建SAPUI5的頁面
- 應用開發人員只需要專注於“哪些內容需要在頁面上顯示”；至於“如何顯示”，是通過SAP Fiori Element的框架自動完成的
3. Fiori Element提供了哪些模板
目前，SAP Fiori Element提供了5種類型的模板，也即Analytical List Page, Initial Page, List Report, Object Page，Overview Page。通過這幾種模板，可以覆蓋到絕大多數的業務場景。
挑重點的說，有關細節，感興趣的同學可查看我附在文末的鏈接。
3.1 List Report + Object Page
這是一種Overview + Detail的模型，在List Page顯示出overview的信息，在Object頁面給出詳細信息。當然，不只是display，開發人員可以定製不同的行爲類型。
List Page -
Object Page -
3.2 Analytcial List Page
通過使用ALP，可以通過可視化的方式，呈現並分析數據。使用ALP可以構建炫酷的圖形化Filter，各種不同風格的圖表，以供數據的可視化分析。
3.3 Overview Page
在一個頁面內呈現多種信息，讓用戶迅速得到所需的Overview狀態。
4. 如何使用Fiori Element模板
SAP Fiori Element的使用方式十分簡單，在Web IDE中創建Fiori項目時，可以直接使用“New >> Project from Template”。
然後在Cetegory中選擇“SAP Fiori Element”, 這樣便可以篩選出可用的elememt.
5. 更多資料
本文中，我們簡答介紹了SAP Fiori Element的概念和使用方法，感興趣的同學，可以查看下面的兩個鏈接，獲取更多相關知識。
- Fiori Design Guidelines - SAP Fiori Element
- SAPUI5 Demo Kit - Developing Apps with SAP Fiori Elements
持續更新SAP領域優質文章，歡迎關注❤️、點贊👍、轉發📣！