使用 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 能够在默认情况下正常显示了:
相关文章
- SAP UI5 sap.ui.core.Element 的概要介绍
- SAP UI5 sap.ui.layout.Grid 控件概述
- SAP UI5 应用中的 sap.ui.require 使用场景
- SAP UI5 应用中的 sap.ui.require.toUrl 使用场景
- 关于 SAP UI5 所有控件的共同祖先 - sap.ui.base.ManagedObject
- 使用 SAP UI5 sap.ui.export.Spreadsheet API 进行 Excel 导出的一些限制
- SAP UI5 sap.ui.Device.media 公有方法介绍
- SAP MM模块-主要的采购业务
- 戴尔大中华区总裁「黄陈宏」跳槽,被任命为 SAP 大中华区总裁
- 如何使用 SAP OData 服务向 ABAP 服务器上传文件试读版
- SAP QM 不常用功能之Source Inspection
- SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
- SAP ABAP 通过 https 消费外部 API 遇到错误消息 SSSLERR_SSL_CONNECT
- SAP ABAP FUNCATION ALV控件 用户选择选中的例子DEMO详解编程语言
- SAP_Web_Service开发配置详解编程语言
- SAP移动类型详细说明详解编程语言
- SAP定义物料组详解编程语言
- 各种SAP常用表详解编程语言
- SAP FICO事务码F110替代详解编程语言
- SAP ABAP详解编程语言
- sap Merge change requests详解编程语言
- 配置SAP服务器外网登陆以及网络故障解决示例详解编程语言
- SAP在Linux上安装(sap安装linux)
- 对比SAP VS Oracle: 哪个更适合你?(sap与oracle)