使用 SAP WebIDE 创建 SAP Fiori Elements 应用

简介: 使用 SAP WebIDE 创建 SAP Fiori Elements 应用

在新建项目菜单里,image.pngCategory选择为SAP Fiori Elements,模板选择为List Report Application:image.pngimage.png该List Report Application消费的OData服务,从Service Catalog的下拉菜单里选择指向ES5系统的Destination,从中选择EPM_REF_APPS_SHOP_SR这个服务:image.png选择Suppliers这个data collection:

image.pngOData Collection选择Suppliers:image.png一切就绪后,运行:image.png看到空白的页面,这是因为我们尚未在该List Report Application里指定更多有意义的annotation:image.png新建一个annotation文件,用来存放我们的自定义注解:image.pngimage.png而manifest.json也自动引用了我们刚刚创建的annotation.xml:image.png新建一个annotation:image.pngimage.png注解类型选择为UI.LineItem:image.png在UI.LineItem下再创建一个DataFieldWithURL注解:image.png再添加一个UI.DataField注解。这样,在Fiori Elements绘制的表格里出现了两列,分别通过UI.DataFieldWithUrl和UI.DataField实现。image.png在添加一个UI.PresentationVariant注解,实现排序功能:image.png把UI.PresentationVariant.SortOrder.Common.SortOrder施加到Name字段上:

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

image.png通过UI.HeaderInfo注解,我们可以维护对用户更友好的信息:image.png分别通过UI.HeaderInfo的TypeName和TypeNamePlural维护HeaderInfo的单数和复数形式:image.png效果如下:image.png


相关文章
|
2月前
|
数据库 API
启用SAP Fiori之前的一些注意事项
启用SAP Fiori之前的一些注意事项
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
|
2月前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍