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

关于 SAP 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:

会自动弹出一个新的浏览器窗口,显示空白数据:

点击齿轮的图标,打开配置页面,将期望查看的 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 能够在默认情况下正常显示了:

版权声明: 本文为 InfoQ 作者【Jerry Wang】的原创文章。
原文链接:【http://xie.infoq.cn/article/e47f625f918f769054ce16c57】。文章转载请联系作者。
评论