本教程前一篇步骤,笔者已经向大家详细介绍了如何通过 Extension
的方式,在 SAP Fiori Tools 提供的向导,自动生成的 Fiori Elements List Report 应用里,添加新的表格列的步骤,效果如下图所示。
- 10. 如何通过扩展(Extension)的方式给 SAP Fiori Elements List Report 的表格新增列
我们使用这篇教程里介绍的名叫 UI5 Inspector
的 Chrome 扩展,来查看扩展后渲染出的 Fiori Elements 页面:
可以发现,我们通过扩展方式新增的列 Extension Column1
,已经同整个表格"完美融合"
在了一起。
在 UI5 Inspector 里:
- Fiori Elements 应用自动生成的表格列的 id 格式如下:
jerryfiorielement02::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--listReport-MainProductCategory
- 我们扩展的自定义列的 id:
jerryfiorielement02::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--FioriTools::ext2-column1
通过比较发现,列 id 的前缀完全一致,区别只是 --
后面的后缀。我们通过向导扩展的自定义列,id 后缀为 FioriTools::ext2-column1
,其中 FioriTools
代表这个列通过 Fiori Tools 这个 Visual Studio Code 扩展生成,ext2-column1
是我们在本地工程 fragment 实现文件里手动指定的值。
本文余下部分介绍下面这两个问题的答案:
- 下图 webapp 文件夹中 manifest.json 文件内维护的扩展定义,运行时是如何被 Fiori Elements 框架解析的?
- 扩展向导生成的 ext 文件夹和里面两个 XML 格式的 Fragment 文件,运行时是如何被 Fiori Elements 框架解析,加载和渲染的?
下面是详细解答。