SAP Fiori Elements 开发教程：从入门到精通

本公众号曾经介绍了笔者之前发布的三套 SAP 开发教程：

本教程是笔者正在写作的第四套开发教程。截止 2025年3月12日，总共包含 42 篇教程文章。

Fiori Elements 是 SAP 公司的旗舰级产品，第四代 ERP 产品即 SAP S/4HANA UI 界面的前端开发框架，可以说在 SAP 浩如烟海的技术开发体系中，占据着绝对举足轻重的地位。

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

本教程是笔者在工作实战中使用 Fiori Elements 积累的开发经验和感悟的汇总。

扫码获得教程的原始链接。

下面是本教程的目录，内容还在持续更新中。

0. 迈入 SAP Fiori Elements 开发的大门 - 什么是 Fiori Elements，它和 Freestyle UI5 开发方式有何区别?

1. SAP Fiori Elements 开发环境的搭建和开发准备工作

2. 在 ES5 系统注册用户以获得 Fiori Elements 开发教程测试 OData 服务的访问账号

3. 动手运行第一个 SAP Fiori Elements 应用(ListReport 类型)

4. SAP Fiori Elements 本地应用启动的三种模式辨析

5. 动手开发第一个 SAP Fiori Elements 应用

6. 知其然知其所以然 - 使用向导生成的 Fiori Elements 应用的文件结构分析

7. SAP Fiori Elements 应用里的 ui5.yaml 文件详解

8. 如何找到 SAP Fiori Elements 应用某个字段显示值具体的数据源

9. 如何修改 Fiori Elements 工程包含的本地注解(annotations)文件

10. 如何通过扩展(Extension)的方式给 SAP Fiori Elements List Report 的表格新增列

11. SAP Fiori Elements List Report 表格新增列扩展方式的工作原理

12. SAP Fiori Tools Page Map 的实现详解和故障排除

13. 如何使用 Guided Development 给 Fiori Elements List Report 的工具栏添加自定义按钮

14. SAP Fiori Elements List Report 如何在扩展开发里使用代码获得当前选中的表格行项目

15. 通过一个实际的 Fiori Elements 扩展开发需求，介绍什么是 SAP Fiori Extension API

16. SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍

17. SAP Fiori Elements 源码分析系列：注解 UI.IsImageURL 的工作原理剖析

18. 从 SAP Fiori Elements List Report 中的图片显示，谈谈背后的 XML Template 设计机制

19. Fiori Elements List Report 模版里表格列的显示逻辑总结

20. 从实际的开发案例出发，介绍 Navigation Property 在 Fiori Elements 开发中的作用

21. 什么是 SAP Fiori Elements List Report 模版里的 Criticality 属性

22. 持续写作中......

List Report 应用

1. ListReport 应用技术架构概述

List Report 应用的外观：

2. 如何通过扩展(Extension)的方式给 SAP Fiori Elements List Report 的表格新增列

新增的自定义列的截图如下：

3. List Report Table 工具栏区域自定义按钮的源代码

自定义按钮的效果图：

4. List Report Table 工具栏自定义按钮点击后，如何获取选中行项目的数据

5. 使用 List Report Extension API 获取当前选中的表格行项目的例子源代码

Overview Page 应用 - 正在编写中

Overview Page 的外观：

Object Page 应用 - 正在编写中

Object Page 应用的外观：

WorkList 应用 - 正在编写中

Work List 应用的外观：

Analytical List Page - 正在编写中

Analytical List Page 的外观：

工具和 Extension 使用技巧和故障排查指南

本区域列出了笔者进行 SAP Fiori Elements 开发过程中日积月累搜集到的一些开发小技巧和故障排查指南。

SAP Fiori Tools Extension Pack 的使用技巧汇总

使用 Visual Studio Code 提供的向导和模版创建 Fiori 应用时，遇到故障后的排查指南

问题解答

关于 OData 2.0 和 OData 4.0 协议里对于 SAP 自定义注解(Annotations) 处理的区别讲解

SAP UI5 Freestyle 开发和 Fiori Elements 开发技术各自的优势和劣势

SAP UI5 开发里命令行 ui5 serve 和 npx fiori run 有什么区别？