汪子熙的专家技术分享

本教程是笔者开始编写的第四套开发教程。Fiori Elements 是 SAP 公司的旗舰级产品，第四代 ERP 产品即 SAP S/4HANA UI 界面的开发工具，可以说在 SAP 浩如烟海的技术开发体系中，占据着绝对举足轻重的地位。Fiori Elements 开发技术相对 SAP 其他历史悠久，发展成熟的开发技术来说，是一个新事物，它于 2013 年才在 SAP 公司内部试用，当时还称为 Smart Template. 正因如此，迄今为止国内深入讲解 Fiori Elements 应用的中文

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

我的课程有学习者遇到下面的问题，向我求助。错误截图：错误日志：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 实现的服务器后台修改。注解内部，用以描述列表中的每一列应如何展示，或者在。

至此，Fiori Elements List Report 这个模版里，图片显示的原理，笔者已经从开发人员层面需要定义的注解，和 Fiori Elements 框架层面如何解析这些注解，这两方面做了深入介绍。从本文开始，我们从 Fiori Elements 预制的标准 XML Template 模版的设计，来介绍我们在最终 Fiori Elements 页面看到的产品图标，是如何渲染出来的。但是，List Report 里产品的图标显示，到底是上面这些 XML 文件里的哪一个里定义的呢？

在选择使用 SAP UI5 Freestyle 还是 Fiori Elements 时，开发团队需要权衡其优势和缺陷，并根据具体的业务需求，项目情况，以及开发团队人员的技术水平来进行决策。

工欲善其事,必先利其器。时至今日，SAP 提供了非常多的 SAP UI5 开发工具，既包含本地搭建的，也包含浏览器里远端使用的工具，比如 WebIDE 和 Business Application Studio.我们访问下面这个链接，就能找到所有这些工具的安装或者配置步骤：https://tools.hana.ondemand.com/#sapui5如果想选择本地开发，SAP 推荐的工具是 Visual Studio Code，也就是本文要介绍的内容。也可以下载 WebIDE 的本地安装包，将其安

至此本文的任务已经完成，即我们了解了 OData 注解 `UI.IsImageURL` 是如何导致对应的字段，在运行时被渲染成一个 Image 的技术细节。至于上图 SAP Fiori Elements XML 模版里这些语法的详细介绍，请参考本教程下一篇文章。

很多朋友向我反映，学习了 一段时间的 SAP Fiori Elements 开发，但是感觉整套体系对于自己来说还是个黑盒子，很多技术点，看了 SAP 官方帮助文档后，觉得自己懂了，但是一旦需要自己动手做一些东西出来时，又觉得一片茫然。其实笔者自己也经历过这个过程。究其原因，还是大家对 Fiori Elements 一些技术细节没有理解，对 SAP 官方的知识点仅仅停留在记忆，甚至是死记硬背上面。不过没有关系，本教程笔者会刻意设置一些练习，让大家动手，在实战中逐渐熟悉 Fiori Elements 这

本文介绍了 SAP UI5 开发人员，使用 Visual Studio Code 里 SAP 提供的扩展（比如 SAP Fiori Tools）进行开发时，如果扩展本身遇到问题，应该如何去进行错误排查。大家实际开发过程中在 Visual Studio Code 里遇到问题的话，也可以在这个帖子评论区留言，大家一起讨论。

笔者专门利用这篇文章的篇幅，来介绍 SAP Fiori Tools Extension Pack 这个全家桶，在实际 SAP Freestyle UI5 应用和 SAP Fiori Elements 应用开发过程中的一些使用技巧。

OData 4.0 的注解结构更加灵活和表达力更强，它引入了通用的 `` 元素，并使用 `Term` 属性来指定注解的类型，使得注解的定义更加清晰和模块化。这种改变提高了 OData 协议的扩展性和可读性，也使得开发者更容易理解和维护OData服务。虽然这两个版本的 Annotations 都可以实现相同的功能，但 OData 4.0的结构更加规范、一致，也更符合现代标准的设计理念。

本文通过一个实际开发案例，即打印 SAP Fiori Elements List Report 表格控件选中行项目的业务数据，介绍了 SAP Fiori Extension API 的概念和使用方法。Extension API 是 SAP Fiori Elements 应用开发人员进行的扩展开发，与 SAP Fiori Elements 框架提供的标准功能之间的`官方接口`。 开发人员只有正确使用这套`官方接口`，SAP 才能保证二次开发人员所实现的扩展，同 SAP Fiori Elements 的

本文介绍了如何在 SAP Fiori Elements List Report 的自定义 Action 扩展开发中，使用 JavaScript 编码，获取当前选中的表格行项目的业务数据。本教程下一篇文章，我们会介绍另一种更规范也是 SAP 推荐的 Extension API 的方式，同样能实现本文描述的需求。

本文通过一个具体的例子，介绍了如何通过 SAP Fiori Tools 提供的 Guided Development 功能，在一系列步骤中维护要创建的自定义 Action 的明细，最终自动生成控制器扩展文件和在 manifest.json 文件里注册自定义 Action 的技术信息，以实现需求。

本文介绍了 SAP Fiori Tools 里的 Application Modeler 提供的 Page Map 的工作原理，阐述了其基于的 app.json 和 manifest.json 文件互相同步的工作机制，最后分享了笔者在实际 Fiori Elements 开发过程中，遇到 Page Map 无法打开时一些错误排查的思路。

本文详细介绍了 SAP Fiori Elements 的 List Report 应用，针对 Table 区域新增自定义列开发方式背后的工作原理，主要围绕开发人员在 manifest.json 里注册的 fragment 在运行时如何被 SAP Fiori Elements 框架解析，并如何参与到整个表格列绘制过程中这两个技术实现点来阐述的。

本文介绍了使用 SAP Fiori Tools Extension Pack 里提供的 Application Modeler extension，以图形化界面对通过向导生成的 SAP Fiori Elements 应用进行表格列扩展的详细步骤。本教程后续步骤，笔者将会介绍这种扩展背后的工作原理，让大家做到知其然，知其所以然。

本文通过一个实际的例子，介绍了如何通过修改 SAP Fiori Elements 应用本地文件夹内的注解文件内容，来达到最后调整渲染出的 Fiori Elements 应用页面布局的目的。通过实际动手实践，我们对 Fiori Elements 框架的工作原理，有了进一步的认识。

本文详细介绍了如何找到 SAP Fiori Elements 类型为 ListReport 应用中 Smart Table Toolbar 上显示的标题字段的绑定路径，以及如何根据这个路径从模型里找到实际值。学习者跟着本文介绍的步骤做一遍，可以对 Fiori Elements 的设计和实现有一个更加深入的了解。

说明 SAP UI5 框架库文件是部署在 CDN 上的，CDN 的主要目标是通过将数据缓存到位于不同地理位置的多个服务器上，使用户能够从离他们更近的服务器获取内容，从而减少访问延迟、提高加载速度和改善网站的性能。因为本教程，下一篇文章，我们就要介绍，如何通过修改 Fiori Elements 本地工程文件夹里的注解文件，来达到微调 Fiori Elements 应用显示内容的目的。，是通过代理服务器的 Node.js 代码被访问的，访问结果再通过代理服务器，转交给 Fiori Elements 应用。

本文带着大家一起，了解一个典型的 SAP Fiori Elements 应用工程文件夹里，都包含哪些资源。这些资源分别都有什么用处，在 Fiori Elements 应用开发体系中，都扮演了哪些角色。

本教程的前五篇文章，我们已经为 SAP Fiori Elements 的创建做了足够的铺垫。是动手开始创建第一个 Fiori Elements 应用的时候了。大家可以跟着笔者一起，在本地电脑上用 Visual Studio Code 一步步创建 Fiori Elements 应用了。大家在动手之前，请务必按照上述编号为1的文章，完成自己本地 Visual Studio Code 的安装和环境搭建。如果大家在做的过程中遇到各种问题，可以在文末评论区留言，把你们遇到的错误消息发给我，或者把错误截图私信给我。

有朋友按照笔者这两套 SAP UI5 开发教程，分别进行 SAP UI5 Freestyle 和 Fiori Elements 的开发学习，对于 `ui5 serve` 和 `npx fiori run` 这两个命令行的使用辨析上产生了一些疑问。本文就来详细阐述这两个命令行工具的差异。这两个命令行都是用于在本地运行 SAP UI5 应用程序的命令，但是它们有一些区别。`ui5 serve` 更加轻量级和灵活，适用于 SAP UI5 本地开发环境，而 `npx fiori run` 则更加全面和自动化

本文详细介绍了使用 Visual Studio Code 通过命令行的方式，启动本地 SAP Fiori Elements 应用的三种方式：start, start-mock 和 start-local 的具体实现原理和区别。如果大家不喜欢用命令行，也可以在 Visual Studio Code 里，使用菜单 `View->Command Palette...`输入 `preview`，选择 `Fiori：Preview Application`：然后从下拉菜单里选择 start, start-

这个代理服务器能够自动监听我们 Fiori Elements 应用里向 ES5 Demo 系统发送的 OData 请求，拦截这个请求，并通过 Node.js 代码向 ES5 服务器转发，拿到响应数据后再交还给 Fiori Elements 应用。后者对自己发出的请求被代理这件事情一无所知。本文的任务是，大家按照我的介绍，在本地成功运行笔者准备的这个 Fiori Elements 应用。的错误消息, 说明大家安装的 Node.js 版本没有达到本地运行 Fiori Elements 的最低要求。

本文先是介绍了为什么 Northwind 这些公网可以访问的 OData 服务不能用来被 SAP Fiori Elements 应用消费，接着介绍了如何在 SAP Gateway Demo 系统上免费申请账号和访问 OData 服务的方式。

本文介绍了本地使用 Visual Studio Code 进行 Fiori Elements 开发所需要安装的这个扩展包里6个能够提高 Fiori Elements 应用开发效率的扩展。在本教程后续步骤里我们会通过实际的例子介绍这些 Visual Studio Code 扩展的详细用法。