關(guān)于 SAP Fiori Elements 的介紹，請參考我這些文章：

• 在沒有任何前端開發(fā)經(jīng)驗的基礎(chǔ)上, 創(chuàng)建第一個 SAP Fiori Elements 應(yīng)用

• 答網(wǎng)友提問：使用 SAP Fiori Tools 創(chuàng)建的 Fiori Elements 應(yīng)用，如何進(jìn)行二次開發(fā)？

本文使用公網(wǎng)上可以任意訪問的用于教學(xué)用途的 northwind OData 服務(wù)為例，在 SAP Business Application Studio 上創(chuàng)建一個 Fiori Elements 應(yīng)用來顯示 OData 服務(wù)的數(shù)據(jù)。

這個 OData service 的 url：

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

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

應(yīng)用類型選擇 SAP Fiori elements，floorplan 選擇 List Report Object Page：

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

Data source 選擇 Connect to an OData Service, 將 Northwind OData url 維護(hù)進(jìn)去：

Main entity 選擇 Customers，意思是生成的應(yīng)用里，默認(rèn)在表格里顯示 Customers 數(shù)據(jù)。

Navigation entity 選擇 Orders：

隨便維護(hù)一個 module name，點擊 finish：

稍等片刻，應(yīng)用即生成完畢。

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

選擇 start：

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

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

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

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

但是這種設(shè)置下一次本地啟動應(yīng)用后就會丟失。

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

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

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

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

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

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

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

最后刷新應(yīng)用，發(fā)現(xiàn) CustomerID 能夠在默認(rèn)情況下正常顯示了：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。