在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用

這是 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...

以後就能夠訪問這個公開的 OData 服務了：

https://sapes5.sapdevcenter.c...

瀏覽器打開，能看到其 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 應用了：

http://localhost:8080/test/fl...

這是 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的原創文章，盡在："汪子熙":

更多閱讀

• 使用SAP Cloud Application Programming模型開發OData的一個實際例子
• 30分鐘用Restful ABAP Programming模型開發一個支持增刪改查的Fiori應用
• Jerry帶您瞭解Restful ABAP Programming模型系列之二：Action和Validation的實現
• Jerry帶您瞭解Restful ABAP Programming模型系列之三：雲端ABAP應用調試
• SAP雲平臺上的Low Code Development(低代碼開發)解決方案
• SAP Cloud Application Programming 介紹(2021 更新版）

更多Jerry的原創文章，盡在："汪子熙":