使用 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 能够在默认情况下正常显示了:

相关文章
|
6月前
|
存储 安全 数据管理
SAP 产品 data archive 数据归档的重要性
SAP 产品 data archive 数据归档的重要性
|
6月前
|
存储 供应链 安全
SAP S4HANA 数据归档的实施方法
SAP S4HANA 数据归档的实施方法
|
6月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
6月前
|
安全 API 数据库
SAP ABAP OData 中 Function import 的概念介绍
SAP ABAP OData 中 Function import 的概念介绍
|
6月前
|
前端开发 数据库 开发者
如何在 SEGW 事务码里为 SAP ABAP OData 服务实现 Function Import 试读版
如何在 SEGW 事务码里为 SAP ABAP OData 服务实现 Function Import 试读版
SAP ABAP OData 服务里需要指定 guid 类型的请求参数时,正确语法是什么?
SAP ABAP OData 服务里需要指定 guid 类型的请求参数时,正确语法是什么?
|
6月前
|
机器学习/深度学习 存储 人工智能
SAP Business Technology Platform 支持的技术栈
SAP Business Technology Platform 支持的技术栈
|
6月前
|
存储 安全 数据管理
SAP S4HANA 数据归档流程详解
SAP S4HANA 数据归档流程详解
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍