Fiori 應用索引(Fiori Application Reference)顧名思義，這是 SAP[官方](https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/index.html)釋出的一個Fiori應用檢索工具，所有標準釋出的Fiori應用的明細都能在這個工具裡查到。

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

截至到筆者寫這篇文章的時候，這個網站上顯示已經存在11949個Fiori標準應用了：

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

2015 年 Fiori 1.0時代，UI風格稱為Blue Crystall，當時筆者還在SAP成都研究院的CRM Fiori開發團隊工作，我們從印度同事那裡接過了8個CRM Fiori應用，並進行接下來的持續開發。

如何在這個Fiori應用索引大全裡找到它們？
點選上圖左上方的SAP Fiori apps for SAP Business Suite：

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

然後選擇根據 Application Component進行過濾：

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

這個Component就是客戶或者Partners，在實施和使用Fiori應用時，如果發現問題，給SAP報incident時需要填的Component欄位。

比如Component CRM-FIO-BTX-OPP下面存在一個Fiori應用，即My Opportunities:

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

這裡就能看到它的明細了，比如後臺至少需要CRM EHP3，應用型別為Transactional，支援任意DB，能夠在Desktop和Tablet上訪問，App ID為F0012：

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

其他所有的CRM Fiori應用也能在這裡一起找到：

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

以上提到的8個CRM Fiori應用，其原始碼是印度同事和筆者所在的 SAP成都研究院的開發人員一行一行寫出來的。我們說Fiori並不是一門具體的前端技術或者程式語言，而是一門設計語言，代表一種UI設計風格，其實現除了像CRM Fiori那樣採用純粹的UI5原生開發方式進行，還存在下面這三種方案：

(1) SAPGUI是可以透過SAP ITS(Internet Transaction Server)在瀏覽器裡使用的，詳情參考筆者之前發表的文章：那些年我用過的SAP IDE。同樣，使用SAP ITS在瀏覽器裡執行SAPGUI實現的那些傳統的事務碼，透過SAP 互動設計師和UI框架開發工程師的努力，也能確保使用者在瀏覽器裡使用這些傳統事務碼時，感受到和用UI5原生開發出的Fiori應用一樣流暢易操作的使用者體驗。

(2) 採用SAP UI5技術之外的其他UI開發技術，比如WebDynpro，WebClient UI開發出的Web應用，透過SAP互動設計師和UI框架開發工程師採用的Visual Harmonization，同樣能讓這些Web應用的使用者體驗，能達到和Fiori原生應用比肩的效果。

(3) 採用SAP S/4HANA CDS view加上大量註解(annotation)的後設資料驅動開發方式，現在SAP官方把這種開發方式叫做Fiori Elements.

對於終端使用者來說，無論一個Fiori應用採用其上四種方式的哪一種開發而成，使用體驗都沒有任何差別。換句話說，這四種開發方式得到的Fiori應用，其實現細節對於使用者來說完全是透明的。

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

而對於實施Fiori的技術人員來說，如果有必要深入到這些技術實現細節中，可以在Fiori應用索引大全上，根據Application Type欄位進行過濾。

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

採用WebClient UI技術實現的Fiori應用只有119個，只佔總數的1%左右。

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

裡面就包括筆者之前的文章 Hello World, S/4HANA for Customer Management 1.0 提到的在傳統SAP CRM裡建立服務訂單使用的WebClient UI應用，如今透過Visual Harmonization，加入了S/4HANA Fiori應用的大家庭。

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

S/4HANA裡建立服務訂單這個應用的ID為TBT116MCR：

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

在事務碼CRMC_UI_NBLINKS裡能找到對應的WebUI component為BT116M_SRVO:

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

幫助文件地址：https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US

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

除了 Fiori Application Reference 之外，SAP 也提供了許多功能來提高使用 SAP Fiori Elements 或者 SAPUI5 自由式方法開發 SAP Fiori 應用程式的效率。

SAP Fiori 工具與 SAP Fiori Elements 一起減少了開發時間、維護成本，並利用了後設資料驅動的 UI 的優勢。
SAP Fiori 工具包括以下擴充套件：

- 用於初始建立應用程式的嚮導。
- 用於檢視資料模型的服務建模器。
- 用於維護註釋的 XML 和基於表單的編輯器(僅限 SAP Fiori Elements）
- 應用程式頁面結構和配置 SAPUI5 靈活性設定的能力(僅限 SAP Fiori Elements）
- 用於實施功能的引導式開發(僅限 SAP Fiori Elements)

如果採用 Visual Studio Code 作為 SAP UI5 開發工具，我們可以透過安裝一個名為 SAP Fiori Tools -Extension Pack 的擴充套件，來安裝 SAP Fiori Tools：

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

更具體的採用 Visual Studio Code 來搭建 SAP UI5 的本地開發環境的步驟，請參考我的文章：SAP UI5 本地開發環境的搭建。

這個工具還有一個命令列介面，Command Line Interface 縮寫為 CLI.

npm 倉庫地址如下：https://www.npmjs.com/package/@sap/ux-ui5-tooling

SAP Fiori Tools - UI5 Tooling 包含一系列可與命令 ui5 serve 一起使用的自定義中介軟體，以及可與命令 ui5 build 一起使用的自定義任務。

此外，該模組公開了 fiori 這個命名行，例如 fiori run 命令是 ui5 serve 命令的包裝器，並提供了一些附加引數以及 fiori add deploy-config 和 fiori add flp-config 以擴充套件現有專案。

如果本地執行命令列 npm run deploy 之後出錯：
> fiori is not recognized as an internal or external command

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

檢查 SAP UI5 專案裡的 package.json 檔案裡的 dependencies, 檢視是否定義了 Fiori Tools CLI 對應的依賴：

```javascript
"@sap/ux-ui5-tooling": "1.0.10"
```

新增後執行 npm install，然後 fiori add deploy-config, 遇到新的錯誤訊息：
> Error: Cannot find module '@ui5/fs'

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

那麼將 "@ui5/fs": "2.0.1" 新增到 devDependencies 區域：

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

之後看到 Fiori tools CLI 的提示訊息，說明 Fiori Tools CLI 已經可用了：

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

# 總結

本文依次分享了 Fiori Application Reference 和 Fiori Tools 這兩個實用工具在筆者實際工作中所發揮的重要作用。

SAP Fiori應用索引大全工具和 SAP Fiori Tools 的使用介紹

相關文章