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

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

• 答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

本文使用公網上可以任意訪問的用于教學用途的 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：

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

List Report 標準 SAP Fiori floorplan 之一，它以最常用的表格控件為載體，能夠讓用戶查看大量項目數據。用戶可以使用過濾器、排序和分組作為該 floorplan 的開箱即用功能來搜索相關項目。 這些功能都是開箱即用的，無需應用開發人員手動編寫 JavaScript 代碼。

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

Main entity 選擇 Customers，意思是生成的應用里，默認在表格里顯示 Customers 數據。

Navigation entity 選擇 Orders：

隨便維護一個 module name，點擊 finish：

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

右鍵點擊 webapp 文件夾，選擇 Preview Application：

選擇 start：

會自動彈出一個新的瀏覽器窗口，顯示空白數據：

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

點擊齒輪的圖標，打開配置頁面，將期望查看的 table column 前面的 checkbox 打上勾：

點擊 ok，northwind odata 服務里的客戶數據，就顯示在這個列表里了：

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

正規的做法是，對 webapp 文件夾點擊右鍵，選擇 Open Guided development：

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

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

選中要添加注解的 Entity Type 為 Customer：

選擇要添加到表格里的列數據源來自 OData 模型的屬性 CustomerID：

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

上述代碼自動被添加到了 webapp/annotations/annotation.xml:

最后刷新應用，發現 CustomerID 能夠在默認情況下正常顯示了：

總結

以上是生活随笔為你收集整理的使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。