0
点赞
收藏
分享

微信扫一扫

使用 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 Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据_自动生成

应用类型选择 ​​SAP Fiori elements​​​,floorplan 选择 ​​List Report Object Page​​:

List Report 标准 SAP Fiori floorplan 之一,它以最常用的表格控件为载体,能够让用户查看大量项目数据。用户可以使用过滤器、排序和分组作为该 floorplan 的开箱即用功能来搜索相关项目。 这些功能都是开箱即用的,无需应用开发人员手动编写 JavaScript 代码。

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

Data source 选择 ​​Connect to an OData Service​​, 将 Northwind OData url 维护进去:

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

Main entity 选择 ​​Customers​​,意思是生成的应用里,默认在表格里显示 Customers 数据。

​Navigation entity​​​ 选择 ​​Orders​​:

使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据_自动生成_04

随便维护一个 module name,点击 finish:

使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据_自动生成_05

稍等片刻,应用即生成完毕。

右键点击 webapp 文件夹,选择 ​​Preview Application​​:

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

选择 start:

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

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

​​https://workspaces-ws-pdwk4-app1.us10.trial.applicationstudio.cloud.sap/test/flpSandbox.html?sap-ui-xx-viewCache=false#northwindtest-tile​​

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

点击齿轮的图标,打开配置页面,将期望查看的 table column 前面的 checkbox 打上勾:

使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据_自动生成_09

点击 ok,northwind odata 服务里的客户数据,就显示在这个列表里了:

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

但是这种设置下一次本地启动应用后就会丢失。

正规的做法是,对 ​​webapp​​​ 文件夹点击右键,选择 ​​Open Guided development​​:

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

然后选择 ​​Add and edit table columns​​,意思是为 List Report 的表格增加新的 column:

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

得到提示是使用 ​​UI.LineItem​​ 注解:

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

选中要添加注解的 Entity Type 为 ​​Customer​​:

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

选择要添加到表格里的列数据源来自 OData 模型的属性 ​​CustomerID​​:

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

自动生成了需要的 annotation,点击 Insert Snippet:

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

使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据_自动生成_17

上述代码自动被添加到了 webapp/annotations/annotation.xml:

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

最后刷新应用,发现 CustomerID 能够在默认情况下正常显示了:

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



举报

相关推荐

0 条评论