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

简介: 使用 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:

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

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

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

相关文章
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
2月前
|
缓存 UED
关于 SAP OData Annotation Provider Class 以及 metadata 模型注册的事务码
关于 SAP OData Annotation Provider Class 以及 metadata 模型注册的事务码
27 0
|
3月前
|
数据采集 供应链 数据管理
关于评估 SAP 主数据的数据初始化对 SAP 系统影响范围的方法论
关于评估 SAP 主数据的数据初始化对 SAP 系统影响范围的方法论
42 0
|
3月前
|
XML API 数据格式
SAP 标准 OData 服务 CATALOGSERVICE;v=2 的作用介绍
SAP 标准 OData 服务 CATALOGSERVICE;v=2 的作用介绍
24 0
|
21天前
|
存储
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
21 0
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0
|
1月前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
36 0
|
1月前
|
数据库 开发者 容器
SAP OData metadata.xml 里 EntityType,EntitySet 和 EntityContainer 三个概念之间的区别和联系
SAP OData metadata.xml 里 EntityType,EntitySet 和 EntityContainer 三个概念之间的区别和联系
26 0
|
2月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
22 0
|
2月前
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
17 0