关于 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:
会自动弹出一个新的浏览器窗口,显示空白数据:
点击齿轮的图标,打开配置页面,将期望查看的 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 能够在默认情况下正常显示了: