這是 Jerry 2021 年的第 26 篇文章，也是汪子熙公眾號總共第 297 篇原創文章。
本文絕非標題黨。
Jerry 前一篇文章 SAP Cloud Application Programming 介紹 - 2021 更新版，介紹了如何使用 SAP Cloud Application Programming，在本地創建一個 OData 服務，並且利用 SAP CAP SDK，在一個自動且臨時生成的 Fiori Elements 應用里，消費該 OData 服務，展示其暴露的在線書店的業務數據。這個臨時的 Fiori Elements 應用界面如下：
本文 Jerry 繼續介紹，如何在沒有任何前端開發經驗的前提下，利用 SAP 發布的一個標准 OData 服務，通過 SAP Fiori Elements 提供的一系列工具，創建第一個 Fiori Elements 應用，將 SAP 標准 OData 服務暴露的業務數據，顯示在 Fiori UI 上。
完成本文例子所需的唯一前提，就是需要在本地安裝 nodejs 和 Visual Studio Code 這個代碼編輯器。
首先簡單介紹 SAP Fiori Elements 的概念。在其問世之前，SAP Fiori 應用的開發只有一種方式，即 SAP UI5 Freestyle 開發方式。
我回憶了自己 2014年，在 SAP 成都研究院 CRM Fiori 開發團隊基於 SAP Fiori 1.0 時的開發經歷。當時我們團隊采用 SAP UI5 Freestyle 開發了 7 個標准的 Fiori 應用，其使用方式都有一個共同點：
點擊 Launchpad tile 進入應用，每個應用的初始頁面都是所謂的 Master-Detail 風格，在屏幕左側的 List 頁面里選擇當前待查看的對象，在屏幕右邊的明細頁面切換不同的標簽，來查看不同維度的數據。
例如，下圖是 SAP CRM Fiori My Leads 應用的界面，和上圖的 My Opportunities 應用界面的風格，幾乎完全一致，僅僅在字段 Label 上存在細微差異。
所以當時我們團隊負責的 7 個 CRM Fiori 應用，其實包含了很多重復的 UI5 代碼。后來 SAP Fiori 的架構師們，也發現了這個問題，並最終促成了 SAP Fiori Elements 的誕生。
SAP Fiori Elements 預置了一系列蘊含 SAP Fiori 開發最佳實踐思想的 Fiori 應用模板，應用開發人員可以借助這些模板，快速生成 Fiori 應用，並且能夠在模板的基礎上做擴展。如此一來，SAP UI5 應用開發的復雜度，從應用開發人員所在的 UI5 Freestyle 端，轉移到了 Fiori Elements 的框架實現端，后者由 SAP 研究院里前端框架開發經驗豐富的老兵們完成，代碼質量和健壯性均有保證。
采用 SAP Fiori Elements 之后，應用開發人員，通過在 CDS view 或者 OData 服務里定義注解( Annotations ) 的方式，來指定 Fiori UI 的頁面布局。換句話說，不用寫一行 JavaScript 代碼，也能得到一個滿足 SAP Fiori Design 最佳實踐的 Fiori 應用。
下面介紹創建 Fiori Elements 應用的具體步驟。Fiori Elements 應用的目的就是用來展示 OData 服務暴露的業務數據。本來我想使用之前這篇文章 SAP Cloud Application Programming 介紹 - 2021 更新版 里開發的在本地部署運行的 OData 服務，但轉念一想，這樣就違背了本文標題 “沒有任何前端開發經驗” 的初衷。因此，Jerry 使用另一個 SAP 發布的專門用於 Demo 和學習用途，能夠通過公網訪問的 OData 服務。
通過下面的鏈接，在 SAP Demo 服務器 ES5 上注冊一個帳號：
https://register.sapdevcenter.com/SUPSignForms/
之后就可以訪問這個公開的 OData 服務了：
https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/
瀏覽器打開，能看到其 metadata：
然后在 Visual Studio Code 里安裝名為 SAP Fiori tools 的擴展包，包含了 6 個 SAP Fiori 應用開發的輔助工具。
安裝完畢之后，使用快捷鍵 Ctrl + Shift + P, 打開 Visual Studio Code 命令面板，執行 Fiori: Open Application Generator, 打開 Fiori Elements 應用的創建向導：
在 Application Type 下拉框里，選擇 SAP Fiori Elements:
前面提到，SAP Fiori Elements 預置了很多頁面模板：
- List Report Object Page
- Worklist
- Analytical List Page
- Overview Page
本文我們選擇 List Report Object Page 模板：
在指定該 Fiori Elements 應用消費的 OData Source 步驟，將之前提到的 SAP Demo 服務器 ES5 上運行的 OData url 粘貼到向導步驟的 OData service URL 字段里：
Main entity 字段，從下拉框里選擇 SEPMRA_C_PD_Product，意思是我們基於 List Report Object Page 模板創建的 Fiori Elements 應用，圍繞該 OData 模型節點，來展示其數據。
最后維護一些 Fiori 項目級別的屬性，比如應用標題，命名空間等等。
點擊 Finish，即可在指定的本地文件夾里，生成對應的 Fiori Elements 應用。
應用生成完畢后，在右鍵菜單里選擇 Preview Application：
選擇start，即可啟動 Fiori Elements 應用：
在瀏覽器里即可訪問這個 Fiori Elements 應用了：
這是 List Report 頁面：
選中一個產品后，能跳轉進入 Object Page 明細頁面：
至此，我們一行代碼都沒有書寫，僅僅通過幾個簡單的鼠標點擊，就得到了這樣一個支持搜索，展示搜索結果，並點擊結果跳轉到明細頁面的 Fiori 應用。
通過這個例子，大家應該能體會到，SAP Fiori Elements 在提高 Fiori 應用前台開發效率上的優勢。
打開通過 Visual Studio Code Fiori Tools 擴展自動生成的 Fiori 應用，發現工程文件里全是一些元數據的定義。翻遍了整個 webapp 文件夾，我們也很難找到一行 JavaScript 代碼。
這就帶來的新的問題，如下圖所示，一個朋友在微信上向我咨詢：想修改通過 SAP Fiori Elements 生成的應用，但根本不知道從何處下手。因為 Fiori Elements 項目里根本不像通過 SAP UI5 Freestyle 方式開發而成的應用那樣，具有對應的 view 和 controller 文件。
如我回答的那樣，基於 SAP Fiori Elements 的頁面定制，得通過特定的擴展方式來完成。
Jerry 最近的開發工作，使用的都是 Angular 框架，理念和技術細節均和 SAP Fiori Elements 迥然不同，這就好比一個習武之人之前練得是《九陽真經》，忽然有一天由於種種客觀原因，需要改練修習方式截然不同的《九陰真經》了。最近我能不時感覺到腦子里 Angular 和 SAP Fiori Elements 兩種技術思潮的交織和碰撞。關於 Fiori Elements 應用如何定制化的內容，后續 Jerry 會抽時間繼續分享，敬請關注。
orient/strip%7CimageView2/2/w/1240)
更多Jerry的原創文章，盡在："汪子熙":
更多閱讀
更多Jerry的原創文章，盡在："汪子熙":