這是 Jerry 2021 年的第 26 篇文章，也是汪子熙公眾號總共第 297 篇原創文章。

本文絕非標題黨。

Jerry 前一篇文章 [SAP Cloud Application Programming 介紹 - 2021 更新版](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491995&idx=1&sn=36099addb3c06be69b45a740ab8d2f9b&chksm=ead6530cdda1da1ac74ede0eec6c0bbfe32f1c3b34689fc7db6c9049b65caf8e5107f183ca14&token=1970282777&lang=zh_CN#rd)，介紹瞭如何使用 SAP Cloud Application Programming，在本地建立一個 OData 服務，並且利用 SAP CAP SDK，在一個自動且臨時生成的 Fiori Elements 應用裡，消費該 OData 服務，展示其暴露的線上書店的業務資料。這個臨時的 Fiori Elements 應用介面如下：

![](https://img-blog.csdnimg.cn/img_convert/bb70384b59ce6fb06d9eb6a3d2076ecf.png)

本文 Jerry 繼續介紹，如何在沒有任何前端開發經驗的前提下，利用 SAP 釋出的一個標準 OData 服務，透過 SAP Fiori Elements 提供的一系列工具，建立第一個 Fiori Elements 應用，將 SAP 標準 OData 服務暴露的業務資料，顯示在 Fiori UI 上。

![](https://img-blog.csdnimg.cn/img_convert/40a84c973ff04d47b74f98ac450b15ee.png)

完成本文例子所需的唯一前提，就是需要在本地安裝 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 頁面裡選擇當前待檢視的物件，在螢幕右邊的明細頁面切換不同的標籤，來檢視不同維度的資料。

![](https://img-blog.csdnimg.cn/img_convert/d714c64430a11ddfdccc97a42e4f43e1.png)

例如，下圖是 SAP CRM Fiori My Leads 應用的介面，和上圖的 My Opportunities 應用介面的風格，幾乎完全一致，僅僅在欄位 Label 上存在細微差異。

![](https://img-blog.csdnimg.cn/img_convert/1417373397e3b94de98563b8abce1748.png)

所以當時我們團隊負責的 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 更新版](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491995&idx=1&sn=36099addb3c06be69b45a740ab8d2f9b&chksm=ead6530cdda1da1ac74ede0eec6c0bbfe32f1c3b34689fc7db6c9049b65caf8e5107f183ca14&token=1970282777&lang=zh_CN#rd) 裡開發的在本地部署執行的 OData 服務，但轉念一想，這樣就違背了本文標題 “沒有任何前端開發經驗” 的初衷。因此，Jerry 使用另一個 SAP 釋出的專門用於 Demo 和學習用途，能夠透過公網訪問的 OData 服務。

透過下面的連結，在 SAP Demo 伺服器 ES5 上註冊一個帳號：

https://register.sapdevcenter.com/SUPSignForms/

![](https://img-blog.csdnimg.cn/img_convert/a6b35c9797215f6f98fc4b5e81935361.png)

之後就可以訪問這個公開的 OData 服務了：

https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/

瀏覽器開啟，能看到其 metadata：

![](https://img-blog.csdnimg.cn/img_convert/1670644e058de5e4bd6e0f6d65292d5f.png)

然後在 Visual Studio Code 裡安裝名為 SAP Fiori tools 的擴充套件包，包含了 6 個 SAP Fiori 應用開發的輔助工具。

![](https://img-blog.csdnimg.cn/img_convert/789293b3ae02699b0ca1a6f7496f22ee.png)

安裝完畢之後，使用快捷鍵 Ctrl + Shift + P, 開啟 Visual Studio Code 命令皮膚，執行 Fiori: Open Application Generator, 開啟 Fiori Elements 應用的建立嚮導：

![](https://img-blog.csdnimg.cn/img_convert/4389aa590ec11812784964dbb3dbe41c.png)

在 Application Type 下拉框裡，選擇 SAP Fiori Elements:

![](https://img-blog.csdnimg.cn/img_convert/346093881a647a4d42c3a2cba9c839d0.png)

前面提到，SAP Fiori Elements 預置了很多頁面模板：

* List Report Object Page
* Worklist
* Analytical List Page
* Overview Page

本文我們選擇 List Report Object Page 模板：

![](https://img-blog.csdnimg.cn/img_convert/cfa044974fee6d448ecbff1720cfd8a2.png)

在指定該 Fiori Elements 應用消費的 OData Source 步驟，將之前提到的 SAP Demo 伺服器 ES5 上執行的 OData url 貼上到嚮導步驟的 OData service URL 欄位裡：

![](https://img-blog.csdnimg.cn/img_convert/4649ad06ae67acd28a97ba4b9f38e721.png)

Main entity 欄位，從下拉框裡選擇 SEPMRA_C_PD_Product，意思是我們基於 List Report Object Page 模板建立的 Fiori Elements 應用，圍繞該 OData 模型節點，來展示其資料。

![](https://img-blog.csdnimg.cn/img_convert/781416647547e5e6f22deccf76250523.png)

最後維護一些 Fiori 專案級別的屬性，比如應用標題，名稱空間等等。

![](https://img-blog.csdnimg.cn/img_convert/3392aeb1b40ce0e3c0ef0373cf01a0dd.png)

點選 Finish，即可在指定的本地資料夾裡，生成對應的 Fiori Elements 應用。

![](https://img-blog.csdnimg.cn/img_convert/ca2ac2cf08f09eab4716ab9a73f8f398.png)

應用生成完畢後，在右鍵選單裡選擇 Preview Application：

![](https://img-blog.csdnimg.cn/img_convert/f91dbf67b50022bdc1fbfa673f848645.png)

選擇start，即可啟動 Fiori Elements 應用：

![](https://img-blog.csdnimg.cn/img_convert/fc72c356bea915efc0837a4bb1c62e12.png)

在瀏覽器裡即可訪問這個 Fiori Elements 應用了：

http://localhost:8080/test/flpSandbox.html#masterDetail-display&/?sap-iapp-state--history=TAS5GO9H24SGXC0B24NQFKZ9TOI96WAJP7JI8G7SR&sap-iapp-state=ASHSBGVM8ON3LNXFY7K27ZO8AATTVKULJERL10QU

這是 List Report 頁面：

![](https://img-blog.csdnimg.cn/img_convert/d0f4c77f81c95134d9f758d68c5091b4.png)

選中一個產品後，能跳轉進入 Object Page 明細頁面：

![](https://img-blog.csdnimg.cn/img_convert/94c8dd23966ec2d9392da43be0b8f67b.png)

至此，我們一行程式碼都沒有書寫，僅僅透過幾個簡單的滑鼠點選，就得到了這樣一個支援搜尋，展示搜尋結果，並點選結果跳轉到明細頁面的 Fiori 應用。

透過這個例子，大家應該能體會到，SAP Fiori Elements 在提高 Fiori 應用前臺開發效率上的優勢。

開啟透過 Visual Studio Code Fiori Tools 擴充套件自動生成的 Fiori 應用，發現工程檔案裡全是一些後設資料的定義。翻遍了整個 webapp 資料夾，我們也很難找到一行 JavaScript 程式碼。

![](https://img-blog.csdnimg.cn/img_convert/74334746d61d2cb3df71e75434488cf5.png)

這就帶來的新的問題，如下圖所示，一個朋友在微信上向我諮詢：想修改透過 SAP Fiori Elements 生成的應用，但根本不知道從何處下手。因為 Fiori Elements 專案里根本不像透過 SAP UI5 Freestyle 方式開發而成的應用那樣，具有對應的 view 和 controller 檔案。

![](https://img-blog.csdnimg.cn/img_convert/8fc74086d098e6a349151c46983fcfc5.png)

如我回答的那樣，基於 SAP Fiori Elements 的頁面定製，得透過特定的擴充套件方式來完成。

Jerry 最近的開發工作，使用的都是 Angular 框架，理念和技術細節均和 SAP Fiori Elements 迥然不同，這就好比一個習武之人之前練得是《九陽真經》，忽然有一天由於種種客觀原因，需要改練修習方式截然不同的《九陰真經》了。最近我能不時感覺到腦子裡 Angular 和 SAP Fiori Elements 兩種技術思潮的交織和碰撞。關於 Fiori Elements 應用如何定製化的內容，後續 Jerry 會抽時間繼續分享，敬請關注。

![](https://img-blog.csdnimg.cn/img_convert/6ff8f31ca3a9d1e28fcb6f0a0757f72d.png)
orient/strip%7CimageView2/2/w/1240)

更多Jerry的原創文章，盡在："汪子熙":
![](https://img-blog.csdnimg.cn/img_convert/5a690ad2f6c88473b9e68a69e4c7be0b.png)

**更多閱讀**

*   [使用SAP Cloud Application Programming模型開發OData的一個實際例子](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247488045&idx=1&sn=b83b7d204c3ced76c2137a103158c34e&chksm=ead5a0badda229ac40d959b0a697f1a44771643a5b14f10e6cec880dcc7b7fabe95c329c8365&scene=21#wechat_redirect)

*   [30分鐘用Restful ABAP Programming模型開發一個支援增刪改查的Fiori應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247486989&idx=1&sn=75fef3a06bedb96e58af8d82d567fbb2&chksm=ead5bc9adda2358c5120d84eec1677dd02ecbf6ffd4d39474690995eb98411e63c0384a021e1&scene=21#wechat_redirect)

*   [Jerry帶您瞭解Restful ABAP Programming模型系列之二：Action和Validation的實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247487059&idx=1&sn=33887752e28aea429c855217a485cabf&chksm=ead5bcc4dda235d2a4a87ce7f0ca47b6689267defbd6c0e8f632f88f4623954cc0fd13a26be3&scene=21#wechat_redirect)

*   [Jerry帶您瞭解Restful ABAP Programming模型系列之三：雲端ABAP應用除錯](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247487086&idx=1&sn=d0a9023544411953df2e79562111748d&chksm=ead5bcf9dda235ef348a77afa9647b2bd465add9c3642fbd555f2528a37c8425aaa896c03e67&scene=21#wechat_redirect)

*   [SAP雲平臺上的Low Code Development(低程式碼開發)解決方案](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247489605&idx=1&sn=a6d69eb491ca3be8cf90a3cf07bbf619&chksm=ead5aad2dda223c40b9683d8b5fd5570424c51d30664a39fed2a0ff58e89b23a44463756f2aa&scene=21#wechat_redirect)

*   [SAP Cloud Application Programming 介紹(2021 更新版）](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491995&idx=1&sn=36099addb3c06be69b45a740ab8d2f9b&chksm=ead6530cdda1da1ac74ede0eec6c0bbfe32f1c3b34689fc7db6c9049b65caf8e5107f183ca14&scene=21#wechat_redirect)

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

相關文章