SAP Fiori Elements 学习笔记 - 2021年4月19日

简介: 订阅专栏SAP Fiori Elements List Report 里 Smart Table 模板的设计原理:sap.suite.ui.generic.template.fragments.TableColumns 和 sap.suite.ui.generic.template.fragments.TableColumnListItem 分别显示表头和表的行内容。

SAP Fiori Elements List Report 里 Smart Table 模板的设计原理:


sap.suite.ui.generic.template.fragments.TableColumns 和 sap.suite.ui.generic.template.fragments.TableColumnListItem 分别显示表头和表的行内容。


image.png


运行时,这些 fragments 对应的 XML 资源被加载如下:


image.png


SAP Fiori Elements 项目里和 i18n 相关的设置

i18n 相关的设置:


image.png


指定 ListReport 使用的 main entityset 为:SEPMRA_C_PD_Product:


image.png


Fiori Elements 应用向后台发起的 OData 请求:


image.png


响应里包含的 edmx 标签是什么含义?


edmx file is an XML file that defines an Entity Data Model (EDM), describes the target database schema, and defines the mapping between the EDM and the database.


edmx 文件是一个 xml 格式的文件,定义了一个 Entity Data Model,简称 EDM,描述了目标数据库 Schema,以及 EDM 到数据库表的映射关系。


manifest.json 文件里和翻译,国际化(i18n)相关的设置点:


image.png


resources 字段指定的文件:resources.json - it lists all resources in a component or library folder. It resides next to each manifest.json in the generated results.


list report 里显示 Smart Table 的设计原理:


<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1"
    template:require="sap.suite.ui.generic.template.js.StableIdHelper"
      xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:semantic="sap.m.semantic" xmlns:ushell="sap.ushell.ui"
     xmlns:build="sap.build" xmlns:st="sap.suite.ui.generic.template">
  <core:Fragment fragmentName="sap.suite.ui.generic.template.ListReport.view.fragments.FullscreenPage" type="XML"/>
  <!-- create with dialog fragment load if manifest setting is there -->
  <template:with path="parameter>/templateSpecific/tableSettings/createWithParameterDialog" var="createWithParameterDialog">
  <core:Fragment fragmentName="sap.suite.ui.generic.template.fragments.CreateWithDialog" type="XML"/>
  </template:with>
</mvc:View>


IconTabBarWithSmartTable


image.png


下图高亮这个 fragment 即包含 SmartTable 的实现:


image.png


List Report 支持不同的表格类型:


AnalyticalTable

TreeTable

GridTable

ResponsiveTable ( 默认 )

image.png


https://sapui5.hana.ondemand.com/1.36.6/docs/guide/c2f4684363c64d5fbaf65662c11dc6ea.html


The app configures several data models that are used throughout the app to update the views or to store additional configuration options.


SAP UI5 应用配置了需要在 app 中使用的数据模型,用来更新视图,或者存储额外信息。


The service model and the resource bundle are instantiated automatically by the app’s component during startup.


SAP UI5 应用模型和 resource bundle,在应用 Component 启动时自动被初始化。


The local view models and helper models such as the device model are set up as JSON models.


本地视图模型,以及出于辅助目的引入的模型,比如 device 模型,实现模式为 JSON model.


相关文章
|
2月前
|
IDE JavaScript 开发工具
什么是 SAP Fiori tools 的 environment check 功能
什么是 SAP Fiori tools 的 environment check 功能
26 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
29 0
|
1月前
|
前端开发 UED
SAP Fiori 到底指什么
SAP Fiori 到底指什么
35 0
|
1月前
|
XML 前端开发 JavaScript
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
SAP Fiori Launchpad Custom Fields tile 里的 ABAP 语法高亮显示
13 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
|
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
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0