使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据

关于 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 能够在默认情况下正常显示了：