使用SAP WebIDE创建SAP Fiori Elements应用

简介:

在新建项目菜单里,

Category选择为SAP Fiori Elements,模板选择为List Report Application:


该List Report Application消费的OData服务,从Service Catalog的下拉菜单里选择指向ES5系统的Destination,从中选择EPM_REF_APPS_SHOP_SR这个服务:

选择Suppliers这个data collection:

OData Collection选择Suppliers:

一切就绪后,运行:

看到空白的页面,这是因为我们尚未在该List Report Application里指定更多有意义的annotation:

新建一个annotation文件,用来存放我们的自定义注解:


而manifest.json也自动引用了我们刚刚创建的annotation.xml:

新建一个annotation:


注解类型选择为UI.LineItem:

在UI.LineItem下再创建一个DataFieldWithURL注解:

再添加一个UI.DataField注解。这样,在Fiori Elements绘制的表格里出现了两列,分别通过UI.DataFieldWithUrl和UI.DataField实现。

在添加一个UI.PresentationVariant注解,实现排序功能:

把UI.PresentationVariant.SortOrder.Common.SortOrder施加到Name字段上:

这样Name字段就支持自动排序了:

通过UI.HeaderInfo注解,我们可以维护对用户更友好的信息:

分别通过UI.HeaderInfo的TypeName和TypeNamePlural维护HeaderInfo的单数和复数形式:

效果如下:

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

相关文章
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
29 0
|
2月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
45 0
|
2月前
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
97 2
|
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
28 0
|
1月前
|
前端开发 UED
SAP Fiori 到底指什么
SAP Fiori 到底指什么
31 0
|
1月前
|
XML 前端开发 JavaScript
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
13 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
13 0