对于 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…
关上 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-a…
点击齿轮的图标，关上配置页面，将冀望查看的 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 可能在默认状况下失常显示了：