SAP Fiori Elements List Report 表

本教程前一篇步骤，笔者已经向大家详细介绍了如何通过 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 实现文件里手动指定的值。

本文余下部分介绍下面这两个问题的答案：

1. 下图 webapp 文件夹中 manifest.json 文件内维护的扩展定义，运行时是如何被 Fiori Elements 框架解析的？

2. 扩展向导生成的 ext 文件夹和里面两个 XML 格式的 Fragment 文件，运行时是如何被 Fiori Elements 框架解析，加载和渲染的？

下面是详细解答。