关于 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)

ITPub博客

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

最新文章