關於 SAP Fiori Elements 的介紹，請參考我這些文章：

- [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&token=1980816726&lang=zh_CN#rd)

- [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&token=1980816726&lang=zh_CN#rd)

本文使用公網上可以任意訪問的用於教學用途的 northwind OData 服務為例，在 SAP Business Application Studio 上建立一個 Fiori Elements 應用來顯示 OData 服務的資料。

這個 OData service 的 url：

https://services.odata.org/V2/Northwind/Northwind.svc/

開啟 SAP Business Application Studio，New Project from Template，選擇 `SAP Fiori Application`：

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

應用型別選擇 `SAP Fiori elements`，floorplan 選擇 `List Report Object Page`：

List Report 標準 SAP Fiori floorplan 之一，它以最常用的表格控制元件為載體，能夠讓使用者檢視大量專案資料。使用者可以使用過濾器、排序和分組作為該 floorplan 的開箱即用功能來搜尋相關專案。 這些功能都是開箱即用的，無需應用開發人員手動編寫 JavaScript 程式碼。
![](https://img-blog.csdnimg.cn/img_convert/a43920a8f6ba6cd1e6a512cdfd79b866.png)

Data source 選擇 `Connect to an OData Service`, 將 Northwind OData url 維護進去：

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

Main entity 選擇 `Customers`，意思是生成的應用裡，預設在表格裡顯示 Customers 資料。

`Navigation entity` 選擇 `Orders`：

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

隨便維護一個 module name，點選 finish：
![](https://img-blog.csdnimg.cn/img_convert/5c5d657aad4cae65470a10424d543e5a.png)

稍等片刻，應用即生成完畢。

右鍵點選 webapp 資料夾，選擇 `Preview Application`：

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

選擇 start：
![](https://img-blog.csdnimg.cn/img_convert/51aceaffc4eb5d11544e3cf7983ea605.png)

會自動彈出一個新的瀏覽器視窗，顯示空白資料：

https://workspaces-ws-pdwk4-app1.us10.trial.applicationstudio.cloud.sap/test/flpSandbox.html?sap-ui-xx-viewCache=false#northwindtest-tile

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

點選齒輪的圖示，開啟配置頁面，將期望檢視的 table column 前面的 checkbox 打上勾：
![](https://img-blog.csdnimg.cn/img_convert/b13385bc236dc16dca4860e61af85ef6.png)

點選 ok，northwind odata 服務裡的客戶資料，就顯示在這個列表裡了：

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

但是這種設定下一次本地啟動應用後就會丟失。

正規的做法是，對 `webapp` 資料夾點選右鍵，選擇 `Open Guided development`：

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

然後選擇 `Add and edit table columns`，意思是為 List Report 的表格增加新的 column：

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

得到提示是使用 `UI.LineItem` 註解：

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

選中要新增註解的 Entity Type 為 `Customer`：

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

選擇要新增到表格裡的列資料來源來自 OData 模型的屬性 `CustomerID`：

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

自動生成了需要的 annotation，點選 Insert Snippet：

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

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

上述程式碼自動被新增到了 webapp/annotations/annotation.xml:

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

最後重新整理應用，發現 CustomerID 能夠在預設情況下正常顯示了：

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

使用 SAP Business Application Studio 建立 Fiori Elements 應用顯示 OData 資料

相關文章