2007 年 ~ 2025 年，深耕 SAP 技术 18 年

Fiori Elements 开发技术相对 SAP 其他历史悠久，发展成熟的开发技术来说，是一个新事物。正因如此，迄今为止国内深入讲解 Fiori Elements 应用的中文材料几乎没有。

Fiori Elements 和 SAP UI5 Freestyle 是两种不同的开发方式，二者各有其优势和应用场合。如果 SAP UI5 应用开发需要在极短的时间快速完成，并且应用仅仅需要完成 SAP Fiori Elements 预置模板就能覆盖的标准流程，对灵活性，自由度和可扩展性没有太多要求，那么 Fiori Elements 是比较合适的选择。如果应用需要实现非标准化的业务流程和用户界面，对定制化，可扩展性和灵活性有较高要求，则推荐使用 Freestyle UI5 开发方式。

因为 command 可以出现在 Fiori Elements List Report Smart Table 的 Toolbar 或者 Object Page 的 header 区域，因此接下来，我们需要在 Control Extension 里，指定让 Object Page 的某个。如果大家在 manifest.json 文件里配置了 Command，但最后 Object Page 的 header 区域，却看不到期望的自定义按钮显示出来，那么大家可以根据笔者下图提供的两张截图，在。

笔者之前的教程文章，对于 SAP UI5 应用描述符文件最近笔者在持续更新 Fiori Elements 的开发教程，有不少学习者反映，Fiori Elements 应用的扩展场景，往往需要在里添加扩展配置项，比如和这些配置项比较繁琐，容易出错。一旦配置项出错，manifest.json 无法正确被解析，此时需要开发人员去调试 SAP UI5 框架解析 manifest.json 时，到底哪里出了问题。对于这种情况我们需要知道从哪里设置断点进行分析。本文就来聊聊这个话题。

本文把它分拆为七个 token，逐一解释它们的来源、含义以及在开发、自动化测试、性能诊断中的价值，并辅以一段可独立运行的最小示例，帮助读者在真实项目中快速定位控件，甚至自定义扩展。是 UI5 在 shell 启动阶段为每个已加载应用分配的前缀，用来与库、复用组件生成的 ID 区分开来，保证全局唯一。使用，后者是 UI5 官方推荐的 View 与 Component 分隔符，可防止不同 View ID 在压缩后发生冲突 (或直接省略，这也解释了为何相同视图在不同导航路径下 ID 不一致的现象。

这里 show 的输入参数 500 的单位是毫秒，意思是 show 方法执行之后，经过 500 毫秒的时延，动画加载的效果就会显示在页面上。在 Fiori Elements Object Page 前端页面请求 OData 数据，而 OData 后端服务器尚未返回的那段空白时间里，SAP 开发团队通过灰色、可闪烁的占位框即时呈现界面骨架，让用户预感到后续内容的结构与层级，从而显著降低。所以，大家在 Fiori Elements 应用里看到的这种空白而灰白的框架显示，是 SAP 有意为之。

同样，Fiori Elements 的 List Report 和 Object Page 应用，也存在类似 ABAP BAdI Definition 这种扩展机制，允许 Fiori Elements 开发者在不修改 List Report 和 Object Page 标准模版源代码的情况下，插入自定义的业务逻辑。在 SAP ABAP 中，BAdI（Business Add-In）是一种面向对象的增强机制，允许开发者在不修改 SAP 标准代码的前提下，插入自定义的业务逻辑。在 onInit 里，我们调用。

添加的这个 Button 字段，单击它，在右边的 Bindings 区域就能看到这个扩展字段的绑定上下文了。在行项目里任意选择 List Report Smart Table 里一个产品，点击之后进入 Object Page 页面，然后打开 Chrome 开发者工具的。所以我们如果要给新添加的扩展字段设置数据绑定，只需要选择 Binding context 列表里罗列的这些字段名称即可，在黄色区域里任意选择一条都行。，这样在 Control inspector 的结果里，只会显示所有的。

理解它的原理并在代码中恰当使用，将极大减少手动同步数据的样板代码，同时带来更流畅的用户体验。期望读者在下一次调试。它不仅记录当前控件应观察的模型位置，还在用户交互、路由导航、批量 OData 操作等场景中动态更新，确保视图能够始终呈现最新且正确的数据。当列表滚动触发后端分页读取，新的行 context 会不断生成，而离开可视区域的 context 可能被回收以节省内存，这一点在大型表格中尤为重要。在复杂组件树中，上层控件的 binding context 将自然下沉到子控件，形成层次化的默认作用域。

通过本教程之前文章的讲解，我们得知无论是 Fiori Elements List Report，还是 Object Page 这些应用，其 UI 显示的内容，都是 OData 模型的元数据，加上注解(Annotations)来实现的，即所谓的元数据驱动设计理念(Metadata driven).是 OData entitySet 的名称，因为我们的 Object Page 页面是通过点击产品主数据行项目后跳转得到的，显示的是产品的明细数据，所以使用代表产品数据的 entitySet.

Application Modeler 让 Fiori Elements 的元数据世界真正“长出面孔”。Page Map 展现骨架，Page Editor 雕琢细节，两者合力，把过去在与注解文件之间来回切换的痛点转化为图形化拖拽。嵌入式预览让开发周期成倍压缩，社区插件生态也持续丰富。在未来，随着 TypeScript 与 UI5 自定义控件的深度集成，Application Modeler 将继续降低企业级 SAP UI 的学习门槛，助力更多团队快速上线高质量应用。

里面凡是涉及到要研究 SAP UI5 应用从远端服务器读取的 OData 业务数据时，笔者都是采用在 Chrome 开发者工具的 Network 面板里去查看的方法。Network 面板，能监控到所有 Fiori Elements 或者 SAP UI5 前端应用，向后端发起的 HTTP 请求和获得的响应数据。打开页面之后，我们使用快捷键 F12，打开 Chrome 开发者工具。大家从上图可以看到，因为这个结果的全部内容，都放在一行显示了，查阅起来非常不直观，所以我们要将其另存为本地文件。

通过极小的配置成本提供了与现代前端框架相当的热重载体验，它深度理解 Fiori elements 与 UI5 运行时特性，可在不破坏应用状态的前提下即时更新资源，使 SAP UI5 开发者也能享受的敏捷节奏。掌握端口、路径与执行顺序等细节后，这一中间件将在日常编码、调试与演示中发挥巨大价值。

我们通过上图所示的 Network 面板里打开 Fiori Elements 运行时从远端加载的注解文件，笔者提前把这个注解文件下载好了，放到了笔者的。Label 即标签，通过上图黄色区域的 SmartLabel 实现，而实际的业务字段值，通过蓝色的 SmartField 实现。，观察 Fiori Elements Object Page Header 区域，发现 Header 区域的字段，都是。该帮助文档告诉我们，Fiori Elements Object Page Header 区域的字段，通过注解。

我们本文前面提到的在 Chrome 开发者工具 Network 面板观察到加载的 Object Page 的模版文件，笔者已经上传到 Github。换言之，开发人员通过这个注解，告诉 Fiori Elements 框架：当你在运行时准备渲染 Object Page 模版时，你一看到。请求，从 response 里，将上图黄色区域，全部拷贝到本地，另存为 json 文件即可。下面蓝色高亮区域清楚说明了，Object Page 图片的 src，来自注解。为了方便大家学习，笔者也将其下载到本地，然后上传到。

这份内部 JSON 模型保存了框架运行时的各种瞬时状态，例如繁忙指示、可折叠区块的展开状态、批量操作的选中行缓存等。开发者可以读取它来驱动 UI 行为，却不应直接写入或依赖其字段的长期稳定性，因为这些字段在 SAPUI5 升级时可能发生改变。Fiori Elements 采用“元数据驱动”的 UI 生产线理念：页面 UI 由后端注解与前端模板共同渲染，框架负责落地设计指引并提供一致的交互。[体验设计官网]指出，这种模板化方式显著降低了手写前端代码量，提高了一致性和可维护性。点击 UI5 标签页。

接下来将围绕各命名空间的含义和作用进行逐一剖析，并结合加载机制和预处理使用场景进行说明，以帮助深入理解 SAP UI5 XML 视图的构建原理。很多 SAP Fiori Elements 的初学者，通过 SAP 官方或者笔者本套教程介绍的步骤，创建出能够运行的 Fiori Elements 应用之后，心中都有一个疑惑：和 SAP Freestyle UI5 开发相比，SAP Fiori Elements 应用生成好的工程文件夹里，控件，用于在运行时管理用户自定义视图变体，如列隐藏、筛选条件保存等。

SAP UI5 里有不少能在浏览器里显示图片的控件，比如再比如, 下面是一个例子：可以看到，这两种控件指定图片数据来源的src属性，都使用的相对绑定的路径:然后浏览器在运行时渲染页面时，自动在相对路径之前，添加上服务器的主机名和端口号。那么这背后都是怎么工作的呢？且听笔者一一道来。

是 SAP ui5 提供的调试开关，用来禁止将视图模板存入客户端的 LRU 缓存，避免修改 XMLView 却因缓存而看不到效果。iAppState 机制用以压缩并持久化过滤器、排序、分页以及用户自定义列宽等界面状态，当用户离开并返回时可恢复界面。它在没有真实 Launchpad 的情况下，创建最小化 shell 运行时，用于开发者离线调试。是官方约定的分隔符，用来告诉 ushell：后续部分不再参与跨应用导航，而是内嵌路由。一键创建，可在本地重现示例 URL 所描述的场景。

单击我下图里的图例1，就可以看到 JSON 模型的全部内容，以及主标题和副标题绑定到 JSON 模型上两个字段 objectTitle 和 objectSubtitle 的值了。SAP Fiori Elements 中 List Report 的 Smart table 里的行项目，单击后，跳转到 Object Page 的行为是默认的，定义在。我们使用 F12 打开 Chrome 开发者工具，切换到 Elements 面板，能看到这个所谓的 Object Page header 区域，id 为。

从 Call Stack 调用栈上下文，能清楚地看到，点击 Filter 区域的 Go 按钮之后，SmartFilterBar.js 文件里的 search 方法被调用，最终会执行 SmartTable.js 里定义的 onBeforeRebindTableExtension，即我们 Fiori Elements List Report Controller 里实现的 Extension Point.所以问题的关键就是，如何在 List Report 应用里，获取 Table 的实例？

属于 UI 领域词汇表中的核心注解，用来告诉 Fiori Elements 应该把哪些字段渲染成列表表格的列，并且决定列出现的顺序、在不同分辨率下的可见性以及列本身的表现类型。理解它背后的元数据模型不仅能让开发者快速得到一个“零手写 UI 代码”的列表报表，还能在后期维护中保持 CDS 模型的可读性。本篇逐行解构下面的三段注解，说明valueposition各自的含义，展示它们是如何被 SAPUI5 run‑time 解读并最终在浏览器呈现。

通过对结构的逐行剖析，你已掌握如何用最小注解集为 List Report 构建三列高重要度字段，并理解它们在不同设备上的呈现逻辑。把这些原则套到任何 RAP 或 CAP 项目里，即可快速产出既合规范又友好的响应式列表页。如果还要加入排序、过滤或关键属性颜色，只需在对应Record内继续扩展诸如等注解即可，框架会帮你完成剩下的 UI 渲染工作。

有朋友咨询 Fiori Elements List Report 中的 Table 控件，如何实现多选效果。按照教程里介绍的步骤运行之后，可以看到行项目默认只支持单选，即这种 Radio box 图标：有朋友提问，如何将 List Report Table 区域的行项目，更改成支持多选？期望实现如下的效果，即行项目前的 Radio box 单选框，变成了下图所示的 checkbox 选择控件。我们打开笔者 Github 上这个工程文件夹的我们只需要在这段代码里，插入支持行项目多选的代码即可。

SAP Joule 不请自答，解释说标记了接口的 UI Component，具备进行异步内容创建的能力，比如其通过 rootView 分配的视图，在运行时可以异步创建。目前 SAP Business Application Studio 里的 SAP Joule 支持下面这八种上下文，绝大部分都和 SAP UI5 开发相关，剩下的则是代码仓库和 SAP 帮助文档的搜索。SAP Joule 回答的大意是：我只负责回答 SAP UI5 开发相关的问题，不要和我扯其他有的没的。

对于通过 SAP 内容分发网络（CDN）交付的 SAP UI5 版本，结束维护一年后，SAP 会从 CDN 中移除这些版本。里指定版本的 SAP UI5 的库文件下载到本地，这样后续 Fiori Elements 应用启动并渲染页面时，直接使用本地下载好的 SAP UI5 库文件，无需再一个一个通过 HTTP 请求到 SAP 官网去下载了。问题的征兆就是：几个月之前编写的代码，运行得好好的，忽然有一天重新运行，就无法工作了。版本的本地 SAP UI5 库文件已经消失了，因此需要重新下载。

有学习者咨询笔者，Fiori Elements List Report 应用，使用本教程例子的配套代码，运行命令行。每个键值对表示一个页面，其中键是页面的唯一标识符，值是页面的详细配置。：在页面变式中启用表格筛选器，使用户能够在保存的变式中包含表格筛选器设置。：启用智能变式管理，允许用户保存和管理不同的视图设置，如筛选器和排序。：这是页面的唯一标识符，通常由页面类型和实体集名称组成，以管道符。：启用表格的紧凑布局，使表格行距更小，以显示更多数据。：指定此页面绑定的 OData 实体集，即。

文件通过引用 SAP 提供的标准词汇表和本地 OData 服务的元数据，为 Fiori Elements 应用定义了一个基础的注解结构。开发者可以在此基础上添加具体的注解，以满足特定的业务需求和界面定制。文件用于定义本地注解，以补充或覆盖来自后端 OData 服务的元数据。元素内添加具体的注解，以定制 Fiori Elements 应用的界面和行为。的架构，用于在本地注解中定义实体、类型和注解。这使得在本地注解中可以引用该 OData 服务的实体和类型。等，用于控制界面元素的显示和行为。

本文基于 SAP Business Technology Platform 的 ABAP 编程环境进行的开发。使用 ABAP Development Tool 登录 SAP BTP ABAP 编程环境，新建一个 package，命名为 Z_JERRY_CDS.右键选中该 package，创建一个新的 Consumption view. 该视图是一个消费视图，它基于业务对象 (BO) 视图 /DMO/I_TRAVEL_U，提供了独立于消费层的给定数据模型。它包含在其上运行的应用程序所需的所有核心信息。

通过 Jerry 这篇文章 在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用 介绍的步骤，创建一个简单的 SAP Fiori Elements 应用。在 Visual Studio Code 命令栏里，使用 start-mock，则能够以本地 mock 数据启动这个 Fiori Elements List Report 应用。在项目工程文件里，找到 localService 文件夹下面的 metadata.xml, 定位到名为 SEPMRA_C_PD_Produ

这是 Jerry 2021 年的第 29 篇文章，也是汪子熙公众号总共第 300 篇原创文章。之前 Jerry 的两篇文章，分别介绍了如何在本地使用 Visual Studio Code 创建一个 SAP Fiori Elements 应用，以及使用 Fiori Elements Controller Extension 理念，对该 Fiori Elements 应用进行二次开发的具体步骤。在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用答网友提问：使用

关于 SAP Fiori Elements 的介绍，请参考我这些文章：在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？本文使用公网上可以任意访问的用于教学用途的 northwind OData 服务为例，在 SAP Business Application Studio 上创建一个 Fiori Elements 应用来显示 OData 服务

sap.suite.ui.generic.template.ListReport.view.ListReport”：这部分表示的是 SAP Fiori Elements 的模板类型，这里是 ListReport。因此，我们的控件的 ID 会是 ‘myFioriApp::sap.suite.ui.generic.template.ListReport.view.ListReport::SalesOrder–listReport’。这是一个全局唯一的标识，我们可以通过它来找到我们的应用。

通过本文介绍的具体例子，我们能够直观地感受到，较之其在 XML 视图里的定义相比，Smart Field 运行时能够渲染出内容丰富得多的页面，而这些页面，极度依赖于 Smart Field 绑定到的 OData 属性上定义的以 : 作为前缀的元数据注解。希望通过本文的介绍，大家对于 Smart Field 的工作原理和作用，能相比纯粹阅读 官网上的帮助文档，有一个更深入的理解。

我们在Visual Studio Code 里通过 Guided Procedure，可以给 Fiori Elements 框架生成的 List Report 里的 Table，添加自定义按钮，如下图 所示。但实际工作中，有朋友反映，在 Fiori Elements 的 Guided Procedure 中通过向导，一路 Next Next，对于开发人员来说就是个黑盒子。虽然实现了需求，但不知道背后是怎么工作的，觉得一切很不踏实。本文就来深入介绍 Fiori Elements 里 Smart Table

如果图片URL是以"/"、“sap-icon://”、"http://"或"https://"开头的，就表示它是一个绝对路径的URL，不需要进行任何修改，直接返回原始的图片URL。这个示例中，图片URL是SAP提供的图标资源路径，也属于绝对路径，因此不需要进行任何修改，直接返回原始的图片URL。：这个函数用于根据给定的图片URL和应用组件名称，添加完整的路径到图片URL中（如果需要的话）。在这个示例中，图片URL已经是绝对路径，因此不需要进行任何修改，直接返回原始的图片URL。），以确保正确的路径。

我的课程有学习者遇到下面的问题，向我求助。错误截图：错误日志：yes笔者：Visual Studio Code 的 SAP UX Tools 会将本地 SAP UI5 项目的资源文件，打包成一个压缩包，部署到远端 ABAP 系统上。这条 info 日志意思是 Visual Studio Code 开始创建压缩包了。笔者：压缩包创建成功。笔者：部署过程正式开始。笔者：压缩包的内容通过 HTTP POST 请求发送到 ABAP 服务器。

本教程笔者在 Github 仓库上提供的源代码项目里，大家选择对应章节，比如进入文件夹，运行命令行，启动 Fiori Elements List Report 应用后，在 Table 区域，除了朴素的文本显示控件之外，还能看到产品图片控件，显示产品库存状态的 Status 控件，以及产品评分控件，分别如下图高亮的三列所示。对于图片显示，本教程之前的文章已经详细介绍过，这个图片显示，基于 SAP UI5 的Avatar本教程之前的文章，介绍了上图中间显示的 Availability 这一列的数据来源，即。

属性指明了实体之间的关联关系，它是一个引用，指向在模型中定义的关联（Association）。，启动 Fiori Elements List Report 应用后，在 Table 区域，除了朴素的文本显示控件之外，还能看到产品图片控件，显示产品库存状态的 Status 控件，以及产品评分控件，分别如下图高亮的三列所示。前缀的数据项，都是通过 navigation property，从当前的 Entity Set，关联到 metadata 里其他 Entity Set 而获取得到的。

文件，类似 SAP UI5 的 Mock Server，给 SAP Fiori Elements 开发人员，提供了一种本地修改 OData 注解的方式。在 Fiori Elements 应用中，这可以影响字段在不同屏幕尺寸或设备上的显示方式，例如，在移动设备上优先展示，或在宽度不足以显示所有列的。本教程之前的文章介绍过，上述 OData 注解文件的修改，在生产应用场景里，只有 OData 的服务实现方，才能够在 OData 实现的服务器后台修改。注解内部，用以描述列表中的每一列应如何展示，或者在。